drop-shadow：为不规则DOM添加阴影

按钮阴影

前端平时开发页面中，按钮是一个很常见的组件。为了让按钮变的明显，一般会对按钮做一个阴影。
这个很简单，代码如下:

.box-shadow {
  box-shadow: 0 4px 20px #ccc;
}

效果如下：

但是，有时候我们会遇到可爱的设计师，让你做一个不规则的按钮。比如下面这样的。

不规则的按钮

针对这种按钮，我们可以用radial-gradient来实现。radial-gradient函数用径向渐变创建"图像"。
举个例子：

.circle-btn {
  background-image:
    radial-gradient(circle at 100% 100%, transparent 0, 
      transparent 12px, #2179f5 13px);
}

上面这个例子中，circle at 100% 100%表示在100% 100%的位置，即当前DOM的右下角为圆心，画一个圆。这个圆从圆心往外渐变，渐变的样式是离圆心0到12px的颜色是transparent，从12px到13px的颜色是#2179f5。

通过上面这个方法，我们就可以把按钮的4个角变成图片的样式。
代码如下：

.circle-btn {
  padding: 6px 20px;
  background-size: 70% 70%;
  background-image: 
    radial-gradient( circle at 100% 100%, transparent 0, 
      transparent 12px, #2179f5 13px),
    radial-gradient( circle at 0 0, transparent 0,
      transparent 12px, #2179f5 13px),
    radial-gradient( circle at 100% 0, transparent 0,
      transparent 12px, #2179f5 13px),
    radial-gradient( circle at 0 100%, transparent 0,
      transparent 12px, #2179f5 13px);
  background-repeat: no-repeat;
  background-position: right bottom, left top, right top, left bottom;
}

不规则按钮的阴影

最后如果继续用box-shadow来做按钮的阴影，效果就会很奇怪，如图：

为什么会这样？
因为box-shadow是对这个DOM节点box的阴影，看名字也能看出来。4个角切掉后，box的大小并没有改变。所以阴影没有在四个切掉的角下方。
查了一些资料，发现了drop-shadow这个属性可以解决这个问题。
直接上代码：

.drop-shadow {
  filter: drop-shadow(0 4px 20px #ccc);
}

drop-shadow是filter的一个属性方法，里面的参数和box-shadow是一样的。
效果如图：

最后

CSS是学习前端路上最难掌握全的，属性又多又碎。大家有什么好的学习方法吗，评论区告诉下我。

结束

好了，本文到此结束，希望本文对你有所帮助 :-)
最近新弄了一个公众号：写代码的浩，求关注 😄。后面会逐步把掌握的前端知识以及职场知识沉淀下来。
如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。