79CSS3.0参考手册

Copyright©2009TencentISDwebteam.AllRightsReservedCSS3PropertiesBordersBackgroundsColorTexteffectsUser-interfaceSelectorsBasicboxmodelGeneratedContentOthermodulesborder-colorborder-imageborder-radiusbox-shadowbackground-originbackground-clipbackground-sizemultiplebackgroundsHSLcolorsHSLAcolorsopacityRGBAcolorstext-shadowtext-overflowword-wrapbox-sizingresizeoutlinenav-up,nav-right,nav-down,nav-leftattributeselectorsoverflow-x,overflow-ycontentmediaqueriesmulti-columnlayoutWebfontsspeechCopyright©2009TencentISDwebteam.AllRightsReservedBordersPropertiesborder-colorborder-imageborder-radiusbox-shadowCopyright©2009TencentISDwebteam.AllRightsReservedBorder-color版本：版本：版本：版本：CSS3继承性：无border-color：color相相相相关关关关属属属属性性性性：border-top-color,border-right-color,border-bottom-color,border-left-color颜色值。设设设设置置置置对对对对象象象象边边边边框的框的框的框的颜颜颜颜色。色。色。色。使用CSS3的border-radius属性，如果你设置了border的宽度是Xpx，那么你就可以在这个border上使用X种颜色，每种颜色显示1px的宽度。如果说你的border的宽度是10个像素，但是只声明了5或6种颜色，那么最后一个颜色将被添加到剩下的宽度。语语语语法：法：法：法：取取取取值值值值：：：：color：：：：说说说说明：明：明：明：引擎类型GeckoWebkitPrestoBorder-color-moz-border-color      兼容性：兼容性：兼容性：兼容性：类型InternetExplorerFirefoxChromeOperaSafari版本(×)IE6(×)Firefox2.0(×)Chrome1.0.x(×)Opera9.64(×)Safari3.1(×)IE7(√)Firefox3.0(×)Chrome2.0.x(×)IE8(√)Firefox3.5示例：示例：示例：示例：!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Strict//EN==Content-Typecontent=text/html;charset=utf-8/metahttp-equiv=Content-Languagecontent=utf-8/metaname=robotscontent=all/metaname=authorcontent=Tencent-ISRD/metaname=Copyrightcontent=Tencent/titleBorder-color/title/headbody复制代码快速跳转语语语语法法法法取取取取值值值值说说说说明明明明兼容性兼容性兼容性兼容性示例示例示例示例Border-image版本：版本：版本：版本：CSS3继承性：无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-imageborder-corner-image：border-top-left-image,border-top-right-image,border-bottom-left-image,border-bottom-right-image默认值。无背景图。使用绝对或相对url地址指定背景图像。边框宽度用固定像素值表示。边框宽度用百分比表示。拉伸|重复|平铺(其中stretch是默认值。) 使用使用使用使用图图图图片作片作片作片作为对为对为对为对象的象的象的象的边边边边界。界。界。界。当table设置border-collapse为collapse无效。语语语语法：法：法：法：取取取取值值值值：：：：none：：：：image：：：：number：：：：percentage：：：：[stretch|repeat|round]：：：：说说说说明：明：明：明：引擎类型GeckoWebkitPrestoBorder-image-moz-border-image-webkit-border-image  兼容性：兼容性：兼容性：兼容性：类型InternetExplorerFirefoxChromeOperaSafari版本(×)IE6(×)Firefox2.0(√)Chrome1.0.x(×)Opera9.64(√)Safari3.1(×)IE7(×)Firefox3.0(√)Chrome2.0.x(√)Safari4(×)IE8(√)Firefox3.5示例：示例：示例：示例：快速跳转语语语语法法法法取取取取值值值值说说说说明明明明兼容性兼容性兼容性兼容性示例示例示例示例Copyright©2009TencentISDwebteam.AllRightsReserved使用的图片:!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Strict//EN==Content-Typecontent=text/html;charset=utf-8/metahttp-equiv=Content-Languagecontent=utf-8/metaname=robotscontent=all/metaname=authorcontent=Tencent-ISRD/metaname=Copyrightcontent=Tencent/titleBorder-image/title/headbody复制代码Border-radius版本：版本：版本：版本：CSS3继承性：无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由浮点数字和单位标识符组成的长度值。不可为负值。由浮点数字和单位标识符组成的长度值。不可为负值。第一个值是水平半径。如果第二个值省略，则它等于第一个值，这时这个角就是一个四分之一圆角。如果任意一个值为0，则这个角是矩形，不会是圆的。值不允许是负值。语语语语法：法：法：法：取取取取值值值值：：：：length：：：：border-top-left-radius：：：：说说说说明：明：明：明：引擎类型GeckoWebkitPrestoBorder-radius-moz-border-radius-webkit-border-radius border-bottom-left-radius-moz-border-radius-bottomleft-webkit-border-bottom-left-radiusborder-bottom-right-radius-moz-border-radius-bottomright-webkit-border-bottom-right-radiusborder-top-left-radius-moz-border-radius-topleft-webkit-border-top-left-radiusborder-top-right-radius-moz-border-radius-topright-webkit-border-top-right-radius兼容性：兼容性：兼容性：兼容性：类型InternetExplorerFirefoxChromeOperaSafari版本(×)IE6(×)Firefox2.0(√)Chrome1.0.x(×)Opera9.64(√)Safari3.1(×)IE7(√)Firefox3.0(√)Chrome2.0.x (×)IE8(√)Firefox3.5示例：示例：示例：示例：!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Strict//EN==Content-Typecontent=text/html;charset=utf-8/metahttp-equiv=Content-Languagecontent=utf-8/metaname=robotscontent=all/metaname=authorcontent=Tencent-ISRD/metaname=Copyrightcontent=Tencent/titleBorder-radius/title快速跳转语语语语法法法法取取取取值值值值说说说说明明明明兼容性兼容性兼容性兼容性示例示例示例示例Copyright©2009TencentISDwebteam.AllRightsReserved/headbody复制代码Copyright©2009TencentISDwebteam.AllRightsReservedbox-shadow版本：版本：版本：版本：CSS3box-shadow：lengthlengthlengthlength||color相关属性：text-shadow阴影水平偏移值（可取正负值）；阴影垂直偏移值（可取正负值）；阴影模糊值；阴影颜色设置块阴影语语语语法：法：法：法：取取取取值值值值：：：：lengthlengthlength?length?||color：：：：说说说说明：明：明：明：引擎类型GeckoWebkitPrestoBox-shadow-moz-box-shadow-webkit-border-shadow  兼容性：兼容性：兼容性：兼容性：类型InternetExplorerFirefoxChromeOperaSafari版本(×)IE6(×)Firefox3.0.10(√