半透明边框

最新推荐文章于 2023-06-12 14:58:04 发布

远山眉

最新推荐文章于 2023-06-12 14:58:04 发布

阅读量143

点赞数

本文链接：https://blog.csdn.net/qq_43553067/article/details/94407862

版权

            body {
                background: pink;
            }
            .box {
                border: 10px solid hsla(0,0%,100%,.5);
                background:blue;
                width: 10em;
                height: 10em;
            }

在这里插入图片描述

普通设置情况下，半透明颜色并不能实现半透明边框。粉红色背景并不能透上来
可以通过background-clip属性来调整上述行为所带来的不便

background-clip
默认为border-box，意味着背景会被元素的border box（边框的外沿框）裁切掉。
padding-box 浏览器会用内边距的外沿来把背景裁切掉

            body {
                background: pink;
            }
            .box {
                border: 10px solid hsla(0,0%,100%,.5);
                background:blue;
                width: 200px;
                height: 200px;
                background-clip: padding-box;
            }