如何为CSS伪元素:after添加Box-shadow（盒阴影）效果？

这个问题我之前也碰到过！核心原因是：用border绘制的三角形，它的透明border区域也会被box-shadow识别为元素的一部分，所以你看到的不是三角形的阴影，而是整个伪元素（包括透明border）的阴影，自然就呈现出盒子的样子了。

下面给你两种可行的解决方法：

方法一：用filter: drop-shadow()替代box-shadow #

drop-shadow是针对元素的可见像素添加阴影，不会把透明区域算进去，完美适配border绘制的三角形。修改后的代码如下：

body { padding: 50px; background: #eee; }
.hero { position: relative; background-color: #fff; height: 320px !important; width: 100% !important; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2); box-shadow: 0 5px 10px rgba(0, 0, 0, .2); }
.hero:after { 
    content: ''; 
    position: absolute; 
    top: 100%; 
    left: 0; 
    right: 0; 
    margin: 0 auto; 
    width: 0; 
    height: 0; 
    border-top: solid 40px #fff; 
    border-left: solid 40px transparent; 
    border-right: solid 40px transparent; 
    /* 替换成drop-shadow，兼容webkit内核浏览器 */
    -webkit-filter: drop-shadow(0 5px 10px rgba(0, 0, 0, .2));
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, .2));
}

这种方法代码改动最小，效果最精准，也是目前最推荐的方案。

方法二：用额外伪元素模拟阴影 #

如果需要兼容不支持filter属性的旧浏览器，可以用另一个伪元素（比如:before）来单独模拟阴影：

body { padding: 50px; background: #eee; }
.hero { position: relative; background-color: #fff; height: 320px !important; width: 100% !important; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2); box-shadow: 0 5px 10px rgba(0, 0, 0, .2); }
/* 先创建阴影伪元素，放在下方 */
.hero:before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-top: solid 40px rgba(0, 0, 0, .2);
    border-left: solid 40px transparent;
    border-right: solid 40px transparent;
    transform: translateY(5px); /* 向下偏移模拟阴影位置 */
    z-index: -1; /* 把阴影放在白色三角形下方 */
}
.hero:after { 
    content: ''; 
    position: absolute; 
    top: 100%; 
    left: 0; 
    right: 0; 
    margin: 0 auto; 
    width: 0; 
    height: 0; 
    border-top: solid 40px #fff; 
    border-left: solid 40px transparent; 
    border-right: solid 40px transparent; 
}

原理是用一个深色的三角形伪元素，偏移位置后放在白色三角形的下层，模拟出阴影的视觉效果。

内容的提问来源于stack exchange，提问作者JJ BOBO