CSS自学笔记（11）:CSS3背景和边框

CSS3 背景

在CSS3中新增了多个关于背景的属性，可让咱们对背景有了更多更好的操做，减小用第三方工具对背景图片进行修改美化。

CSS3中主要是经过定义backgrounp中的各个属性来控制背景(高宽，位置，透明度…………)。

关于背景的部分经常使用属性有(*为CSS3中新增属性)：

值	描述
background-color	规定要使用的背景颜色。
background-position	规定背景图像的位置。
background-size*	规定背景图片的尺寸。
background-repeat	规定如何重复背景图像。
background-origin*	规定背景图片的定位区域。
background-clip*	规定背景的绘制区域。
background-attachment	规定背景图像是否固定或者随着页面的其他部分滚动。
background-image	规定要使用的背景图像。
inherit	规定应该从父元素继承 background 属性的设置。
………………………	………………………………

如今主流浏览器都支持最新的CSS3关于背景的属性，因此不用担忧浏览器的问题了。。。。。。。

在CSS3以前，若是须要一张图片来做为背景时，背景的尺寸有图片的实际尺寸决定。

在CSS3中能够定义背景图片的尺寸了，这样咱们就能够在不一样的元素中使用同一张图片做为背景图片。定义背景图片的尺寸时能够用像素或者百分比数来定义。

* {
	background:url(1.png);
	background-size:200px 100px;
	background-repeat:no-repeat;
}

原始图片为下左图，使用上面的CSS样式表定义后，就变成了下右图

   

因此，咱们能够对一张图片进行拉伸处理，使其大小适应于所要填充的区域，无需经过其余软件对图片作修改，同时也可使一张图片做为多个元素的背景图片。

* {
	background:url(1.png);
	background-size:120px 100%;
	background-repeat:no-repeat;
}

在一个盒子内部，咱们也能够经过属性来定义背景图片的定位区域，定义图片是边框背景(content-box)，内边距背景(padding-box)仍是元素内容背景(border-box)。

在CSS3中，咱们能够用多张图片用来做为元素的背景图片。

*{ 
	background-image:url(1.gif),url(1.png),……;
}

除了图片，咱们也能够经过颜色来实现不少背景样式。

CSS3 边框

对于边框的属性，在CSS3中也新增了很多，例如添加边框阴影，用图片来绘制边框(边框是有宽度的)，定义圆角边框等等，也减小了用第三方软件设计来边框。

CSS3中新的边框的部分属性

属性	描述
border-image	设置全部 border-image-* 属性的简写属性。
border-radius	设置全部四个 border-*-radius 属性的简写属性。
box-shadow	向方框添加一个或多个阴影。

定义一个圆角边框

*{
	border:5px solid;
	border-radius:50px;
}

咱们也能够为边框添加阴影效果

* {
	box-shadow: 10px 10px 5px #CF0;
}

咱们也能够用图片做为元素的边框

* {
	border-image:url(border.png) 25 25 round;
	border-image:url(border.png) 25 25 stretch;
}

背景图片：

来源：http://www.w3school.com.cn/i/border.png