纯CSS绘制阴影效果 | 负值的扩散半径

这是我参与8月更文挑战的第13天，活动详情查看：8月更文挑战

在文章“如何快速实现多重边框 | CSS实现边框的4种方式”一文中，我们介绍了如何使用阴影box-shadow生成多层边框。今天来看看box-shadow还能有哪些妙用。

基本用法

css一个众所周知的阴影属性：box-shadow，可以绘制图形周边的阴影效果。

box-shadow: MDN定义：

box-shadow 属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。该属性可设置的值包括阴影的X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色。

即：

box-shadow: (inset) X轴偏移量, Y轴偏移量, 模糊半径，扩散半径，颜色 
复制代码

其中inset表示为内部阴影。X与Y偏移量允许为负值。并且box-shadow允许添加多个逗号分割的多个阴影效果。

以下为MDN原文：

• 当给出两个、三个或四个<length>值时。
• 如果只给出两个值, 那么这两个值将会被当作 <offset-x><offset-y> 来解释。
• 如果给出了第三个值, 那么第三个值将会被当作<blur-radius>解释。(即模糊半径)
• 如果给出了第四个值, 那么第四个值将会被当作<spread-radius>来解释。（扩散半径）

相关属性样式如下图所示：

骚操作

X值与Y值都允许负值，模糊半径不允许负值，最小为0。那么，扩散半径是否可以为负数呢？我们来测试一下：

<div class="box" style="box-shadow: 0px 100px 0px -20px black;">box-shadow: 0px 100px 0px -20px black;</div>
<div class="box" style="box-shadow: 0px 100px 0px 0px black;">box-shadow: 0px 100px 0px 0px black;</div>

复制代码

显示效果如下所示，可以看到，当扩散半径为负数时，阴影的整个大小尺寸横向和纵向都减小了。经过比对，设置为-20px时，隐隐单侧减少20px，两侧共减少40px。

通过该属性，我们可以参照《CSS Secret》绘制单侧引用，效果如下图：

一个好用的工具

Box-shadow_generator可以很方便的生成多个阴影效果。