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