css揭秘 - 实现半透明边框

实现半透明边框

设置背景和边框的时候，背景色默认会延伸到边框所在的区域下层

通过background-clip属性来调整，这个属性默认值是border-box
意味着，背景延伸到边框外沿框之外的都会被裁剪掉

只要调成padding-box, 背景色就不会影响边框了

例子：

<div class="box">
    测试半透明边框的问题
</div>

.box {
    background: white;
    border: 10px solid hsla(0, 0%, 100%, .5);
    background-clip: padding-box;
    max-width: 20em;
}

效果图：

可以看到，背景白色没有延伸到边框的下面