在CSS中，可以使用阴影效果属性将文本和边界框(图像)阴影添加到HTML文档中。 本文介绍了CSS的阴影效果属性。 关于CSS如何添加遮蔽效果，希望对大家有帮助。
1、添加文本阴影
在CSS中，可以使用text-shadow属性设置阴影文本。 该属性设置阴影的像素长度、宽度、模糊距离和阴影颜色。
语法： text-shadow : h-shadowv-shadowblurcolor；
属性值：
h-shadow :设定水平阴影的位置，允许为负值。
v-shadow :设定垂直阴影的位置，允许负值。
blur :设定模糊的距离。
color :设定阴影的颜色。
示例：
文本-阴影属性h1 {
颜色：红色；
text-shadow :3 px5px 5px # 656 b79；
}
hello世界！ 效果图：
2、添加边框(图片)阴影
在CSS中，可以使用box-shadow属性对文本框应用阴影。 该属性指示阴影的像素长度、宽度和模糊距离以及阴影的颜色。
语法：
box-shadow : h-shadowv-shadowblurspreadcolorinset；
属性值：
h-shadow :设定水平阴影的位置，允许负值； 必填字段，不能省略。
v-shadow :设定垂直阴影的位置，允许负值； 必填字段，不能省略。
blur :模糊距离设定； 可选选项的值。
spread :用于设定阴影大小的可选选项的值。
color :设定阴影的颜色； 可选选项的值。
inset )从外部阴影(开始时)改变阴影内部阴影的设置； 可选选项的值。
示例1 :添加边框阴影
盒体-阴影属性div{
width:300px；
height:100px；
background-color:red；
box-shadow :10 px 10px 5px # 8888888；
}
hello世界！ 效果图：
示例2 :添加图像阴影
摄影. demo{
width: 400px；
height: 300px；
边距： 50px自动；
}
. demo img{
box-shadow :10 px 10px 10px rgba (0，0，0，5)；
/*考虑浏览器的兼容性*
- moz-box-shadow :10 px 10px 10px rgba (0，0，5)；
- WebKit-box-shadow :10 px 10px 10px rgba (0，0，5)；
}
效果图：