首页 » CSS » 给伪元素也加上box-shadow

最后更新于 2018年05月06日

在设置一些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;
}

显示效果:
-50

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

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

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

显示效果:
-50

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

突然,我灵机移动,切割~~~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%);
}

效果图:
-50

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

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

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

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

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

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

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

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

效果图:
-50

完美达到我们的效果,而且使用的是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。

  • weixiao kaixin tushetou jingkong deyi fanu liezui liuhan daku ganga bishi nanguo lihai qian yiwen numu tu yi haixiu se fadai minyan hehe henkaixin huaji biyiyan kuanghan maimeng shui xiaku penqi zhangzui pen aini ye niu laji ok chigua renshi kongbu shuai xiaoxiese touxiao huaixiao jingnu chihuai kaisang xiaoku koubi zhuangbi lianhong kanbujian shafa zhijing xiangjiao dabian yaowan redjing lazhu rizhi duocang chixigua hejiu xixi xiaopen goukun xiaobuchu shenme wusuowei guancha lajing chouyan xiaochi bie zhadanzui zhadanxiao