Question

CSS：

.double-border {
    border-bottom: 1px solid #cd888a;
    padding:3px 0;
    height:1.5em;
    position: relative;
}
.double-border:before {
    background: none;
    border-bottom: 1px solid #2e0000;
    content: "";
    display: block;
    position: absolute;
    bottom: 0px;
    top:0px;
    left:1px;
    right:1px;
    pointer-events: none;
}

演示：https://surgemovement.org/（参见某些文字的边框底部）

Firefox显示完美
IE显示它很完美
Chrome有一个问题：伪：在边框位于顶部之前，它看起来像废话
（Windows Safari显示与Chrome相同，但我真的不关心该浏览器）

有关如何使用Chrome解决此问题的任何想法？

注意：因为其他＆＃34;插入＆＃34;做双边框的方法不能仅限于边框，解决方案已被淘汰。

Answer 1

.double-border {
    border-bottom: 1px solid #000;
    -webkit-box-shadow: 0 1px 0 #fff;
    box-shadow: 0 1px 0 #fff;
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#FFFFFF,direction=180,strength=1);
}

可能需要稍微使用滤镜（或放弃IE8-支持:)。

小提琴 - http://jsfiddle.net/mpjura/tk3x2ad3/

制作“双边框”（仅限边框底部）跨浏览器兼容

1 个答案: