css除去padding部分的背景颜色
在网页中,如果给一个元素设置一个背景颜色,其背景会默认铺满整个元素(包括border和padding),这时我们可以使用background-clip来控制背景的蔓延。
1.background-clip:border-box
border-box是默认的显示状态,如图所示,border和padding下都被背景颜色所填充
2.background-clip:padding-box
padding-box控制背景延伸至padding外沿。如图,border下没有背景颜色
3.background-clip:content-box
content-box控制背景被裁剪至内容区外沿。如图,padding和border下都没有背景颜色。
4.background-clip:text
content-box还有一个text属性控制背景被裁剪成文字的前景色。但兼容性并不好,很多浏览器不支持。
MDN链接:https://developer.mozilla.org/zhCN/docs/Web/CSS/background-clip