css 左边阴影_案例：单边阴影CSS写法

之前的一篇文章主要介绍了周边阴影，而没有对阴影特别解释，特别是box-shadow各种值的意思！E {box-shadow:inset x-offset y-offset blur-radius spread-radius color}

对象选择器 {text-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色}

.dv1,.dv2{

width: 100px;

height: 100px;

border: 1px solid #ccc;

}

.dv1{

box-shadow: -5px 0 5px #ccc, /*左边阴影*/

0 -5px 5px #ccc, /*顶部阴影*/

0 5px 5px #ccc, /*底部阴影*/

5px 0 5px #ccc; /*右边阴影*/

}

.dv2{

box-shadow: -5px 0 5px -5px #ccc, /*左边阴影*/

0 -5px 5px -5px #ccc, /*顶部阴影*/

0 5px 5px -5px #ccc, /*底部阴影*/

5px 0 5px 1px #ccc; /*右边阴影*/

更多案例：

box-shadow: 0 17px 10px 10px #ff8c1a inset;

底部阴影数值设置大于左右阴影数值，将底部阴影往顶部阴影挤。

代码：box-shadow: 0 17px 10px -8px #ff8c1a inset;

将左右阴影设置负值，使阴影脱离盒子边框。

代码：box-shadow: -20px -2px 15px -13px #ff8c1a inset;

相应可以设置左边和底部单边。