1. 单侧投影
1.1 单侧投影
box-shadow 的第四个长度参数——扩张半径。它排在第三个参数模糊半径之后，这个扩张半径会根据你指定的值去扩大（当指定负值时）缩小投影的尺寸。举例来说，一个 -5px 的扩张半径会把投影的宽度和高度各减少 10px（即每边各 5px）。
- 如果我们使用一个负的扩张半径，而它的值刚好等于模糊半径，那么投影的尺寸就会与投影所属元素的尺寸完全一致。
- 除非用偏移量（前两个长度参数）来移动它，否则我们将完全看不见任何投影。
- 因此，如果给投影应用一个正的垂直偏移量，我们就会在元素的底部看到一道投影，而元素的另外三侧是没有投影的
box-shadow: 0px 5px 4px -4px black;
1.2 邻边投影——在元素的两条相邻边上设置投影
- 不应该把投影缩得太小，而是只需把阴影藏进一侧，另一侧自然露出就好。因此，扩张半径不应设为模糊半径的相反值，而应该是这个相反值的一半。
- 投影在水平和垂直方向上同时移动。它们的值需要大于或等于模糊半径的一半，因为这样可以把投影藏进另外两条边之内
<!DOCTYPE html>
<html><head><style> .pie {width: 100px;height: 100px;background: yellow;box-shadow: 3px 3px 6px -3px black;} </style></head><body><div class="pie"></div></body>
</html>
1.3 双侧投影
把投影设置在元素的两条对边（比如左侧和右侧）
由于扩张半径在四个方向上的作用是均等的，唯一的办法是用两块投影（每边各一块）
box-shadow: 5px 0 5px -5px black, -5px 0 5px -5px black;
2. 不规则元素的投影
- 只需要
blur()、grayscale()以及drop-shadow()函数就可以很方便地指定滤镜效果 - 可以把多个滤镜串连起来，用空格把它们分隔开
filter: blur() grayscale() drop-shadow();
drop-shadow()滤镜可接受的参数基本上跟 box-shadow 属性是一样的，但不包括扩张半径，不包括 inset 关键字，也不支持逗号分割的多层投影语法
box-shadow: 2px 2px 10px rgba(0,0,0,.5);
filter: drop-shadow(2px 2px 10px rgba(0,0,0,.5));
<!DOCTYPE html>
<html><head><style> /*** 不规则投影*/div {position: relative;display: inline-flex;flex-direction: column;justify-content: center;vertical-align: bottom;box-sizing: border-box;width: 5.9em;height: 5.2em;margin: 
最低0.47元/天 解锁文章
407
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
