H5与C3权威指南笔记--box-shadow

https://www.cnblogs.com/sandraryan/

box-shadow 用于给盒子添加阴影效果。IE9＋

举个栗子：box-shadow: inset 5px 5px 5px red;

inset可选，该值会让阴影出现在盒子内部。

第一个5px是阴影离开文字横向就方向（即x轴上），接受负值。

第二个5px是阴影离开文字纵向就方向（即y轴上），接受负值。

　　以上两个值都设为0，将在盒子周围绘制阴影。（四个边嗷）

　　大概长这样

　　

第三个5px是阴影的模糊半径。

最后就是阴影颜色啦。

例子一：

这是一个很正常的有阴影的盒子~

.div1{
        box-shadow: 5px 5px 5px green;
    }

<div class="div1"></div>

例子二：

这个盒子让x，y轴方向都变成负值，同时把模糊半径变成0. 会发现阴影位置从右边，下边挪到了左边和上边。

模糊半径使阴影部分不那么模糊。。。。（emmm）

书上说的是：负值会使阴影离开文字方向变成向左，向上。（正值是向下，向右）

将模糊半径设为0，会绘制不向外模糊的阴影。

 .div2{
        box-shadow: -5px -5px 0 green;
    }

<div class="div2"></div>

例子三：

通过改变x，y轴上的数值，使阴影向不同方向绘制~

.div3{
        box-shadow: 0 5px 5px red,
        5px 0 5px blue,
        -5px 0 5px yellow,
        0 -5px 5px green;
}
<div class="div3"></div>

emmm 效果图长这样 是有点丑了，，不过很直观

例子四：

首先用给大盒子div6设置四个边的阴影，并指定inset，使阴影向内绘制。

然后