给伪元素也加上box-shadow

69 0

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

0

评论(0)

相关文章

微信收款码
微信收款码