1.background-clip
| border-box | 背景被裁剪到边框盒。
| padding-box | 背景被裁剪到内边距框。
| content-box | 背景被裁剪到内容框。
测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.test2 {
width: 100px;
height: 10px;
padding: 20px 0;
background: red;
background-clip: content-box;
}
</style>
</head>
<body>
<div class='test2'></div>
</body>
</html>
1.效果： content-box
85a40bafbccee65672d3b09da7d752a.png
2.效果：padding-box，content-box
6fe66417bb9f6fa67b1124b524f2efa.png
3.应用
写一个三个横线的三个图标效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.menu-outer {
position: relative;
display: inline-block;
margin: 30px;
width: 20px;
height: 24px;
cursor: pointer;
}
.menu {
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 2px;
padding: 8px 0;
transform: translate(-50%, -50%);
background-clip: content-box;
background-color: #585247;
}
.menu::after,
.menu::before {
position: absolute;
left: 0;
display: inline-block;
content: '';
width: 100%;
height: 2px;
background-color: #585247;
}
.menu::before {
top: 0;
}
.menu::after {
bottom: 0;
}
</style>
<body>
<div class="menu-outer">
<span class="menu"></span>
</div>
</body>
</html>
