CSS3 background-clip 属性

目录
文章目录隐藏
  1. 标签定义及使用说明
  2. 语法
  3. 浏览器支持
  4. 实例
  5. 相关文章

标签定义及使用说明

background-clip属性指定背景绘制区域。

默认值: border-box
继承: no
版本: CSS3
JavaScript 语法: object object.style.backgroundClip=”content-box”

语法

background-clip: border-box|padding-box|content-box;
说明
border-box 默认值。背景绘制在边框方框内(剪切成边框方框)。
padding-box 背景绘制在衬距方框内(剪切成衬距方框)。
content-box 背景绘制在内容方框内(剪切成内容方框)。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性 谷歌浏览器 IE 浏览器 火狐浏览器 Safari 浏览器 Opera 浏览器
background-clip 4.0 9.0 4.0 3.0 10.5

实例

指定绘图区的背景:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>码云笔记(mybj123.com)</title> 
<style>
#example1 {
    border: 10px dotted black;
    padding:35px;
    background: yellow;
}

#example2 {
    border: 10px dotted black;
    padding:35px;
    background: yellow;
    background-clip: padding-box;
}

#example3 {
    border: 10px dotted black;
    padding:35px;
    background: yellow;
    background-clip: content-box;
}
</style>
</head>
<body>

<p>没有背景剪裁 (border-box 没有定义):</p>
<div id="example1">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

<p>background-clip: padding-box:</p>
<div id="example2">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

<p>background-clip: content-box:</p>
<div id="example3">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

</body>
</html>

效果如下:

CSS3 background-clip 属性 CSS3 background-clip 属性 CSS3 background-clip 属性

相关文章

CSS3 教程: CSS3 背景

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » CSS3 background-clip 属性

发表回复