背景与边框之“半透明边框”
2016-06-13 本文已影响84人
adiu
背景与边框的工作原理
- 默认情况下，背景会延伸到边框所在区域的下层
半透明边框
.box {
padding: 2em;
border: 10px solid hsla(0,0%,100%,.5);
background-color: #fff;
}
说明：所得到的结果是边框颜色和背景颜色是一样的，根本体现不出半透明边框
解决方案
- 添加 **background-clip: padding-box ** 属性，该属性默认的初始值为 border-box，意思是背景会被元素的border box（边框的外沿框）裁切掉
《CSS SECRETS》
