首页 > 建站教程 > CSS3+HTML5 >  CSS3 background-clip 详解正文

CSS3 background-clip 详解

background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框下面。

如果没有设置背景颜色或图片，那么这个属性只有在边框（border）设置为透明或半透明时才能看到视觉效果，不然的话，这个属性造成的样式变化会被边框覆盖住。

初始值 border-box
    适用元素 all elements. It also applies to ::first-letter and ::first-line.
    是否是继承属性 否
    适用媒体 visual
    计算值 as specified
    Animation type discrete
    正规顺序 the unique non-ambiguous order defined by the formal grammar

语法
    background-clip: border-box
    background-clip: padding-box
    background-clip: content-box
    background-clip: inherit
    background-clip: text  (只有chrome支持)

值
    border-box：背景延伸到边框外沿（但是在边框之下）。
    padding-box：边框下面没有背景，即背景延伸到内边距外沿。
    content-box：背景裁剪到内容区 (content-box) 外沿。
    text：背景被裁剪为文字的前景色(只有chrome支持)。

示例 
<p class="border-box">The yellow background extends behind the border.</p>
<p class="padding-box">The yellow background extends to the inside edge of the border.</p>
<p class="content-box">The yellow background extends only to the edge of the content box.</p>

p {
   border: 5px navy;
   border-style: dotted double;
   margin: 1em;
   padding: 2em;
   background: #F8D575;
}
.border-box { background-clip: border-box; }
.padding-box { background-clip: padding-box; }
.content-box { background-clip: content-box; }
运行下面代码查看效果：


提示：您可以先修改部分代码再运行


TAGS: background-clip