阴影进阶，实现更立体的阴影效果！

CSS阴影让物体看起来更立体。然而，在最简单的阴影使用之上，我们可以实现更有趣、更立体的阴影效果。本文将向您展示如何使用CSS实现几种比普通阴影更具立体感的阴影效果。CSSShadowBasics在CSS中，可以实现亮面阴影的属性有3个：box-shadow——boxshadow。文本阴影-文本阴影。filter:drop-shaodw()-过滤器内的阴影。我不会过多描述它们的基本语法和用法。你可以先在MDN上完成这部分，贴几张图快速回顾一下：box-shadow-boxshadow:text-shadow-textshadow:filter:drop-shaodw()-Shadowsinthefilter:基本上就是这三个阴影相似。需要注意的是，box-shadow还区分了内阴影，使用关键字inset来描述。box-shadow多了一个阴影扩散半径参数。长阴影让我们先看看长阴影。我们可以通过多层阴影叠加来实现文字的立体阴影。它也可以用在div容器上。当然，这里还有一个有趣的方法。假设我们有一个矩形元素，想给它添加一个长投影，如下：要生成这个长投影，我们可以叠加刚才提到的多个阴影，然后使用元素的两个伪元素。其实上图是这样的：重点是我们通过变换两个伪元素：skew()和将背景色从纯色变为透明色来实现长阴影的效果：CodePenDemo--LinearGradient模拟长阴影[1]。立体投影OK，我们继续。下一个主题是立体投影。这个说法很奇怪。阴影的出现是为了让原本的元素看起来更有立体感。那么这里所谓的三维投影又是什么呢？这里所谓的三维投影并不是一定要用box-shadow、text-shadow或drop-shadow，而是我们用其他元素或属性来模拟元素的阴影。这样做的目的是为了突破box-shadow等元素的一些定位限制。使阴影的位置、大小和模糊更加灵活。好吧，让我们来看看。对于这样一个元素，我们希望通过自定义阴影的位置，使其更加立体：上图中的div只有一个很浅的box-shadow，看上去与三维度无关。接下来，我们利用div的伪元素生成一个类似于原图角形状的图形，然后通过transform对其进行移位，可能是这样的：OK，最后对生成的元素进行一些虚化效果伪元素（filterorbox-shadow），可以实现像角被撕裂的三维效果：代码很简单，伪CSS代码如下：div{position:relative;宽度：600px；高度：100px；背景：hsl（48、100%、50%）；border-radius:20px;}div::before{content:"";位置：绝对；顶部：50%；左：5%；右：5%；底部：0；边界半径：10px；背景：hsl（48、100%、20%）；变换：平移（0，-15%）旋转（-4deg）；变换原点：中心中心；box-shadow:0020px15pxhsl(48,100%,20%);}所以总结一下：立体投影的关键点就是帮助伪元素生成一个和父元素大小相近的元素元素，然后旋转它并定位到合适的位置，然后给它一个阴影操作。颜色的运用也很重要。影子的颜色通常比它本身的颜色深。这里用hsl来表示颜色比较方便，l控制颜色的明暗。类似的技术还有很多其他的场景可以实现：详细完整的代码可以点击这里：CodePenDemo--StereoscopicProjection[2]。浮雕阴影另一种具有三维效果的阴影是浮雕阴影。它的本质还是box-shadow和text-shadow，只是需要控制颜色的配合，同时控制内外阴影的使用。核心是2点：背景颜色与内容（文本或框颜色）保持一致。使用两个相反的方向，使用两组对比色值，来实现凹凸效果。首先我们来看一下文字版的浮雕效果。首先要实现凸起的效果，我们需要实现一个背景色与文字颜色相同的文字：

body{background:#999;}p{color:#999;}的效果如下，因为背景颜色和文字颜色一样，所以我们什么也看不到。不过没关系，我们在x和y方向给文字添加一个1px的黑色阴影：p{color:#999;text-shadow:1px1px1px#000;}效果如下：感觉有点，然后反转一下，就是-1px相对于x和y方向加一个黑色，也就是白色阴影：p{颜色：#999；text-shadow:1px1px1px#000,-1px-1px1px#fff;}效果如下，所以我们得到了一个凸起纹理的Embossedshadow：如果我们交换颜色呢？p{颜色：#999；text-shadow:1px1px1px#fff,-1px-1px1px#000;}可以轻松得到凹面纹理EmbossedShadow:以上DEMO的完整代码：CodePenDemo-EmbossedShadow[3]。Neo-mimeticstyleshadows我们将把技巧用在文字上，扩展到容器上，得到最近流行的mimeticstyleshadows。原理是相似的。两个阴影，使用两个相反的方向，使用两组对比色值，达到凹凸不平的效果。与文字不同的是，我们这里需要利用方框的内阴影来实现凹陷的效果。div{width:120px;高度：120px；背景：#e9ecef；颜色：#333；box-shadow:7px7px12pxrgba(0,0,0,.4),-7px-7px12pxrgba(255,255,255,.9);}div:nth-child(2){box-shadow:inset-7px-7px12pxrgba(255,255,255,.9),inset7px7px12pxrgba(0,0,0,.4);}这样就可以得到一个模仿风格的按钮，如如下图，左凸右凹：通过一个简单的transition，就可以实现整个点击交互：div{transition:.2sall;框阴影：7px7px12pxrgba(0,0,0,.4),-7px-7px12pxrgba(255,255,255,.9),inset000xrgba(255,255,255,.9),插入000rgba(0,0,0,.4);&:active{box-shadow:000rgba(0,0,0,.4),000rgba(255,255,255,.9),inset-7px-7px12pxrgba(255,255,255,.9),inset7px7px12pxrgba(0,0,0,.4);}}看效果：文字立体投影/长阴影的三维效果对文字完全不适用，所以我们需要另辟蹊径来处理文字的三维阴影效果。通常，我们使用text-shadow来生成文字阴影，像这样：-----div{text-shadow:6px6px3pxhsla(14,100%,30%,1);}很好，但不是三维的。那么要实现三维文字阴影，最常用的方法就是使用多层文字阴影叠加。Tips：和box-shadow一样，text-shadow也可以多层叠加！但是对于单个元素，drop-shadow只能是一层。那么，对于上面的文字，我们来试试添加50层的文字阴影。嗯，50层手写其实很快。嗯，手写真的太慢了??，容易出错，所以这里需要借助SASS/LESS来帮忙，随便写一个生成50层阴影的函数，我们向右下方偏移1px，生成一层text-shadow:@functionmakeLongShadow($color){$val:0px0px$color;@for$i从1到50{$val:#{$val},#{$i}px#{$i}px#{$color};}@return$val;}div{text-shadow:makeLongShadow(hsl(14,100%,30%));}上面的SCSS代码。编译后会生成如下CSS：div{text-shadow:0px0px#992400,1px1px#992400,2px2px#992400,3px3px#992400,4px4px#992400,5px5px#992400,6px6px#99,7px7px#992400,8px8px#992400,9px9px#992400,10px10px#992400,11px11px#992400,12px12px#992400,13px13px#992400,14px#992400,15px15px192400,16px16px16PX,17px17px#992400,18px18px#992400,19px19px#992400,20px20px#992400,21px21px#992400,22px22px#992400,23px23px#992400,24px24px#992400,25px25px#992400,26px26px#992400,27px27px#992400,28px28px#992400,29px29px#992400,30px30px#992400,31px31px#992400,32px32px#992400,33px33px#992400,34px34px#992400,35px35px#992400,36px36px#992400,37px37px＃992400，38px38px＃992400，39px39px＃992400，40px40px＃992400，41px41px41px＃992400，42px42px42px42px＃992400，43px43px43px＃992400#44px44px44px44px44px44px44px44px44px44px44px44px44px44px44px44px44px44px44px44px#992400,48px48px#992400,49px49px#992400,50px50px#992400;}看看效果：嗯，很好，很有立体感，就是丑，怪怪的。问题是什么？阴影实际上有亮度和透明度的变化。因此，对于每一层渐变的文字阴影，明度和透明度应该是不断变化的。SASS可以很好地实现这个需求。下面是两个SASS颜色函数：fade-out改变颜色的透明度，让颜色更透明。desaturate改变颜色的饱和度值，使颜色不那么饱和。关于SASS颜色函数，可以看这里：Sass基础-颜色函数[4]。我们使用上面的两个SASS颜色函数来修改我们的CSS代码，主要修改上面的makeLongShadow函数：@functionmakelongrightshadow($color){$val:0px0px$color;@for$i从1到50{$color:fade-out(desaturate($color,1%),.02);$val:#{$val},#{$i}px#{$i}px#{$color};}@return$val;}好了，看看最后的效果：好了，大功告成，这次顺眼多了。详细完整的代码可以点击这里：CodePenDemo——三维文字阴影[5]。当然，使用CSS生成三维文字阴影的方法有很多种。这里再举一个例子，使用透明色和背景色的多重线性渐变来实现三维文字阴影。有兴趣的同学可以去看看具体实现：详细完整代码可以点这里：CodePenDemo——带阴影的线性渐变实现条纹和三维阴影条纹[6]。最后总结一下，本文介绍了5种使用CSS实现更多三维阴影效果的方法，可以帮助我们更好的理解CSS阴影。参考资料[1]CodePenDemo——线性渐变模拟长阴影：https://codepen.io/Chokcoco/pen/qJvVGy。[2]CodePenDemo——立体投影：https://codepen.io/Chokcoco/pen/LgdRKE?editors=1100。[3]CodePen演示-浮雕阴影：https://codepen.io/Chokcoco/pen/yLPmMXM。[4]Sass基础——颜色函数：https://www.w3cplus.com/preprocessor/sass-color-function.html。[5]CodePenDemo——三维文字阴影：https://codepen.io/Chokcoco/pen/JmgNNa。[6]CodePenDemo——带阴影的线性渐变实现条纹和三维阴影条纹：https://codepen.io/Chokcoco/pen/XxQJEB?editors=1100。