案例:单边阴影CSS写法

老白 6个月前 243浏览 0评论

相关:《边框四边阴影CSS(box-shadow属性)内侧阴影、外侧阴影、阴影颜色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; /*右边阴影*/

更多案例:

案例:单边阴影CSS写法 CSS学习 第1张

box-shadow: 0 17px 10px 10px #ff8c1a inset; 
底部阴影数值设置大于左右阴影数值,将底部阴影往顶部阴影挤。


案例:单边阴影CSS写法 CSS学习 第2张

代码:box-shadow: 0 17px 10px -8px #ff8c1a inset;
将左右阴影设置负值,使阴影脱离盒子边框。

案例:单边阴影CSS写法 CSS学习 第3张

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

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

案例:单边阴影CSS写法 CSS学习 第4张

案例:单边阴影CSS写法 CSS学习 第5张

评论