背景与边框之“半透明边框”

背景与边框的工作原理


  • 默认情况下,背景会延伸到边框所在区域的下层

半透明边框


.box {
    padding: 2em;
    border: 10px solid hsla(0,0%,100%,.5);
    background-color: #fff;
}

说明:所得到的结果是边框颜色和背景颜色是一样的,根本体现不出半透明边框

解决方案


  • 添加 **background-clip: padding-box ** 属性,该属性默认的初始值为 border-box,意思是背景会被元素的border box(边框的外沿框)裁切掉

更多精彩文章请关注以下公众号


背景与边框之“半透明边框”_第1张图片
重修前端.jpg

《CSS SECRETS》

你可能感兴趣的:(背景与边框之“半透明边框”)