这是我参与更文挑战的第13天，活动详情查看： 更文挑战 !
👽 概论
先考大家一个问题：当我给一个背景色为蓝色的盒子，设置一条透明度为0.5的红色边框时，这个盒子的样式是怎样的呢？你或许会说，答案不都已经在题目中了吗？还能是怎样？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
.box {
margin: 50px auto;
width: 200px;
height: 100px;
border: 10px solid rgba(255, 0, 0, 0.5);
background-color: rgba(0, 0, 255, 1);
}
.compareBox {
margin: 50px auto;
width: 210px;
height: 110px;
background-color: rgba(255, 0, 0, 0.5);
}
</style>
</head>
<body>
<div class="box"></div>
<div class="compareBox"></div>
</body>
</html>
当然没那么简单，那么我们就来直接看看效果吧（第二个盒子为边框真正该有的颜色）！
诶，为什么会有这种问题出现呢？其实是因为在css中，当你同时设置了background和border时，background是会延伸到border下的，只是平时大多使用的是不透明border，这个问题才不易察觉。
那么有没有实现border不与background重叠的方法呢？有的，而且还有两种。第一种是另辟蹊径的方法，通过box-shadow去模拟border，这个方法大家可以自行尝试。今天我们着重介绍第二种：利用background-clip属性。
👽 background-clip
background-clip直译过来就是背景裁剪属性，一听名字就绝对符合我们的需求。它有四个属性，下面来一一介绍：
👻background-clip: border-box
这个属性其实就是默认属性，代表的是背景会绘制到边框下方。其表现与上方一致，不多做介绍。
👻background-clip: padding-box
这个属性代表的是边框顶多只会延伸到内padding下方，而不会覆盖的borde上。来看效果(为直观起见，我们将边框线换为虚线，并给盒子添加10opx padding)。
.box {
···
padding:10px;
border: 10px solid rgba(255, 0, 0, 0.5);
background-color: rgba(0, 0, 255, 1);
background-clip: border-box;
}
👻background-clip: content-box
这个属性代表的是边框顶多只会延伸到内content区下方，也就是padding和border都不会涉及。来看效果(为直观起见，我们将边框线换为虚线，并给盒子添加10opx padding)。
.box {
···
background-clip: content-box;
}
👻background-clip: text
最后这个属性代表的是，背景会被裁剪成文字的颜色及形状，一图即明(我们此时在box内部加上白色的文字)。 这个属性运用得当可以实现很多文字裁剪效果，值得注意的是它也存在极大的兼容性问题。
···
<style>
···
.box {
···
background-clip: text;
text-align: center;
}
.text {
font-size: 50px;
font-weight: bold;
color: transparent;
}
···
</style>
···
<div class="box">
<span class="text">掘金</span>
</div>
···
···
👽结语
大家学费了吗！
