css透明边框的弹窗制作

2019-03-232624次阅读css

制作像下面这样一个带有透明边框的弹窗你会选择怎么做?


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;//裁剪背景到内边距框
}

上一篇: firefox火狐浏览器源代码自动换行的方法  下一篇: Vue2 的日期选择组件 vue-datepicker-local  

css透明边框的弹窗制作相关文章