CSS边框应用 - 半透明边框

相信你以前肯定尝试过 CSS 中的半透明颜色比如 rgba() hsla()半透明颜色是 2009 年发生的一场重大变革从那以后我们终于可以在网页设计中使用它们了但是为了尝鲜还需要付出额外的代价 

.parent {
    padding: 50px;
    height: 500px;
    width: 800px;
    background-repeat: no-repeat;
    background-image: url('./img/bg.jpg');
}

.child {
    height: 200px;
    width: 200px;
    margin: 0px auto;
    background-color: white;
}
<h3>测试半透明边框</h3>
<hr/>
<div class="parent">
    <div class="child">
        
    </div>
</div>

假设我们想给一个容器设置一层白色背景和一道半透明白色边框,body的背景会从它的半透明边框透上来。我们最开始的尝试可能是这样的:


上面例子中的俩个div,我需要它们可以存在一个半透明框。但是二者不同,父元素div半透明边框,但是背景依然存在,子元素的半透明边框需要半透明父元素的背景。

盒子的3D模型

  1. 第一层:border
  2. 第二层:padding + content
  3. 第三层:background-image
  4. 第四层:background-color
  5. 第五层:margin

这个3D模型是以面向页面的方向,也就是z轴的方向。这个关系其实不太好证明,因为border,padding,margin不太好证明,但是其他的三个好证明一些。首先修改上面的parent class如下(在最后加上background-color属性),页面展示还是一样的。证明background-color在background-image的下层,然后我们的子元素会覆盖父元素的背景颜色。证明content在background-image的上面。

.parent {
    padding: 50px;
    height: 500px;
    width: 800px;
    background-repeat: no-repeat;
    background-image: url('./img/bg.jpg');
    background-color: white;
}


HSLA(H,S,L,A)

  • H:Hue(色调)。0(或360)表示红色,120表示绿色,240表示蓝色,也可取其他数值来指定颜色。取值为:0 - 360
  • S:Saturation(饱和度)。取值为:0.0% - 100.0%
  • L:Lightness(亮度)。取值为:0.0% - 100.0%
  • A:Alpha透明度。取值0~1之间。
  • 兼容性:不支持IE8及以下版本


修改父元素边框半透明

加上hsla()

.parent {
    padding: 50px;
    height: 500px;
    width: 800px;
    background-repeat: no-repeat;
    background-image: url('./img/bg.jpg');
    border: 10px solid hsla(0,0%,100%,.5);
}

可以看到当前背景的下边和右边已经有了半透明边框,但是左边和上边还是没有。


图中可以看到当前的上边框和左边框都是存在的,只是当前的背景是白色的,所以没有效果。因为当前背景图片在默认的情况下是从左上方padding的地方开始,不是从border的地方开始的。但是右边和下边框都是存在背景色的,这是因为背景会延伸到border下方。既然知道了左边和上边框的问题所在,所以我们只需要将图片的中心设置为重点就可以了。

.parent {
    padding: 50px;
    height: 500px;
    width: 800px;
    background-repeat: no-repeat;
    background-image: url('./img/bg.jpg');
    border: 10px solid hsla(0,0%,100%,.5);
    background-position: center;
}

* 最重要的一点:背景图片足够大,想要图片延伸到border,那么背景图片就需要大到可以延伸到border的位置。


修改子元素半透明

父元素半透明修改完之后,接下来我们来操作子元素的背景。先将border半透明加上。

.child {
    height: 200px;
    width: 200px;
    margin: 0px auto;
    background-color: white;
    border: 10px solid hsla(0,0%,100%,.5);
}

我们可以看到当前border已经应用上了,但是border没有透明啊,这里相信大家已经知道原因了,是的,因为背景颜色是可以扩展到border下面的,所以现在这里border的下面还有自身的white背景颜色。所以我们需要将border的地方放置处来。我们需要采用background-clip: padding-box;

这个属性的初始值是 border-box, 意味着背景会被元素的 border box(边框的外沿框) 裁切掉。 如果不希望背景侵入边框所在的范围, 我们要做的就是把它的值设为 padding-box, 这样浏览器就会用内边距的外沿来把背景裁切掉。



延伸:父元素的第二种处理方式

我们之前说过背景图片是从padding开始的,有什么原因呢,需要了解background-origin

<box> = border-box | padding-box | content-box

  • 默认值:padding-box
  • padding-box:从padding区域(含padding)开始显示背景图像。
  • border-box:从border区域(含border)开始显示背景图像。
  • content-box:从content区域开始显示背景图像。

所以父元素的处理方式我们可以使用background-origin来修改,不适用background-positoin了,如下:

.parent {
    padding: 50px;
    height: 500px;
    width: 800px;
    background-repeat: no-repeat;
    background-image: url('./img/bg.jpg');
    border: 10px solid hsla(0,0%,100%,.5);
    background-origin: border-box;
}

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页