用 css3 的 -webkit-filter 做弥散阴影按钮

今天逛 codepen 看见的一组具有弥散阴影效果的按钮,想到我们射击师提过弥散阴影今年会大热,热不热不造,反正实际效果挺骚包的

下面那一层阴影是:before 伪元素再加上 -webkit-filter 属性里的模糊和发光实现的。

CSS3 里的 -webkit-filter 与 CSS Filter 还是不一样,也不是我们所熟悉的 IE 滤镜,官方的话是通过 CSS 或 SVG 渲染元素概念可以描述的元素,包括它的子元素。

意思就是 css3 的滤镜效果不止能用在图片上,还可以用在其他普通元素上。

but 目前支持这个属性的浏览器少得可怜,只有 Webkit 率先支持了这个属性,没错,意味着只能在最新的 Webkit 内核的浏览器上才能看见效果,比如 Chrome 和 Safari 等等

虽然这么说但用在渐进增强上不也是挺不错的嘛

代码如下:

<button class="diffusion-shadow">follow your heart</button>
.diffusion-shadow {
  position: relative;
  padding: 20px 30px;
  border-radius: 50em;
  color: #ffffff;
  text-align: center;
  font-size: 16px;
  font-family: 'Montserrat', Helvetica, Arial, sans-serif;
  outline: none;
  cursor: pointer;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: none;
}
.diffusion-shadow,
.diffusion-shadow:before {
  background: #52a0fd;
  background: -webkit-linear-gradient(left, #52a0fd 0%, #00e2fa 80%, #00e2fa 100%);
  background: linear-gradient(to right, #52a0fd 0%, #00e2fa 80%, #00e2fa 100%);
}
.diffusion-shadow:before {
  content: '';
  position: absolute;
  display: inline-block;
  z-index: -1;
  height: 40px;
  bottom: -5px;
  left: 30px;
  right: 30px;
  border-radius: 30em;
  filter: blur(20px) brightness(0.95);
  -webkit-filter: blur(20px) brightness(0.95);
}
目录