CSS background-clip用法及代码示例

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>

输出：

支持的浏览器：下面列出了background-clip属性支持的浏览器：

谷歌浏览器4.0
Internet Explorer 9.0
Firefox 4.0
Opera 10.5
Safari 3.0

相关用法

注：本文由纯净天空筛选整理自Jitender_1998大神的英文原创作品 CSS | background-clip Property。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。