爱站程序员基地投影效果
- 单侧投影
- 邻边投影
- 双侧投影
- 不规则投影
- 解决方案
单侧投影
box-shadow
是一个能为容器产生阴影效果的属性，它含有四个属性，例：
box-shadow: 2px 2px 4px rgba(0,0,0,.5);
我们可以通过以下步骤来理解这个属性生成阴影效果的原理：
-
以容器位置及大小作为模板再生成一个颜色为
rgba(0,0,0,.5)
并与容器相同大小的元素，
-
这个新生成的元素向右移动2px，再向下生成2px，
-
这里我们设置了一个4px的模糊半径，此时就会以四个方向，每个方向的阴影边缘线（元素边框）为中心，左右扩展2px的区域，共4px，共同组成这个阴影区域。
-
接下啦模糊后的元素与原始元素重叠的部分就会被减除，会保留原始元素的部分，减除的只是模糊元素。
使用4px的模糊半径意味着现在模糊后的元素会比原来的元素的尺寸要大8px，在设置合适的偏移量后得到只有右边模糊和下边模糊的元素，但是这样依然会显得模糊的区域太过浓重，因此我们想要设置一个单侧模糊。
最终的解决方案来自
box-shadow
的第四个长度参数，它排在模糊半径之后，称作扩张半径。这个参数会依据指定的值去扩大或缩小投影的尺寸。举例来说，一个-5px的扩张半径会把投影的宽度和高度各减少10px（即每边各5px）。
如果我们想要底边存在一个不太厚重的阴影，而别的边不需要设置阴影，就可以通过垂直移动元素，然后通过扩张半径去除其他边框的阴影。
.box1{width:100px;height: 50px;background-color: orange;box-shadow: 0 5px 4px -4px black;}
邻边投影
此处主要解决的是在元素的两条相邻边上设置投影，根据单侧投影的技巧，做出如下调整：
-
不需要把投影缩得太小，只需要把阴影藏进一侧，另一侧自然露出。因此，扩张半径不应该是模糊半径的相反值，而是相反值的一半。
-
需要指定两个偏移量，因为需要投影在水平和垂直方向上同时移动，它们的值需要大于等于模糊半径的一半，令另外两条边的投影能被藏起来。
.box2{margin: 10px;width: 100px;height: 50px;background-color: orange;box-shadow: 3px 3px 6px -3px black;}
双侧投影
在这里我们想要得到元素两条对边的投影，由于扩张半径在四个方向上的作用是均等的（无法指定投影在水平方向放大，而在垂直方向上缩小），唯一的方法是用两块投影（每边各一块）来达到目的，基本上是将“单侧投影”的技巧运用两次：
.box2{margin: 10px;width: 100px;height: 50px;background-color: orange;box-shadow: 3px 3px 6px -3px black;}
不规则投影
box-shadow
能为
border-radius
生成的形状添加投影，但是如果元素添加了一些伪元素或半透明的装饰之后，
border-radius
却会忽视透明部分，这类情况包括：
-
半透明图像、背景图像、或者
border-image
;
-
元素设置了点状、虚线或半透明的边框，但没有背景（或者当
background-clip
不是
border-box
时）；
-
伪元素在原有元素上添加的形状
-
切角效果中的切角形状
-
折角效果中的折角形状
-
clip-path
生成的形状，比如菱形形状
以下提供解决方案：
解决方案
滤镜效果规范提供一个叫做
filter
的新属性，这个属性是从svg那里借鉴过来的。
filter
的相关属性包括
blur()
、
grayscale()
、
drop-shadow()
，可以使用空格分割法一次设置多个
filter
的属性值。
filter: blur() grayscale() drop-shadow();
drop-shadow()
滤镜可接受的参数基本上与
box-shadow()
一致，但不包括扩张半径和
inset
关键字，也不支持逗号分割的多层投影语法。
bos-shadow: 2px 2px 10px rgba(0, 0, 0, .5);
可以改写成：
filter: drop-shadow(2px 2px 10px rgba(0,0,0,.5));
drop-shadow
在平行四边形效果上的使用：
.box3{margin: 80px;position: relative;width: 80px;height: 50px;text-align: center;padding-top: calc(50px - 16px);-webkit-filter: drop-shadow(10px 10px 10px rgba(0,0,0,.5));filter: drop-shadow(10px 10px 10px rgba(0,0,0,.5));}.box3::before{content: \'\';position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: -1;background-color: #554433;transform: skewX(45deg);}
需要注意的是如果文字效果使用了
text-shadow
，而容器又使用了
drop-shadow()
，那么
drop-shadow
的效果又会重复叠加到设置了
text-shadow
的文字上。
本文是《css揭秘》一书的笔记，如果侵犯到了原著作者的权益，请联系我删除。
