• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • background-clip

    版本:CSS3

    background-clip 设置元素的背景(背景图片或颜色)是否延伸到边框、内边距盒子、内容盒子下面。

    示例

    /* keyword values */
    background-clip: border-box;
    background-clip: padding-box;
    background-clip: content-box;
    background-clip: text;
    
    /* global values */
    background-clip: inherit;
    background-clip: initial;
    background-clip: unset;
    

    如果没有设置背景图片(background-image)或背景颜色(background-color),那么这个属性只有在边框(border)被设置为非固实(soild)、透明或半透明时才能看到视觉效果(与border-styleborder-image有关),否则,本属性产生的样式变化会被边框覆盖。

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    IE9以上版本的浏览器都支持background-clip

    语法:

    background-clip:border-box | padding-box | content-box | text

    取值:

    • border-box:背景延伸至边框外沿(但是在边框下层)。
    • padding-box:背景延伸至内边距(padding)外沿。不会绘制到边框处。
    • content-box:背景被裁剪至内容区(content box)外沿。
    • text:从前景内容的形状(比如文字)作为裁剪区域向外裁剪。
    默认值border-box
    适用于所有元素
    继承性
    动画性
    计算值指定值

    例子

    //html
    <p class="border-box">the background extends behind the border.</p>
    <p class="padding-box">the background extends to the inside edge of the border.</p>
    <p class="content-box">the background extends only to the edge of the content box.</p>
    <p class="text">the background is clipped to the foreground text.</p>
    
    //CSS
    p {
      border: .8em darkviolet;
      border-style: dotted double;
      margin: 1em 0;
      padding: 1.4em;
      background: linear-gradient(60deg, red, yellow, red, yellow, red);
      font: 900 1.2em sans-serif;
      text-decoration: underline;
    }
    
    .border-box { background-clip: border-box; }
    .padding-box { background-clip: padding-box; }
    .content-box { background-clip: content-box; }
    
    .text {
      background-clip: text;
      -webkit-background-clip: text;
      color: rgba(0,0,0,.2);
    }