css3背景与边框

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)。

你可能感兴趣的:(css3背景与边框)