制作像下面这样一个带有透明边框的弹窗你会选择怎么做?
so easy,上代码:
.pop{
position:absolute;
left:50%;
top:50%;
transform: translate3d(-50%,-50%,0);
width:300px;
height:300px;
background:#fff;
border: 20px solid rgba(0, 0, 0, 0.3);
border-radius:10px;
}
结果设置的透明边框会显示在元素背景的上方。
在上面的屏幕截图中,边框使用RGBa是透明的,但它们看起来是纯灰色的,因为它们只露出下面的纯白色背景。导致元素透明边框下方的文字都看不见。
机智如你,这时候就会想到可以使用上一篇介绍的background-clip属性来裁剪背景到内边距框。
.pop{
position:absolute;
left:50%;
top:50%;
transform: translate3d(-50%,-50%,0);
width:300px;
height:300px;
background:#fff;
border: 20px solid rgba(0, 0, 0, 0.3);
border-radius:10px;
background-clip:padding-box;//裁剪背景到内边距框
}