6月22号=》191页-200页

8.1.2　　CSS3新增的背景相关属性

　　　　　　CSS3新增了如下几个背景相关属性。

　　　　　　　　background-clip：该属性用于设置背景覆盖的范围。

　　　　　　　　background-origin：该属性用于设置背景覆盖的起点。

　　　　　　　　background-size：该属性用于设置背景图片的大小。该属性由两个值组成，分别代表图片的宽度、高度。

　　　　　　　　　　宽度、高度支持如下3中写法。

　　　　　　　　　　　　长度值：例如20px，指定背景图片的宽或高为20px。

　　　　　　　　　　　　百分比，例如80%，指定背景图片的宽或高为它所在组件的宽或高的80%。

　　　　　　　　　　　　auto：指定背景图片保持纵横比缩放。宽度、高度只能有一个被指定为auto，表明宽度、高度会以保持

　　　　　　　　　　　　纵横比的方式自动计算出来。

　　　　　　对于一个HTML组件来说，它由元素内容区(content)、内补丁区(padding)、边框区(border)和外补丁去(margin)组成。

　　　　　　背景的覆盖范围由background-clip属性指定，该属性支持如下几个属性值。

　　　　　　　　border-box：指定背景覆盖边框区(border)、内补丁区(padding)、内容区(content)。

　　　　　　　　no-clip：指定背景覆盖边框区(border)、内补丁区(padding)、内容区(content)。

　　　　　　　　padding-box：指定背景覆盖内补丁区(padding)、内容区(content)。

　　　　　　　　content-box：指定背景只覆盖内容区(content)。

 

　　　　　　与此类似，background-origin属性用于指定背景从哪里覆盖，可以指定如下几个属性。

　　　　　　　　border-box：指定背景图片从边框区开始覆盖。

　　　　　　　　padding-box：指定背景图片从内补丁区开始覆盖。

　　　　　　　　content-box：指定背景图片从内容区开始覆盖。

 

8.1.3　　CSS3新增的多背景图片

　　　　　　在CSS3以前，每个组件只能指定一种背景图片，CSS3的出现改变了这种局面，CSS3允许同时指定多个背景图片，这些背景

　　　　　　图片会依次覆盖，多背景图片依然是通过ackground-image、background-repeat、background-position、background-size

　　　　　　等属性来控制，只是CSS3允许指定多个属性值(多个属性值之间以英文逗号隔开)。

　　　　　　代码示范：

　　　　　　　　//为div元素添加三个背景图片

　　　　　　　　div{

　　　　　　　　　　height:160px;

　　　　　　　　　　width:500px;

　　　　　　　　　　background-image:url(url),url(url),url(url);

　　　　　　　　　　background-repeat:repeat-y,repeat-x,repeat;

　　　　　　　　　　background-position:center top,left center,left top;

　　　　　　　　}

 

8.2　　边框相关属性

　　　　　　边框相关属性用于设置目标对象的边框特征，包括边框颜色、粗细，以及使用的线型。

　　　　　　边框相关属性有如下几个：

　　　　　　　　border：这是一个复合属性，用于设置目标组件的边框样式。可同时设置边框的粗细、线型、颜色。

　　　　　　　　borde-color：用于设置组件的边框颜色。

　　　　　　　　border-style：用于设置组件的边框线型。线型可以支持如下值。

　　　　　　　　　　　　none：无边框。

　　　　　　　　　　　　hidden：隐藏边框。

　　　　　　　　　　　　dotted：点线边框。

　　　　　　　　　　　　dashed：虚线边框。

　　　　　　　　　　　　solid：实线边框。

　　　　　　　　　　　　double：双线边框。

　　　　　　　　　　　　groove：3D凹槽边框。

　　　　　　　　　　　　ridge：3D凸槽边框。

　　　　　　　　　　　　inset：3D凹入边框。

　　　　　　　　　　　　outset：3D凸出边框。

　　　　　　　　border-width：用于设置目标组件的边框线宽。

　　　　　　　　border-top：这是一个复合属性，用于设置目标组件的上边框样式。可同时设置边框的粗细、线型、颜色。

　　　　　　　　border-top-color：用于设置目标组件的上边框颜色。

　　　　　　　　border-top-style：用于设置目标组件的上边框线型。

　　　　　　　　border-top-width：用于设置目标组件的上边框线宽。

　　　　　　　　border-right、border-bottom、border-left等属性和border-top属性相同，分别设置右边框、下边框、左边框。

 

8.2.1　　CSS3提供的渐变边框

　　　　　　CSS提供了如下4个属性来支持渐变边框。

　　　　　　　　border-top-colors：该属性用于设置目标组件的上边框颜色。如果设置上边框的宽度是Npx，那么就可以为该属性设置N中颜色，

　　　　　　　　　　　　　　　　　　每种颜色显示1px的宽度。但如果设置的颜色数量小于边框的宽度，那么最后一个颜色将会覆盖边框剩下的宽度。

　　　　　　　　　　　　　　　　　　假如边框的宽度是10px，如果该属性只声明了5或6中颜色，那么最后一个颜色将会覆盖该边框剩下的宽度。

　　　　　　　　border-right-colors、border-bottom-colors、border-left-colors等属性和border-top-colors属性相同。

　　　　　　需要指出的是，这4个属性目前只有Firefox浏览器才支持，而且使用该属性时必须在前面增加-moz-前缀。

　　　　　　代码示范：

　　　　　　　　//宽度为10的渐变边框样式

　　　　　　　　div{

　　　　　　　　　　width:300px;

　　　　　　　　　　height:40px;

　　　　　　　　　　border:10px solid white;

　　　　　　　　　　-moz-border-top-colors:#555 #666 #777 #888 #999 #aaa #bbb #ccc #ddd #eee;

　　　　　　　　　　-moz-border-right-colors:#555 #666 #777 #888 #999 #aaa #bbb #ccc #ddd #eee;

　　　　　　　　　　-moz-border-bottom-colors:#555 #666 #777 #888 #999 #aaa #bbb #ccc #ddd #eee;

　　　　　　　　　　-moz-border-left-colors:#555 #666 #777 #888 #999 #aaa #bbb #ccc #ddd #eee;

　　　　　　　　}

 

8.2.2　　CSS3提供的圆角边框

　　　　　　CSS3为支持圆角边框提供了如下属性。

　　　　　　　　border-radius：该属性用于指定圆角边框的圆角半径(半径越大，圆角的成都就越大)。如果该属性指定1个长度，则4个

　　　　　　　　　　　　　　　　圆角都使用该长度作为半径；如果指定2个长度，则第一个长度将作为左上角、右下角的半径；第二个

　　　　　　　　　　　　　　　　长度将作为右上角、左下角的半径；如果指定3个长度，则第一个长度将作为左上角的半径，第二个长度

　　　　　　　　　　　　　　　　将作为右上角、左下角的半径；第三个长度将作为右下角的半径。

　　　　　　　　border-top-left-radius：该属性用于指定左上角的圆角半径。

　　　　　　　　border-top-right-radius：该属性用于指定右上角的圆角半径。

　　　　　　　　border-bottom-right-radius：该属性用于指定右下角的圆角半径。

　　　　　　　　border-bottom-left-radius：该属性用于指定左下角的圆角半径。

　　　　　　代码示范：

　　　　　　　　//半径为20px的圆角边框

　　　　　　　　div1{

　　　　　　　　　　height:60px;

　　　　　　　　　　width:300px;

　　　　　　　　　　border:3px solid black;

　　　　　　　　　　border-radius:20px;

　　　　　　　　}

　　　　　　　　//半径为10px 20px 30px 40px的圆角边框

　　　　　　　　div2{

　　　　　　　　　　height:60px;

　　　　　　　　　　width:300px;

　　　　　　　　　　border-top-left-radius:10px;

　　　　　　　　　　border-top-right-radius:20px;

　　　　　　　　　　border-bottom-right-radius:30px;

　　　　　　　　　　border-bottom-left-radius:40px;

　　　　　　　　}