《css揭秘》笔记（十二），投影效果

单侧投影

box-shadow是一个能为容器产生阴影效果的属性，它含有四个属性，例：

box-shadow: 2px 2px 4px rgba(0,0,0,.5);

我们可以通过以下步骤来理解这个属性生成阴影效果的原理：

1. 以容器位置及大小作为模板再生成一个颜色为rgba(0,0,0,.5)并与容器相同大小的元素，

2. 这个新生成的元素向右移动2px，再向下生成2px，

3. 这里我们设置了一个4px的模糊半径，此时就会以四个方向，每个方向的阴影边缘线（元素边框）为中心，左右扩展2px的区域，共4px，共同组成这个阴影区域。

4. 接下啦模糊后的元素与原始元素重叠的部分就会被减除，会保留原始元素的部分，减除的只是模糊元素。

使用4px的模糊半径意味着现在模糊后的元素会比原来的元素的尺寸要大8px，在设置合适的偏移量后得到只有右边模糊和下边模糊的元素，但是这样依然会显得模糊的区域太过浓重，因此我们想要设置一个单侧模糊。

最终的解决方案来自box-shadow的第四个长度参数，它排在模糊半径之后，称作扩张半径。这个参数会依据指定的值去扩大或缩小投影的尺寸。举例来说，一个-5px的扩张半径会把投影的宽度和高度各减少10px（即每边各5px）。

如果我们想要底边存在一个不太厚重的阴影，而别的边不需要设置阴影，就可以通过垂直移动元素，然后通过扩张半径去除其他边框的阴影。

.box1{
  width:100px;
  height: 50px;
  background-color: orange;
  box-shadow: 0 5px 4px -4px black;
}

邻边投影

此处主要解决的是在元素的两条相邻边上设置投影，根据单侧投影的技巧，做出如下调整：

1. 不需要把投影缩得太小，只需要把阴影藏进一侧，另一侧自然露出。因此，扩张半径不应该是模糊半径的相反值，而是相反值的一半。

2. 需要指定两个偏移量，因为需要投影在水平和垂直方向上同时移动，它们的值需要大于等于模糊半径的一半，令另外两条边的投影能被藏起来。

.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却会忽视透明部分，这类情况包括：

1. 半透明图像、背景图像、或者border-image;

2. 元素设置了点状、虚线或半透明的边框，但没有背景（或者当background-clip不是border-box时）；

3. 伪元素在原有元素上添加的形状

4. 切角效果中的切角形状

5. 折角效果中的折角形状

6. 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揭秘》一书的笔记，如果侵犯到了原著作者的权益，请联系我删除。