如图所示，欲给内层容器设置白色的背景和白色的半透明边框，使外层容器的背景色可以透过来。
image.png
关于上述需求，最开始的尝试可能是这样的：
box {
border: 10px solid rgba(255, 255, 255, .5);
backrgound: #fff;
}
然而得到的结果是这样的：
image.png
将background-clip设置为padding-box：
box {
border: 10px solid rgba(255, 255, 255, .5);
backrgound: #fff;
background-clip: padding-box;
}
设置元素的背景（背景图片或颜色）是否延伸到边框下面。
详见MDN：background-clkip
需求描述 如图所示，欲给内层容器设置白色的背景和白色的半透明边框，使外层容器的背景色可以透过来。 无效的尝试 关于...
《css-secrets》 半透明边框 关键字：半透明;边框;background-clip 需求描述 给一个容器...
第二章 背景与边框 半透明边框background-clip属性设置为padding-box可以使背景不侵入边框，...
一.css3背景与边框### 1、background-clip定义：background-clip属性规定背景的...
1.半透明边框 易遗漏点：默认情况下，背景会延伸到边框所在的区域下层。关键属性：background-clip——...
CSS3背景图像区域 background-clip属性 指定背景绘制区域 background-clip:bor...
background-clip属性值： 值说明border-box默认值。背景绘制在边框方框内（剪切成边框方框）p...
css边框属性 通过css3，能够创建圆角边框，向矩形添加阴影，使用图片来绘制边框 border-radius b...
1、新增属性 background-clip 定义：background-clip 属性规定背景的绘制区域。 语法...
CSS3背景 1.background-clip该属性指定背景图像的绘制区域语法：background-clip:...
本文标题：css: 绘制半透明边框(修改background-clip属性
本文链接：https://www.haomeiwen.com/subject/avwgcctx.html
网友评论