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

    162-1.png

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

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

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

    but 目前支持这个属性的浏览器少得可怜，只有 Webkit 率先支持了这个属性，没错，意味着只能在最新的Webkit 内核的浏览器上才能看见效果，比如 Chrome 和 Safari 等等 用 css3 的 -webkit-filter 做弥散阴影按钮 - 图2

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

    代码如下：

    1. <button class="diffusion-shadow">follow your heart</button>
    1. .diffusion-shadow {
    2.     position: relative;
    3.     padding: 20px 30px;
    4.     border-radius: 50em;
    5.     color: #ffffff;
    6.     text-align:center;
    7.     font-size: 16px;
    8.     font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    9.     outline: none;
    10.     cursor: pointer;
    11.     letter-spacing: 0.03em;
    12.     text-transform: uppercase;
    13.     border: none;
    14. }
    15. .diffusion-shadow,
    16. .diffusion-shadow:before {
    17.     background: #52A0FD;
    18.     background: -webkit-linear-gradient(left, #52A0FD 0%, #00E2FA 80%, #00E2FA 100%);
    19.     background: linear-gradient(to right, #52A0FD 0%, #00E2FA 80%, #00E2FA 100%);
    20. }
    21. .diffusion-shadow:before {
    22.     content: '';
    23.     position: absolute;
    24.     display: inline-block;
    25.     z-index: -1;
    26.     height: 40px;
    27.     bottom: -5px;
    28.     left: 30px;
    29.     right: 30px;
    30.     border-radius: 30em;
    31.     filter: blur(20px) brightness(0.95);
    32.     -webkit-filter: blur(20px) brightness(0.95);
    33. }