01CSS属性边框,背景

border :基本语法
border: border-width || border-style || border-color
默认值为: medium none 。 border-color 的默认值将采用文本颜色
相关属性:
border-top,border-left,border-right,border-bottom:它们分别对边框的某个方向起作用,语法基本与border相同
border-bottom-color,border-top-color,border-bottom-color,border-right-color:分别设置某个边框的颜色:例如border-bottom-color:red设置下边框的颜色为红色

border-bottom-width,border-top-width,border-bottom-width,border-right-分别设置某个边框的宽度:
基本语法:border-bottom-width : medium | thin | thick | length 其中length由浮点数字和单位标识符组成的长度值。不可为负值,例如border-bottom-width :thin;

border-bottom-style,border-top-style,border-bottom-style,border-right-style:分别设置某个边框的样式:
基本语法:border-left-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
none    :  默认值。无边框。不受任何指定的 border-width 值影响
hidden  :  隐藏边框。IE不支持
dotted  :  在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线
dashed  :  在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线
solid   :  实线边框
double  :  双线边框。两条单线与其间隔的和等于指定的 border-width 值
groove  :  根据 border-color 的值画3D凹槽
ridge   :  根据 border-color 的值画菱形边框
inset   :  根据 border-color 的值画3D凹边
outset  :  根据 border-color 的值画3D凸边
CSS3.0新增:
设置圆角:
border-radius : none | <length>{1,4} [ / <length>{1,4} ]?
相关属性: border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius , border-top-left-radius
取值:<length>: 由浮点数字和单位标识符组成的长度值。不可为负值。
border-top-left-radius: 由浮点数字和单位标识符组成的长度值。不可为负值。
说明:第一个值是水平半径。如果第二个值省略,则它等于第一个值,这时这个角就是一个四分之一圆角。 如果任意一个值为0,则这个角是矩形,不会是圆的。 值不允许是负值。
例如:
border-radius :4px;
边框对象颜色:
border-color : <color>
相关属性 :border-top-color, border-right-color, border-bottom-color , border-left-color
设置对象边框的颜色。
使用CSS3的border-radius属性,如果你设置了border的宽度是X px,那么你就可以在这个border上使用X种颜色,每种颜色显示1px的宽度。如果说你的border的宽度是10个像素,但是只声明了5或6种颜色,那么最后一个颜色将被添加到剩下的宽度。
例如针对上例中的边框设置为4px,颜色可以设置为4中不同的颜色
border-color:#555 #666 #777 #888
边框背景图片:
border-image : none | <image> [ <number> | <percentage>]{1,4} [ / <border-width>{1,4} ]? [ stretch | repeat | round ]{0,2}
相关属性 : border-image:border-top-image , border-right-image , border-bottom-image , border-left-image,border-corner-image:border-top-left-image , border-top-right-image , border-bottom-left-image , border-bottom-right-image
取值:none: 默认值。无背景图。
<image>: 使用绝对或相对 url 地址指定背景图像。
<number>: 边框宽度用固定像素值表示。
<percentage>: 边框宽度用百分比表示。
[ stretch | repeat | round ]: 拉伸 | 重复 | 平铺 (其中stretch是默认值。)
border-image: url(img/bt_blue.png) 0 12 0 12 stretch stretch;
设置边框阴影:
box-shadow:<length> <length> <length> <length> || <color>
相关属性:text-shadow
取值:<length> <length> <length>? <length>? || <color>: 阴影水平偏移值(可取正负值);阴影垂直偏移值(可取正负值);阴影模糊值;阴影颜色
box-shadow:5px 2px 6px #000

背景
background : background-color || background-image || background-repeat || background-attachment || background-position
默认值为:transparent none repeat scroll 0% 0%。
设置对象的背景样式。如使用该复合属性定义其单个参数,则其他参数的默认值将无条件覆盖各自对应的单个属性设置。例如:设置 background : white 等于设置 background : white none repeat scroll 0% 0% 。如果在此之前设置了 background-image 属性,则其设置将被 background-image 的默认值 none 覆盖。背景样式属性的作用区域为对象的内容区域与内补丁( padding )区域。不包括边框( border )与外补丁( margin )区域。尽管该属性不可继承,但如果未指定,其父对象的背景颜色和背景图将在对象下面显示。对应的脚本特性为 background 。
相关属性:
background-attachment : scroll | fixed
语法取值
scroll  :  默认值。背景图像是随对象内容滚动
fixed   :  背景图像固定

background-color : transparent | color
语法取值
transparent  :  默认值。背景色透明
color        :  指定颜色。请参阅 颜色单位 和 附录:颜色表 
使用说明
设置或检索对象的背景颜色。当背景颜色与背景图像( background-image )都被设定了时,背景图片将覆盖于背景颜色之上。

background-image : none | url ( url )
语法取值
none         :  默认值。无背景图
url ( url )  :  使用绝对或相对 url 地址指定背景图像
使用说明
设置或检索对象的背景图像。当背景图像与背景颜色( background-color )都被设定了时,背景图片将覆盖于背景颜色之上。

background-position : length || length
background-position : position || position
语法取值
length    :  百分数 | 由浮点数字和单位标识符组成的长度值。请参阅 长度单位 
position  :  top | center | bottom | left | center | right
使用说明
设置或检索对象的背景图像位置。必须先指定 background-image 属性。该属性定位不受对象的补丁属性( padding )设置影响。默认值为: 0% 0% 。此时背景图片将被定位于对象不包括补丁( padding )的内容区域的左上角。如果只指定了一个值,该值将用于横坐标。纵坐标将默认为 50% 。如果指定了两个值,第二个值将用于纵坐标。如果设置值为 right center ,因为 right 作为横坐标值将会覆盖 center 值,所以背景图片将被居右定位。对应的脚本特性为 backgroundPosition 。

background-position-x : length | left | center | right
语法取值
length  :  百分数 | 由浮点数字和单位标识符组成的长度值。请参阅 长度单位 
left    :  居左
center  :  居中
right   :  居右
使用说明
设置或检索对象的背景图像横坐标位置。必须先指定 background-image 属性。该属性定位不受对象的补丁属性( padding )设置影响。默认值为: 0% 。此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为 backgroundPositionX 。

background-position-y : length | top | center | bottom
语法取值
length  :  百分数 | 由浮点数字和单位标识符组成的长度值。请参阅 长度单位 
top     :  居顶
center  :  居中
bottom  :  居底 
使用说明
设置或检索对象的背景图像纵坐标位置。必须先指定 background-image 属性。该属性定位不受对象的补丁属性( padding )设置影响。默认值为: 0% 。此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为 backgroundPositionY 。

background-repeat : repeat | no-repeat | repeat-x | repeat-y
语法取值
repeat     :  默认值。背景图像在纵向和横向上平铺
no-repeat  :  背景图像不平铺
repeat-x   :  背景图像仅在横向上平铺
repeat-y   :  背景图像仅在纵向上平铺
使用说明
设置或检索对象的背景图像是否及如何铺排。必须先指定对象的背景图像( background-image )。

layer-background-color : transparent | color
语法取值
transparent  :  默认值。背景色透明。
color        :  指定颜色。请参阅 颜色单位 和 附录:颜色表。
使用说明
设置或检索对象整个区域的背景颜色。
CSS3新增:
background-origin : border | padding | content
相关属性: background-clip | background-size
取值:border: 从border区域开始显示背景。
padding: 从padding区域开始显示背景。
content: 从content区域开始显示背景。

background-clip : border-box | padding-box | content-box | no-clip
相关属性: background-origin | background-size
取值:border-box: 从border区域向外裁剪背景。
padding-box: 从padding区域向外裁剪背景。
content-box: 从content区域向外裁剪背景。
no-clip: 从border区域向外裁剪背景。

background-size :[ <length> | <percentage> | auto ]{1,2} | cover | contain

相关属性: background-clip | background-origin

取值:<length>: 由浮点数字和单位标识符组成的长度值。不可为负值。
<percentage>: 取值为0%到100%之间的值。不可为负值。
说明:设置背景图片的大小。

指定背景大小,以象素或百分比显示。当指定为百分比时,大小会由所在区域的宽度、高度,以及background-origin的位置决定。还可以通过cover和contain来对图片进行伸缩。


Multiple backgrounds

语法:background : [background-image] | [background-origin] | [background-clip] | [background-repeat] | [background-size] | [background-position]

相关属性: background-image | background-origin | background-clip | background-repeat | background-size | background-position

取值:<background-image>: 指定或检索对象的背景图像。
<background-origin>: 指定背景的显示区域。参见background-origin
<background-clip>: 指定背景的裁剪区域。参见background-clip
<background-repeat>: 设置或检索对象的背景图像是否及如何重复铺排。
<background-size>: 指定背景图片的大小。参见background-size
<background-position>: 设置或检索对象的背景图像位置。
说明:多重背景图象,可以把不同背景图象只放到一个块元素里。
多个图片url之间使用逗号隔开即可;如果有多个背景图片,而其他属性只有一个(例如background-repeat只有一个),表明所有背景图片应用该属性值。
CSS3中在容器的多层背景,各子属性与逗号来分隔值,如果指定的值,如下:
background-image: w1, w2, w3,…, wM
background-repeat: x1, x2, x3,…, xR
background-size: y1, y2, y3,…, yS
background-position: s1, s2, s3,…, sP
当背景层的数值是N = max(M,R, S, P)
每个属性可以假如它的值为n,通过重复指定的值如下所示:
background-image: w1,…wM, w1,…wM, w1,… /* N values */
background-repeat: x1,…xR, x1,…xR, x1,… /* N values */
background-size: y1,…yS, y1,…yS, y1,… /* N values */
background-position: s1,…rP, s1,…rP, s1,… /* N values */
范例书写:
background-image: url(img/multiple-backgrounds.png), url(img/multiple-backgrounds.png), url(img/multiple-backgrounds.png);
background-position: left top, -320px bottom, -640px top;
background-repeat: no-repeat, no-repeat, repeat-y;
也可以简写:
background: url(img/multiple-backgrounds.png) left top no-repeat, url(img/multiple-backgrounds.png) -320px bottom no-repeat, url(img/multiple-backgrounds.png) -640px top repeat-y;

原文地址:https://www.cnblogs.com/ldqwyl/p/2023193.html