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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。