半透明边框
背景知识:
RGBA/HSLA
半透明颜色, 它们同样是一种颜色,并非只适用于背景。
background-clip 背景裁切属性,定义了背景的延伸范围,是否延伸到边框、内边距盒子、内容盒子,内容文字
下面。分别对应border-box、padding-box、content-box、text
四个属性值
First Try
首先我们来尝试一下,假如我们想要实现一个半透明的边框,该如何写样式
border: 10px solid hsla(0, 0%, 0%, 0.5);
background-color: white
这段css样式,我们期待的效果是有一个半透明的边框。而实际效果是怎么样的呢?
!!!?border 不见了
Second Try
没错,边框不见了。这跟我们所期待的效果并不符合。原因在于,默认情况下,背景颜色会延伸到边框上,这点我们可以通过虚线边框来发现实际发生了什么。
border: 30px dashed orange;
background-color: skyblue;
所以,实际上我们的透明边框其实是存在的,只不过由于背景颜色透过边框,导致最终呈现出如同一个跟背景颜色一致的边框的效果。
Third Try
好在目前我们可以通过background-clip
来处理背景色的延伸范围。
border: 30px dashed orange;
background-color: skyblue;
background-clip: padding-box;
Finally Finashed
border: 30px solid hsla(0, 0%, 100%, 0.3);
background-color: white;
background-clip: padding-box;
总结
- 我们为了实现最终的效果,使用到了
background-color
,border
,background-clip
和hsla/rgba
半透明颜色。 background-clip
定义了背景的延伸范围,默认border-box(从border的外边沿裁切背景)
,通过将其值设置为padding-box(从padding外边沿开始裁切背景)
避免背景色延伸到边框下。hsla/rgba
实现了边框的半透明颜色
最终案例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
display: flex;
align-items: center;
justify-content: center;
width: 400px;
height: 300px;
background: #ccc url("http://img.mp.itc.cn/upload/20170621/79ecb57d6e234e7891b6c9da3dfc12f9_th.jpg") no-repeat center;
}
.content {
width: 200px;
height: 150px;
padding: 20px;
border: 30px solid hsla(0, 0%, 100%, 0.3);
/* border: 30px solid rgba(120, 120, 120, 0.5); */
background-color: white;
background-clip: padding-box;
}
p{
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<div class="content">
<p>半透明边框效果展示</p>
</div>
</div>
</body>
</html>
下一篇:CSS揭秘:2.多重边框