在设置一些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);
- 第一个0指的是X轴的偏移量。
- 第二个0指的是Y轴的偏移量。
- 第三个2px指的是模糊程度。
- 第四个#999就是阴影的颜色。
