css: 绘制半透明边框(修改background-clip属性)

需求描述

如图所示,欲给内层容器设置白色的背景和白色的半透明边框,使外层容器的背景色可以透过来。


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;
}

关于backgrpund-clip

设置元素的背景(背景图片或颜色)是否延伸到边框下面。
详见MDN:background-clkip

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.半透明边框 问题: 如果我们要为一个容器设置红色背景和一道黑色半透明边框,我们可能会这样写: 但是效果却是这样...
    FlyingWWS阅读 9,573评论 4 21
  • 1. 定义和用法 background是一个简写属性,可以在一个声明中设置所有的背景属性,可设置的属性如下: 这些...
    lightNate阅读 9,868评论 2 9
  • background应该是CSS里使用频率颇高的属性,简单实用。但参数偏多,本篇就介绍一下background的各...
    张歆琳阅读 9,769评论 4 26
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 6,842评论 0 11
  • CSS3对background新加了3个属性,background-origin、background-clip、...
    彬_仔阅读 5,397评论 0 9