给伪元素也加上box-shadow

在设置一些tag标签样式的时候，我们一般都是设置为一边箭头的标签样式，这个箭头一般都是使用伪元素before来进行模拟，但是当我们想要给这个标签加上阴影box-shadow的时候，你会发现你的阴影并不能应用的伪元素上。

我们先看下具体代码：

HTML:

<div class="div1">tag</div>

CSS：

.div1 {
    display: inline-block;
    line-height: 20px;
    background-color: currentcolor;
    color: #00AAFF;
    padding: 5px 10px;
    margin-left: 50px;
    position: relative;
    box-shadow:0 0 3px #666;
}
.div1:before {
    content: "";
    position: absolute;
    left: 0;top: 0;
    margin-left: -15px;
    border-style: solid;
    border-width: 15px;
    border-color: transparent;
    border-left: none;
    border-right-color: inherit;
}
.div1:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 5px;
    height: 5px;
    margin-left: -2.5px;
    margin-top: -2.5px;
    background-color: white;
    border-radius: 50%;
    box-shadow: 0 0 5px #999;    
}
.div1:first-line {
    color: white;
}

显示效果：

这时有人就会说了，你只是给父元素加的阴影，已经block化的伪元素是一个子元素，怎么可能会有阴影，况且box-shadow也没有继承性！

好，那么我们就以这个为突破口，进行修改！

给.div1:before添加一个box-shadow:0 0 3px #666;结果会如何呢？？

显示效果：

看来我们还是不能太天真啊，我们用伪元素模拟三角形，只是利用边框的特性，而不是切割，边框还是存在，只是透明了，所以给添加了阴影后，就会把完整的形状给展示出来！

突然，我灵机移动，切割~~~emmmm....或许用clip-path: polygon();也许会有用。

那就干起来！

.div1:before {
    content: "";
    position: absolute;
    left: 0;top: 0;bottom: 0;
    margin-left: -15px;
    width: 15px;
    background-color: inherit;
    box-shadow: 0 0 3px #666;
    clip-path: polygon(100% 0,100% 100%,0 50%);
}

效果图：

你会发现根本就不会有box-shadow，因为clip-path裁剪连阴影都给裁剪了。

到了这里是不是很失望，不要担心，下面才是我们的重头戏！

filter: drop-shadow(0 0 2px #999);

我们可以使用css3的滤镜给他添加阴影，而且只用给父元素添加就可以。不过这个滤镜也有坏处，就是他的定义中有一条是这样的：

任何非透明部分都会被打上阴影

简单点来说，透明的部分都会有阴影，其中也包括div里面的文字哦！

但是我们不怕，因为我们本身就已经给这个div加了背景色，所以这个定义并不会影响到我们正常使用，于是乎，只要给div加上这个就行！

.div1 {
      filter: drop-shadow(0 0 2px #999);
}

效果图：

完美达到我们的效果，而且使用的是css3效果，如果不支持，整个tag标签也不会有啥形变，只是阴影没有了，并不会影响到正常的浏览，如果你想要兼容如ie这样的浏览器，你可以试着去http://www.w3.org/TR/filter-effects/找到对应滤镜函数的svg滤镜，然后添加一条url的代码：filter:url(xxxxx.svg#drop-shadow);放在刚刚使用的代码前面！

我们再讲讲drop-shadow的属性：

 filter: drop-shadow(0 0 2px #999);

1. 第一个0指的是X轴的偏移量。
2. 第二个0指的是Y轴的偏移量。
3. 第三个2px指的是模糊程度。
4. 第四个#999就是阴影的颜色。

注意：drop-shadow不支持扩张半径和内阴影inset。