box-shadow的用法
作者：互联网
css3新增了好多属性，三年前学习过但是不怎么使用感觉自己又不会用它了，今天学习顺便分享出来供大家一起学习。
box-shadow属性向框添加一个或多个阴影；
标准形式 ：box-shadow：h-shadow v-shadow blur spread color inset;
注意：box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。
个属性值说明：
h-shadow：横向阴影的大小,正值(1px)在右边，值越大阴影越大；负值(-1px)在左边，值越小阴影越大，它们的阴影都在盒子上面可见；当值为0时，阴影在盒子下面不可见；
v-shadow：纵向阴影的大小,正值(1px)在右下边，值越大阴影越大；负值(-1px)在上边，值越小阴影越大，它们的阴影都在盒子上面可见；当值为0时，阴影在盒子下面不可见；
blur：阴影的模糊程度，值越大越模糊;
spread：正值越大向外伸缩越明显，负值越小向内收缩，在盒子下面不可见；
color：阴影的颜色值；
inset：设置为内阴影，没有设置默认为外阴影；
实现方式：
div{ margin:0 auto; width:200px; height:200px; background:purple; box-shadow:-11px 0; box-shadow:11px 0; box-shadow: 0 10px; box-shadow: 0 -10px; box-shadow: 3px 10px 10px 10px; box-shadow: 3px 10px 10px 10px yellow; box-shadow:inset -11px -20px -8px yellow; } 以上代码是我把每个属性值都进行了验证，根据执行顺序，大家可以把下面的都注释了，从第一个开始依次进行验证，我上面代码最后效果是我最后设置的shadow样式，如图所示：
具体应用：
标签：box,阴影,1px,10px,shadow,用法,值越 来源： https://www.cnblogs.com/liuxuelan/p/11707128.html