一、使用box-shadow制作阴影效果
CSS3中提供了box-shadow属性，可以用于制作阴影效果。
.shadow {
box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}
box-shadow的参数分别表示：水平偏移量、垂直偏移量、模糊半径、阴影颜色。
可以设置多个阴影效果：
.shadow {
box-shadow: 2px 2px 5px rgba(0,0,0,0.2), -2px -2px 5px rgba(255,255,255,0.2);
}
二、使用text-shadow制作字体阴影效果
text-shadow属性可以用于在字体周围添加一个投影。
.shadow {
text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}
text-shadow的参数与box-shadow类似，分别表示：水平偏移量、垂直偏移量、模糊半径、阴影颜色。
三、使用伪元素和:before/:after制作阴影效果
可以使用伪元素和before/:after为元素添加阴影效果。
.shadow:before {
content: '';
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}
首先将伪元素的内容设为空，设置绝对定位，然后使用box-shadow属性创建阴影效果。
四、使用背景图片制作阴影效果
在背景图片中使用渐变效果可以制作出阴影效果。
.shadow {
background: linear-gradient(135deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 70%);
}
linear-gradient的参数分别表示：渐变方向、起始颜色、结束颜色、颜色变化的百分比。
五、使用outline制作阴影效果
可以使用outline属性制作简单的边框阴影效果。
.shadow {
outline: 2px solid rgba(0,0,0,0.2);
outline-offset: -2px;
}
outline的参数分别表示：边框宽度、边框样式、边框颜色。
outline-offset表示轮廓的偏移量，可以用负值实现阴影效果。
原创文章，作者：TQJL，如若转载，请注明出处：https://www.506064.com/n/139148.html
微信扫一扫 
支付宝扫一扫 