案例：单边阴影CSS写法_CSS学习

资料来源：网络整理时间：2023/3/4 0:56:13 共计：3642 浏览

相关：《边框四边阴影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; /*右边阴影*/

更多案例：

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

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

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

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

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：table 表格边框css_CSS学习 | ·下一条：案例：jQuery 返回顶部（返回顶部、微信、评论、反馈）_js/jQuery