How to write css shadow-CSS Tutorial-php.cn

How to write css shadow

青灯夜游

Release： 2023-01-07 11:43:40

Original

9251 people have browsed it

How to write shadow: 1. Text shadow “text-shadow: h-shadow v-shadow blur color;”; 2. Border shadow “box-shadow: h-shadow v-shadow blur spread color inset; ".

How to write css shadow

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

1. How to write css text shadow

In css, you can use the text-shadow attribute to implement shadowed text. The text-shadow attribute is applied to shadow text. .

Syntax

text-shadow: h-shadow v-shadow blur color;

Copy after login

Value	Description
h-shadow	Required. The position of the horizontal shadow. Negative values are allowed.
v-shadow	Required. The position of the vertical shadow. Negative values are allowed.
blur	Optional. Blurred distance.
color	Optional. The color of the shadow.

Note: The text-shadow property connects one or more shadow text. The property is a shadow, specifying every 2 or 3 length values and an optional color value separated by commas. The expired length is 0.

Example:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css设置文本阴影效果</title> 
        <style> 
            h1 { 
                color: red; 
                text-shadow: 3px 5px 5px #656B79; 
            }
        </style> 
    </head> 
    <body> 
        <h1>文本阴影！</h1>
    </body> 
</html>

Copy after login

Rendering:

How to write css shadow

2. How to write css border shadow

In CSS, you can use the box-shadow attribute to achieve the border shadow effect. The box-shadow attribute can set one or more drop-down shadow boxes.

Syntax

box-shadow: h-shadow v-shadow blur spread color inset;

Copy after login

Value	Description
h-shadow	Required. The position of the horizontal shadow. Negative values allowed
v-shadow	Required. The position of the vertical shadow. Negative values allowed
blur	Optional. Fuzzy distance
#spread	Optional. The size of the shadow
#color	is optional. The color of the shadow.
inset	Optional. Change the shadow to the inner shadow from the outer shadow (to start with)

Note: The boxShadow property adds one or more drop shadows to the box. This property is a comma-separated list of shades, each shade specified by 2-4 length values, an optional color value, and an optional inset keyword. The value for omitted length is 0.

Example:

<!DOCTYPE html>
<html>
	<head>
		<style>
			div {
				width: 300px;
				height: 100px;
				background-color: #ff9900;
				-moz-box-shadow: 10px 10px 5px #888888;
				/* 老的 Firefox */
				box-shadow: 10px 10px 5px #888888;
			}
		</style>
	</head>
	<body>

		<div>边框阴影</div>

	</body>
</html>

Copy after login

Rendering:

How to write css shadow