css3 background

1 background-origin 

backgound-origin : padding-box || border-box || content-box

background-origin : padding-box;  border内边缘显示背景

css3 background

background-origin : border-box; 从border外边缘

css3 background

background-origin : content-box; 从内容区内边缘

css3 background

浏览器兼容:ie9+ 标准浏览器

/*old webkit and gecko*/
-moz-backgournd-origin : padding || content || border;
-webkit-backgound-origin : padding || content || border;
/*new webkit and gecko*/
-moz-backgound-origin : padding-box || content-box || border-box;
-webkit-backgound-origin : padding-box || content-box || border-box;
/*presto*/
-o-backgound-orgiin : padding-box || content-box || border-box;
/*w3c*/
backgound-origin : padding-box || content-box || border-box;

2 background-clip: border-box || content-box || padding-box;

background-clip: border-box; 从左上角边框内到右下角边框边缘

css3 background

background-clip: content-box; 只显示内容区背景

css3 background

background-clip: padding-box; 左上角边框内到右下角边框内

你可能感兴趣的:(css3 background)