本文介绍了如何使用CSS的box-shadow属性实现元素的单边和多边投影效果。关键在于调整偏移量和模糊半径，通过设置适当的负偏移值和与模糊半径相等的扩张半径，可以达到只显示特定边的投影。投影的方向可以通过调整水平和垂直偏移量来控制，实现上、下、左、右以及多边的投影效果。
# 基础
“`
box-shadow:2px 2px 5px 1px rgba(0, 0, 0, .6) inset;
“`
第一个参数：设置对象的阴影的水平偏移量，可以为负数
第二个参数：设置对象的阴影的垂直偏移量，可以为负数
第三个参数：对象的阴影模糊值，不允许为负数
第四个参数：对象阴影的外延值，可以为负数
第五个参数：color 颜色
inset： 设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影
ps: ie9+
# 实现思路
最关键的核心就是：就是第四个参数，如果我们用一个负的扩张半径，而他的值刚好等于模糊半径，那么投影的尺寸就会与投影所属元素尺寸完全一致，除非使用偏移量来移动他，否则我们将看不到任何投影。
所以想要实现单边投影，只需要赋予偏移量就可以了。
如果 垂
最低0.47元/天 解锁文章
扫一扫
8321
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
