CSS中的background-clip属性用于定义如何扩展元素内的背景(颜色或图像)。
用法:
background-clip:border-box|padding-box|content-box|initial|inherit;
适当的价值:
border-box:border-box属性用于设置背景色在整个分区上的分布。
- 用法:
background-clip:border-box;
- 例:
<!DOCTYPE html> <html> <head> <title>Border Box</title> <style> .gfg { background-color:green; background-clip:border-box; text-align:center; border:10px dashed black; } </style> </head> <body> <div class = "gfg"> <h2> GeeksforGeeks </h2> <p> background-clip:border-box; </p> </div> </body> </html>
- 输出:
padding-box:padding-box属性用于设置边框内的背景。
- 用法:
background-clip:padding-box;
- 例:
<!DOCTYPE html> <html> <head> <title>padding-box property</title> <style> .gfg { background-color:green; background-clip:padding-box; padding:25px; border:10px dashed black; } </style> </head> <body style = "text-align:center"> <div class = "gfg"> <h2> GeeksforGeeks </h2> <p> background-clip:padding-box; </p> </div> </body> </html>
- 输出:
content-box:content-box属性用于仅将背景颜色设置为内容。
- 用法:
background-clip:content-box;
- 例:
<!DOCTYPE html> <html> <head> <title>content-box property</title> <style> .gfg { background-color:green; background-clip:content-box; padding:15px; border:10px dashed black; } </style> </head> <body style = "text-align:center"> <div class = "gfg"> <h2> GeeksforGeeks </h2> <p> background-clip:content-box; </p> </div> </body> </html>
- 输出:
initial:这是默认值。它用于设置在整个分区上散布的背景颜色。
- 用法:
background-clip:initial-box;
例:
-
<!DOCTYPE html> <html> <head> <title>Initial</title> <style> .gfg { background-color:green; background-clip:initial; padding:15px; border:10px dashed black; } </style> </head> <body style = "text-align:center"> <div class = "gfg"> <h2> GeeksforGeeks </h2> <p> background-clip:initial; </p> </div> </body> </html>
- 输出:
- 谷歌浏览器4.0
- Internet Explorer 9.0
- Firefox 4.0
- Opera 10.5
- Safari 3.0
支持的浏览器:下面列出了background-clip属性支持的浏览器:
相关用法
- HTML Style backgroundClip用法及代码示例
- CSS transition-property用法及代码示例
- CSS right属性用法及代码示例
- CSS nav-up用法及代码示例
- CSS nav-down用法及代码示例
- CSS nav-right用法及代码示例
- CSS top属性用法及代码示例
- CSS all属性用法及代码示例
- CSS filter属性用法及代码示例
- HTML DOM id用法及代码示例
- CSS column-gap用法及代码示例
- CSS z-index用法及代码示例
- CSS direction属性用法及代码示例
- CSS tab-size用法及代码示例
- CSS content属性用法及代码示例
注:本文由纯净天空筛选整理自Jitender_1998大神的英文原创作品 CSS | background-clip Property。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。