css3背景(五)—background-origin
时间：2013-08-01来源：杨青青博客作者：杨青青
background-origin
说明：background-origin 属性规定背景图片的定位区域。
背景图片可以放置于 content-box、padding-box 或 border-box 区域。
1）padding-box：从padding区域（含padding）开始显示背景图像。
2）border-box：从border区域（含border）开始显示背景图像。
3）content-box：从content区域开始显示背景图像。
用法：
在 content-box 中定位背景图片：
div
{
background:url(bg.gif);
background-repeat:no-repeat;
-webkit-background-origin:border-box; /* Safari and Chrome 其他浏览器前缀请自己加上 */
background-origin:border-box;
}
兼容性：IE9以下的版本不支持该属性
示例：
background-origin:border-box
background-origin:padding-box
background-origin:content-box
代码片段：
<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>CSS3—background-origin</title>
<style type="text/css">
.list{ width:400px;height:80px;border:10px dashed #999 ;
background:url(/d/file/p/2020/07-24/56514e9bd89568db3dceae9020d7badd.jpg);
background-repeat:no-repeat;
background-origin:content-box;
-webkit-background-origin:border-box; /* Safari and Chrome 其他浏览器前缀请自己加上 */
}
</style>
</head>
<body>
<p class="list">background-origin:content-box</p>
</body>
</html> 
你觉得文章内容怎么样
网页前端设计快速入门技巧
鼠标悬停图片、文字css3效果
从摄影作品中获取网页颜色搭配技巧
给个人博客增加色彩元素提升网站用户体验