background-clip的使用
语法
div {
background-clip: border-box | padding-box | content-box;
}
background-clip表示元素的裁剪后的区域，分别对应border-box, padding-box, content-box
使用
<html>
<head>
<style>
.document {
width: 80px;
height: 100px;
background-color: #c6d6d8;
}
.document:before {
display: inline-block;
content: '';
width: 60px;
height: 80px;
box-sizing: border-box;
padding: 25px 0px;
margin: 10px;
border-top: 10px solid;
border-bottom: 10px solid;
background-color: currentColor;
background-clip: content-box;
}
</style>
</head>
<body>
<div class="document"></div>
</body>
</html>
