为元素添加阴影效果
box-shadow:内阴影 横向便宜 纵向偏移 羽化 缩放 颜色;
内/外投影
默认外投影

.shadow{
            width: 5em;
            height: 5em;
            border: solid 3px #000000;
            box-shadow: 10px 10px rgba(0,0,0,.6);
        }
<div class="shadow"></div>

外投影

内投影(指定inset)
box-shadow: inset 10px 10px rgba(0,0,0,.6);
IXbsTf.png

横向偏移
横向偏移参数大于纵向偏移参数
box-shadow: 50px 10px rgba(0,0,0,.6);
IXqKN8.png

纵向偏移
box-shadow: 10px 50px rgba(0,0,0,.6);
IXOhXd.png

羽化
box-shadow: 10px 10px 20px rgba(0,0,0,.6);
IXOzBn.png

缩放
它用来缩放阴影大小。正值为增大负值为缩小
box-shadow: 10px 10px 0 15px rgba(0,0,0,.6);
IXX48U.png