1、background-clip
定义： background-clip 属性规定背景的绘制区域。
语法：background-clip: border-box|padding-box|content-box;
参数：border-box 背景被裁剪到边框盒。
padding-box 背景被裁剪到内边距框
content-box 背景被裁剪到内容框
2、background-origin
定义： background-origin 属性规定 background-position 属性相对于什么位置来定位。
语法： background-origin: padding-box|border-box|content-box;
参数： border-box 背景图像相对于边框盒来定位
padding-box 背景图像相对于内边距框来定位。
content-box 背景图像相对于内容框来定位
3、 background-size
定义：规定背景图像的尺寸
语法：background-size: length|percentage|cover|contain;
参数： length 设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值 ，则第二个值会被设置为 "auto"。
percentage 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域
4、background-break
定义： 指定内联元素的背景图像进行平铺时的循环方式
语法：background-break: continuous |bounding-box|each-box;
参数： continuous 背景图像相对于内边距框来定位。
bounding-box 背景图像相对于边框盒来定位
each-box 背景图像相对于内容框来定位
5、在一个元素中显示多个背景图像
概述：css3中规定了一个元素可以显示多个背景图像，这就是一个新的规定。
div{
background:url("flower-red.png"),
url("flower-green.png"),
url("sky.png");
background-repeat:no-repeat, repeat-x, no-repeat;
background-position:3% 98%,85%,center,center,top;
width:300px;
padding:90px 0px;
}
6、圆角和边框border-radius
定义：属性是一个简写属性，用于设置四个 border-*-radius属性
语法： border-radius: px|% px|%;
7、使用图像边框border-image
定义：border-image 属性是一个简写属性，用于设置以下属性
border-image-source 用在边框的图片的路径。
border-image-slice 图片边框向内偏移
border-image-width 图片边框的宽度。
border-image-outset 边框图像区域超出边框的量。
border-image-repeat 图像边框是否应平铺(repeated)、铺满
(rounded)或拉伸(stretched)。
网友评论