阴影效果在网页设计中被广泛使用，可以使页面看起来更凸显。在CSS中创建阴影效果有多种方法，下面将介绍三种常用的方式。
一、box-shadow属性
box-shadow属性可以为HTML元素添加阴影效果。其语法如下：
element {
box-shadow: h-shadow v-shadow blur spread color inset;
}
其中：
- h-shadow：水平方向的阴影长度。
- v-shadow：垂直方向的阴影长度。
- blur：模糊距离。
- spread：阴影的大小。
- color：阴影的颜色。
- inset：可选项，如果指定该值，则将阴影改为内阴影。
下面是一个例子：
.shadow {
box-shadow: 5px 5px 5px #888888;
}
上面的代码为.class为shadow的HTML元素添加了一个5px * 5px * 5px的阴影，颜色为#888888。
二、text-shadow属性
text-shadow属性可以为文本添加阴影效果，其语法如下：
element {
text-shadow: h-shadow v-shadow blur color;
}
其中：
- h-shadow：水平方向的阴影长度。
- v-shadow：垂直方向的阴影长度。
- blur：模糊距离。
- color：阴影的颜色。
下面是一个例子：
.shadow {
text-shadow: 1px 1px 1px #888888;
}
上面的代码为类为.shadow的文本添加了一个1px * 1px * 1px的阴影，颜色为#888888。
三、伪元素：after和before
除了box-shadow属性和text-shadow属性之外，我们还可以使用伪元素:before和:after为元素添加阴影效果，其语法如下：
element:before {
content: "";
box-shadow: ...
}
element:after {
content: "";
box-shadow: ...
}
其中，:before表示在元素内部前面添加；:after表示在元素内部后面添加。content: “”是必须的，但它并不展示任何内容。
下面是一个例子：
.box:before {
content: "";
box-shadow: 5px 5px 5px #888888;
}
.box:after {
content: "";
box-shadow: -5px -5px 5px #888888;
}
上面的代码为类为.box的HTML元素添加了两个阴影，前一个阴影向右下方偏移，后一个阴影向左上方偏移。
总结
以上就是三种在CSS中创建漂亮阴影效果的常用方式，可以根据实际需要选择不同的方式达到设计效果。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/193984.html
微信扫一扫 
支付宝扫一扫 