css3 box-shadow属性

box-shadow干啥的？

阴影。
语法
box-shadow: h-shadow v-shadow blur spread color inset;

image.png

举个例子

最简单的

div
{
width:100px;
height:100px;
background-color:#ff9900;
box-shadow: 10px 10px ;
}

结果

image.png

改变阴影颜色

box-shadow: 10px 10px red;

结果

image.png

设置模糊距离

box-shadow: 10px 10px 10px red;

也就是给阴影加点过度，对比上图

image.png

inset

从外层的阴影（开始时）改变阴影内侧阴影

这定义真是不知所云。

看看效果吧

box-shadow: 10px 10px 10px red inset;

结果

image.png

效果就是阴影的位置彻底改变了，此外，虚的一侧跑里面去了。

关于方向

水平阴影可以理解为偏左右哪个方向，如果加入inset，正数偏左，负数偏右，如果没有inset，正数偏右，负数偏左；
垂直阴影可以理解为偏上下哪个方向，如果加入inset，正数偏上，负数偏下，，如果没有inset，正数偏下，负数偏上；

这个还是挺容易昂仁晕的。
看例子
inset 0 5px white, 上
inset 0 -5px #bbb,下
inset 5px 0 #d7d7d7, 左
inset -5px 0 #d7d7d7;右

div
{
background-color: #e7e7e7;
width:100px;
height:100px;
 box-shadow:
    inset 0 5px white, /*top*/
    inset 0 -5px #bbb,/*bottom*/
    inset 5px 0 #d7d7d7, /*left*/
    inset -5px 0 #d7d7d7;/*right*/
   border-radius:5px ;

}

image.png

总结

难点就是方向别搞错了。

参考

box-shadow单边阴影写法_百度经验