background-clip属性规定背景的绘制区域。浏览器兼容IE9+。
- border-box:背景被裁剪到边框盒。(默认值)
- padding-box:背景被裁剪到内边距框。
- content-box:背景被裁剪到内容框。
您可能已经看过无数次devtools中的box模型可视化工具:
它向您展示元素的大小和位置,以及该大小是如何构成的:content size内容大小、padding填充、margin边距和border边框。实际上元素还有一个content-box内容框、padding-box填充框和border-box边框框。一般我们使用最多的是border-box。
这些值与background-clip背景裁剪所使用的值相同!也就是说您可以设置一个背景只覆盖那些特定的区域。这样我们就可以实现多个背景嵌套:
.basic {
width: 50px;
height: 50px;
padding: 25px;
border: 25px solid transparent;
background:
linear-gradient(red, red) content-box,
linear-gradient(blue, blue) padding-box,
linear-gradient(green, green) border-box;
}
其实有很多方法可以实现这种效果,比如使用border边框、outline和box-shadow或它们的任意组合实现。但嵌套的渐变背景估计很难实现,您不妨试试background-clip背景裁剪:
.advanced {
padding: 8px;
border: 4px solid transparent;
background:
linear-gradient(#B7D3F0, #6B90EE) content-box,
linear-gradient(#c769c2, #211A4D) padding-box,
linear-gradient(#F1F48C, #8BE5DC) border-box;
height: 60px;
width: 220px;
margin: 20px;
text-align: center;
display: inline-block;
font: 900 20px/60px system-ui, sans-serif;
border-radius: 10px;
}