Detailed explanation of the usage of box-shadow attribute of CSS3:
First start with the name to understand, box-shadow can be decomposed into two parts:
(1).box: represents a box, which is what we call a box Elements, such as divs.
(2).shadow: The meaning of projection.
Then this attribute is used to set the shadow effect of the element.
This chapter introduces the usage of the box-shadow attribute through code examples.
The syntax structure is as follows:
box-shadow:h-shadow v-shadow blur spread color inset;
Parameter explanation:
1.h-shadow: Required, sets the horizontal offset of the element shadow, which can be a negative value, and the unit is pixels.
2.v-shadow: Required, sets the vertical offset of the element shadow, which can be a negative value, and the unit is pixels.
3.blur: Optional, shadow blur radius, which can only be positive. If it is 0, it means there is no blur effect, unit pixel.
4.spread: Optional, the expanded radius size of the shadow, which can be a negative value, and the unit is pixels.
5.color: Optional. If this parameter is omitted, the browser will select the default color. The default color of each browser will be different. Some are transparent, which sets the color of the shadow.
6.inset: Optional, you can change the outer shadow to an inner shadow.
Code example:
Example 1:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:green;
box-shadow:50px 50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>The above code only sets the horizontal and vertical offset of the shadow, and has no blur effect. At the same time, it does not set the color of the shadow, then browse The browser will select the default color, which will vary between browsers. Some are black and some are transparent. It is not recommended to default to this attribute.
Example 2:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:green;
box-shadow:50px 50px red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>The above code sets the shadow offset and shadow color of the div.
Example 3
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:green;
box-shadow:50px 50px 10px red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>The above code sets the horizontal and vertical offset, blur radius and shadow color of the div shadow.
Example 4:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:green;
box-shadow:50px 50px 10px 10px red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>The above code sets the horizontal and vertical offset, blur radius, shadow expansion radius and shadow color of the div shadow.
Example 5:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:green;
box-shadow:30px 10px 10px 10px red inset;
}
</style>
</head>
<body>
<div></div>
</body>
</html>The above code can set the inner shadow of the div and set other parameters.
Example 6:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:green;
box-shadow:30px 10px 10px 10px red,10px 20px 15px 10px blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Next Section