当前位置: 首页>>代码示例 >>用法及示例精选 >>正文


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。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。