目录
box-shadow 设置元素阴影
text-shadow 设置文本阴影
box-shadow 设置元素阴影
box-shadow 属性可以设置一个或多个下拉阴影的框。即为元素设置阴影效果！
语法：box-shadow:h-shadow v-shadow blur spread colorinset;
提示：1）元素边框是什么形状，则投射出来的阴影也是什么形状，比如元素边框是圆的，则阴影也是圆的。2）元素的阴影无论偏移多少，并不会对元素的位置有影响。
实现代码如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><title>box-shadow</title><style type="text/css">* {margin: 0px;padding: 0px;}.outDiv {width: 800px;height: 200px;margin: auto;border: 1px solid darkred;border-radius: 10px;}.innerDiv {float: left;width: 150px;height: 150px;text-align: center;border-radius: 10px;display: inline-block;margin-top: 20px;}.div1 {/**设置元素阴影向右偏移10像素，向下偏移10像素，模糊5px，颜色为 #888888*/box-shadow: 10px 10px 5px #888888;}.div2 {/**设置元素阴影向右偏移10像素，向上偏移10像素，模糊10px，颜色为 #888888*/box-shadow: 10px -10px 10px #888888;}.div3 {/**设置元素阴影上下左右偏移0像素，模糊5px，阴影对外扩张5像素，颜色为 #888888*/box-shadow: 0 0 5px 5px #888888;margin-left: 50px;border-radius: 0;}img {/**设置元素阴影上下左右不进行偏移，模糊10px，对外扩张5px，颜色为 #554D4D*/box-shadow: 0px 0px 10px 5px #554D4D;margin-left: 50px;border-radius: 50px;}</style></head><body><div class="outDiv"><div class="innerDiv div1">box-shadow: 10px 10px 5px #888888;<br>投影在两侧</div><div class="innerDiv div2">box-shadow: 10px -10px 10px #888888;<br>投影在两侧</div><div class="innerDiv div3">box-shadow: 0 0 5px 5px #888888;<br>投影在四周</div><div class="innerDiv"><img src="/6/D/4/3_wangmx1993328.jpg"><span style="white-space: nowrap">box-shadow: 0px 0px 10px 5px #554D4D;</span><span>投影在四周</span></div></div></body></html>
text-shadow 设置文本阴影
text-shadow 属性应用于阴影文本，只适用于文本，对图片等无效。
语 法：text-shadow:h-shadow v-shadow blur color;
注意：text-shadow 属性连接一个或更多的阴影文本。属性是阴影，指定的每 2 或 3 个长度值和一个可选的颜色值用逗号分隔开来。
表格中的数字表示支持该属性的第一个浏览器版本号：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Text-shadow</title><style type="text/css">#h3_1 {text-shadow: 2px 2px;}#h3_2 {text-shadow: 2px 2px #f00;}#h3_3 {text-shadow: 2px 2px 5px #f00;}</style></head><body><h3 id="h3_1">Text-shadow</h3><h3 id="h3_2">文本-阴影</h3><h3 id="h3_3">文本-shadow</h3></body></html>
