box-shadow 的语法如下:
box-shadow: [horizontal offset] [vertical offset] [blur radius] [spread radius] [color];
- horizontal offset: 阴影水平偏移量。可以是正值(阴影向右偏移)或负值(阴影向左偏移)。
- vertical offset: 阴影垂直偏移量。可以是正值(阴影向下偏移)或负值(阴影向上偏移)。
- blur radius: 模糊半径。可以是零(无模糊)或正值(模糊半径越大,阴影越模糊)。
- spread radius: 阴影的尺寸。可以是正值(阴影扩展)或负值(阴影收缩)。
- color: 阴影的颜色。可以是具体的颜色值,也可以是关键字(如 transparent)。
以下是一个例子:
.element {
width: 100px;
height: 100px;
background-color: #3498db;
box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5);
}
在这个例子中,.element 是一个大小为 100x100 像素的蓝色方块,通过 box-shadow 属性为它添加了一个向右下方偏移的、模糊半径为 10px 的阴影,阴影颜色为半透明的黑色。
box-shadow 属性是创建元素阴影效果的常见方式,用于增强页面元素的立体感。
转载请注明出处:http://www.pingtaimeng.com/article/detail/6041/CSS