css3背景和边框

1、新增属性

background-clip

定义：background-clip     属性规定背景的绘制区域。

语法：background-clip      border-box   背景被裁剪到边框盒。

padding-box  背景被裁剪到内边距框

content-box  背景被裁剪到内容框

background-origin

定义：background-origin    属性规定 background-position 属性相对于什么位置来定位。

语法: background-origin:   border-box      背景图像相对于边框盒来定位

padding-box     背景图像相对于内边距框来定位。

content-box    背景图像相对于内容框来定位

background-size

定义：规定背景图像的尺寸

语法:background-size:    length  设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值 ，则第二个值会被设置为 "auto"。

percentage  以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

cover  把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。

contain  把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

2、概述：css3中规定了一个元素可以显示多个背景图像，这就是一个新的规定。

3、圆角和边框border-radius

border-radius

定义：属性是一个简写属性，用于设置四个border-*-radius 属性该属性允许您为元素添加圆角边框！

语法：border-radius: px|% px|%;

4、使用图像边框border-image

border-image

定义：border-image 属性是一个简写属性，用于设置以下属性

border-image-source       用在边框的图片的路径。

border-image-slice        图片边框向内偏移

border-image-width        图片边框的宽度。

border-image-outset       边框图像区域超出边框的量。

border-image-repeat       图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。

{���{���