Css3学习笔记（五）：背景与边框

1. 背景

1.1 背景的显示范围:background-clip（不起作用）

border背景范围包括边框区域（默认），padding背景范围不包括边框区域。

div[id='test1']{
	background-clip:border;
}
div[id='test2']{
	background-clip:padding;
}

1.2 背景图像的绘制起点:background-origin（不起作用）

div[id='test4']{
	background-origin:border;
}
div[id='test5']{
	background-origin:padding;
}

1.3 背景图像尺寸:background-size

div{
	border:dashed 15px #eea0cc;
	padding:30px;
	margin:20px;
	background-color:#CC095A;
	background-image:url(anwy.jpg);
	background-size:40px 40px;
	box-shadow:5px 5px 5px gray;
}

如果将两个参数中的其中一个改写为auto，可以让其维持固定比例。

1.4 平铺内敛元素时背景图像的循环方式:background-break（不起作用）

可用参数：bounding-box、each-box、continuous

div[id="test4"]{
	background-break:bounding-box;
}
div[id="test5"]{
	background-break:each-box;
}
div[id="test6"]{
	background-break:continuous;
}

2. 多背景

在使用background-image属性来指定图像文件的时候，是按在浏览器中现实时图像叠放的顺序从上往下指定的。第一个图像放在最上面，最后指定的放在最下面。

div{
	background-color:#888888;
	background-image:url(anwy.jpg), url(annie.jpg);
	background-repeat:repeat-x,no-repeat;
	width:500px;
	padding:0.2em;
	color:gray;
	line-height:1.5;
	font-size:1em;
	font-weight:bold;
}

3. 圆角边框

3.1 border-radius

div{
	border: solid 5px blue;
	border-radius:20px;
	background-color: skyblue;
	padding:20px;
	width:180px;
}

指定2个参数如：border-radius:40px 20px; 实现左上与右下40px半径、右上和左下20px半径。如果不指定边框样式，那么可以绘出无边框的圆角。也可以修改边框的样式为dashed虚线、dotted点线等。

3.2 四个角不同半径

border-radius-topleft、border-radius-topright、border-radius-bottomright、border-radius-bottomleft

4. 图像边框

4.1 border-image(仅支持Firefox、chrome)

div{
	border-image:url(borderpng.jpg) 20 20 20 20 / 20px;
	-webkit-border-image:url(borderpng.jpg) 20 20 20 20 / 20px;
	-moz-border-image:url(borderpng.jpg) 20 20 20 20 / 20px;
}

其格式为border-image:url(图片路径) 上边距 右边距 下边距 左边距 [/边框宽度] 显示方法(上下) 显示方法(左右)
显示方法可选值为：repeat、stretch、round
结合背景图像使用注意：需要使用边框图像中间为透明的，否则会遮挡住背景图像。