boxshadow单边阴影写法

boxshadow单边阴影写法

1.语法：box-shadow:h-shadowv-shadowblurspreadcolorinset;

(box-shadow:水平阴影垂直阴影模糊距离阴影大小阴影颜色内部阴影;)

水平阴影、垂直阴影值必填，其余值可选；

css3属性

v.a{

width:200px;

height:200px;

margin:20pxauto;

border:1pxsolid#CCCCCC;

box-shadow:10px20px10px10px#f00;

}

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

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

总之，inset属性让水平、垂直阴影的方向与没有inset时相反。

3.如果只要实现单侧阴影，就得牺牲掉模糊效果，因为一旦模糊，颜色会扩散，效果会不明显。因为阴影从本质上来说是一个颜色快

4.0-10px00设置上方单边阴影；

10px000设置右侧单边阴影；