CSS3.0参考手册
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
示例：
使用的图片:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="utf-8" /> <meta name="robots" content="all" /> <meta name="author" content="Tencent-ISRD" /> <meta name="Copyright" content="Tencent" /> <title>Border-image</title> </head> <body>
box-shadow
Border-color
版本：CSS3 继承性：无
语法：
border-color ： < color> 相关属性 ：border-top-color, border-right-color, border-bottom -color , border-left-color
取值：
Presto
兼容性：
类型
Internet Explorer
Firefox
取值：
<length> <length> <length>? <length>? || <color>：阴影水平偏移值（可取正负值）；阴影垂直偏移值（可取正负值）；阴影模糊 值；阴影颜色
快速跳转
语法 取值 说明 兼容性 示例
说明：
设置块阴影
引擎类型
Gecko
Webkit
Box-shadow -moz-box-shadow -webkit-border-shadow
User-interface
box-sizing
resize
nav-up , nav-right , nav-down , nav-left
Selectors
attribute selectors
Basic box model
overflow-x , overflow-y
Generated Content
Firefox
(×) IE6
(×) Firefox 2.0
(×) IE7 版本
(×) IE8
(×) Firefox 3.0 (√) Firefox 3.5
Chrome (√) Chrome 1.0.x (√) Chrome 2.0.x
Opera (×) Opera 9.64
Safari (√) Safari 3.1 (√) Safari 4
border-bottom-right-radius -moz-border-radius-bottomright -webkit-border-bottom-right-radius
border-top-left-radius -moz-border-radius-topleft
-webkit-border-top-left-radius
speech
Copyright © 2009 Tencent ISD webteam. A ll Rights Reserved
Borders Properties
border-color
border-image
border-radius
Copyright © 2009 Tencent ISD webteam. A ll Rights Reserved
复制代码
Copyright © 2009 Tencent ISD webteam. A ll Rights Reserved
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
说明：
使用图片作为对象的边界。 当t a bl e设置bor der -c ol l a pse为c ol l a pse无效。
引擎类型
Gecko
Webkit
Border-image -moz-border-image -webkit-border-image
Presto
兼容性：
类型
Internet Explorer
border-corner-im age：border-top-left-im age , border-top-right-im age , border-bottom -left-im age , border-bottom right-im age
快速跳转
语法 取值 说明 兼容性 示例
取值：
n on e： 默认值。无背景图。 <image>：使用绝对或相对 url 地址指定背景图像。 <number>： 边框宽度用固定像素值表示。 <percent age>：边框宽度用百分比表示。 [ st ret ch | repeat | round ]：拉伸 | 重复 | 平铺 (其中stretch是默认值。)
</head> <body>
复制代码
Copyright © 2009 Tencent ISD webteam. A ll Rights Reserved
box-shadow
版本：CSS3
语法：
box-shadow：< length> < length> < length> < length> || < color> 相关属性：t ex t -sh a dow
Chrome (×) Chrome 1.0.x (×) Chrome 2.0.x
Opera (×) Opera 9.64
Safari (×) Safari 3.1
示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="utf-8" /> <meta name="robots" content="all" /> <meta name="author" content="Tencent-ISRD" /> <meta name="Copyright" content="Tencent" /> <title>Border-color</title> </head> <body>
CSS3 Properties
Borders
border-color
border-image
Backgrounds
background-origin
background-clip
Color
HSL colors
HSLA colors
Text effects
text-shadow
text-overflow
content
Other modules
media queries
multi-column layout
border-radius background-size opacity word-wrap outline
Web fonts
box-shadow multiple backgrounds RGBA colors
取值：
<length>： 由浮点数字和单位标识符组成的长度值。不可为负值。 border-t op-left -radius：由浮点数字和单位标识符组成的长度值。不可为负值。
说明：
第一个值是水平半径。 如果第二个值省略，则它等于第一个值，这时这个角就是一个四分之一圆角。 如果任意一个值为0，则这个角是矩形，不会是圆的。 值不允许是负值。
border-top-right-radius -moz-border-radius-topright
-webkit-border-top-right-radius
Presto
兼容性：
类型
Internet Explorer
(×) IE6
Firefox (×) Firefox 2.0
(×) IE7 版本
<c olor>： 颜色值。
快速跳转
语法 取值 说明 兼容性 示例
说明：
设置对象边框的颜色。 使用CSS3 的border-radius属性，如果你设置了border的宽度是X px，那么你就可以在这个border上使用X种颜色，每种颜色显示1 px的宽 度。如果说你的border的宽度是1 0个像素，但是只声明了5或6 种颜色，那么最后一个颜色将被添加到剩下的宽度。
引擎类型
Gecko
Webkit
Border-radius
-moz-border-radius
-webkit-border-radius
border-bottom-left-radius -moz-border-radius-bottomleft -webkit-border-bottom-left-radius
引擎类型
Gecko
Border-color -moz-border-color
Webkit
Presto
兼容性：
类型
Internet Explorer
Firefox
(×) IE6
(×) Firefox 2.0
(×) IE7 版本
(×) IE8
(√) Firefox 3.0 (√) Firefox 3.5
复制代码
Copyright © 2009 Tencent ISD webteam. A ll Rights Reserved
Border-image
版本：CSS3 继承性：无
语法：
border-image ： none | < im age> [ < num ber> | < percentage> ]{1 ,4 } [ / < border-width> {1 ,4 } ]? [ stretch | repeat | round ] {0,2} 相关属性 ： border-im age：border-top-im age , border-right-im age , border-bottom -im age , border-left-im age
(×) IE8
(√) Firefox 3.0 (√) Firefox 3.5
Chrome (√) Chrome 1.0.x (√) Chrome 2.0.x
Opera (×) Opera 9.64
Safari (√) Safari 3.1
示例：
快速跳转
语法 取值 说明 兼容性 示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="utf-8" /> <meta name="robots" content="all" /> <meta name="author" content="Tencent-ISRD" /> <meta name="Copyright" content="Tencent" /> <title>Border-radius</title>