background-clip背景裁剪实现嵌套渐变背景

2019-09-06139次阅读css3

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;
}

上一篇: Element​.class​List还可以这样操作?  下一篇: Array.from()浅拷贝的数组实例  

background-clip背景裁剪实现嵌套渐变背景相关文章