Home >Web Front-end >Front-end Q&A >What is the attribute of setting shadow for box in css3
What is the attribute of setting shadow for box in css3
- 青灯夜游Original
- 2022-05-18 13:04:015794browse
The css3 attribute for setting shadows on boxes is "box-shadow". This attribute is used to achieve the border shadow effect and apply the shadow to the box element. The syntax is "box-shadow: Horizontal shadow Vertical shadow Blur radius Expansion radius Shadow color Projection mode"; if the projection mode is set to "inset", inner shadow can be achieved.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
css3 The attribute that sets the shadow for the box is "box-shadow".
box-shadow property - to achieve border shadow effect
box-shadow property can apply shadow to the text box. Set the shadow's pixel length, width and blur distance as well as the shadow's color.
box-shadow can add shadows to box elements, supporting adding one or more.
box-shadow: X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 投影方式;
Note: The boxShadow property adds one or more drop-down 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.
Note: inset can be written in the first or last parameter, and other positions are invalid.
-
X-axis offset and Y-axis offset values (horizontal shading and vertical shading)
X-axis offset and Y-axis offset The axis offset value can be set to a negative number
-
Shadow blur radius:
This parameter is optional and the value can only be positive. If the value is 0, it means that the shadow has no blur effect. The larger the value, the blurr the edge of the shadow.
-
Shadow expansion radius:
This parameter is optional. The value can be positive or negative. If the value is positive, the entire shadow will be extended. Expand, otherwise if the value is negative, reduce it.
Example
<html>
<head>
<meta charset="utf-8">
<style>
div{
width: 300px;
height: 100px;
background:#fff;
border: 1px solid #FFC0CB;
margin: 50px;
}
.box1 {
box-shadow: 10px 10px 5px #888888;
}
.box2 {
/* X轴偏移量为负数 */
box-shadow:-10px 10px 5px #666;
}
.box3 {
/* Y轴偏移量为负数 */
box-shadow: 10px -10px 5px #888888;
}
.box4 {
/* inset将外阴影改内阴影 */
box-shadow: 10px 10px 10px #888888 inset;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>
(Learning video sharing: css video tutorial、web front end）
The above is the detailed content of What is the attribute of setting shadow for box in css3. For more information, please follow other related articles on the PHP Chinese website!