Quick Search index

CSS参考手册 » 速查表
相关内容：
速查表快速通道 选择其它项
  • 简介列表
  • 属性列表
  • 选择符列表
  • 语法与规则列表
  • 取值列表
  • 单位列表
  • 附录列表
  • CSS Hack列表
  • 问题和经验列表

Quick Search

  • 速查表

定位 Positioning

  • position
  • z-index
  • top
  • right
  • bottom
  • left

布局 Layout

  • display
  • float
  • clear
  • visibility
  • clip
  • overflow
  • overflow-x
  • overflow-y

弹性盒模型 Flexible Box Layout

  • box-orient
  • box-pack
  • box-align
  • box-flex
  • box-flex-group
  • box-ordinal-group
  • box-direction
  • box-lines

尺寸 Dimension

  • width
  • min-width
  • max-width
  • height
  • min-height
  • max-height

外补白 Margin

  • margin
  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

内补白 Padding

  • padding
  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

边框 Border

  • border
  • border-width
  • border-style
  • border-color
  • border-top
  • border-top-width
  • border-top-style
  • border-top-color
  • border-right
  • border-right-width
  • border-right-style
  • border-right-color
  • border-bottom
  • border-bottom-width
  • border-bottom-style
  • border-bottom-color
  • border-left
  • border-left-width
  • border-left-style
  • border-left-color
  • border-image
  • border-radius
  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius
  • box-shadow
  • box-reflect

背景 Background

  • background
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
  • background-origin
  • background-clip
  • background-size
  • Multiple background

颜色 Color

  • color
  • opacity

字体 Font

  • font
  • font-style
  • font-variant
  • font-weight
  • font-size
  • font-family
  • font-stretch

文本 Text

  • text-indent
  • text-overflow
  • text-align
  • text-transform
  • text-decoration
  • text-decoration-line
  • text-decoration-color
  • text-decoration-style
  • text-shadow
  • text-fill-color
  • text-stroke
  • text-stroke-width
  • text-stroke-color
  • letter-spacing
  • word-spacing
  • vertical-align
  • word-wrap
  • white-space
  • direction
  • unicode-bidi
  • line-height
  • tab-size

列表 List

  • list-style
  • list-style-image
  • list-style-position
  • list-style-type

表格 Table

  • table-layout
  • border-collapse
  • border-spacing
  • caption-side
  • empty-cells

内容 Content

  • content
  • counter-increment
  • counter-reset
  • quotes

用户界面 User Interface

  • outline
  • outline-width
  • outline-style
  • outline-color
  • outline-offset
  • nav-index
  • nav-up
  • nav-right
  • nav-down
  • nav-left
  • cursor
  • zoom
  • box-sizing
  • resize
  • ime-mode

多列 Multi-column

  • columns
  • column-width
  • column-count
  • column-gap
  • column-rule
  • column-rule-width
  • column-rule-style
  • column-rule-color
  • column-span
  • column-fill
  • column-break-before
  • column-break-after
  • column-break-inside

转换 Transform

  • transform
  • transform-origin

过渡 Transition

  • transition
  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay

动画 Animation

  • animation
  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-play-state
  • animation-fill-mode

打印 Printing

  • page
  • page-break-before
  • page-break-after
  • page-break-inside

媒体查询 Media Queries

  • width
  • height
  • device-width
  • device-height
  • orientation
  • aspect-ratio
  • device-aspect-ratio
  • color
  • color-index
  • monochrome
  • resolution
  • scan
  • grid

Only IE

  • scrollbar-3dlight-color
  • scrollbar-drakshadow-color
  • scrollbar-highlight-color
  • scrollbar-shadow-color
  • scrollbar-arrow-color
  • scrollbar-face-color
  • scrollbar-track-color
  • scrollbar-base-color
  • filter
  • behavior

Only Firefox

  • border-colors
  • border-top-colors
  • border-right-colors
  • border-bottom-colors
  • border-left-colors

元素选择符 Element Selectors

  • *
  • E
  • E#id
  • E.class

关系选择符 Relationship Selectors

  • E F
  • E>F
  • E+F
  • E~F

属性选择符 Attribute Selectors

  • E[att]
  • E[att="val"]
  • E[att~="val"]
  • E[att^="val"]
  • E[att$="val"]
  • E[att*="val"]
  • E[att|="val"]

伪类选择符 Pseudo-Classes Selectors

  • E:link
  • E:visited
  • E:hover
  • E:active
  • E:focus
  • E:lang()
  • E:not()
  • E:root
  • E:first-child
  • E:last-child
  • E:only-child
  • E:nth-child(n)
  • E:nth-last-child(n)
  • E:first-of-type
  • E:last-of-type
  • E:only-of-type
  • E:nth-of-type(n)
  • E:nth-last-of-type(n)
  • E:empty
  • E:checked
  • E:enabled
  • E:disabled
  • E:target
  • @page:first
  • @page:left
  • @page:right

伪对象选择符 Pseudo-Element Selectors

  • E:first-letter/E::first-letter
  • E:first-line/E::first-line
  • E:before/E::before
  • E:after/E::after
  • E::selection

语法与规则 Rules and Syntax

  • !important
  • comment
  • @import
  • @charset
  • @media
  • @font-face
  • @page
  • @keyframes

颜色类型取值 Color Type

  • Color Name
  • HEX
  • RGB
  • RGBA
  • HSL
  • HSLA
  • transparent

文本类型取值 Textual Data Type

  • <string>
  • <url>
  • <identifier>

函数类型取值 Functional Notations Type

  • counter()
  • attr()
  • calc()
  • min()
  • max()
  • cycle()

图像类型取值 Image Type

  • linear-gradient()
  • radial-gradient()
  • repeating-linear-gradient()
  • repeating-radial-gradient()

数字类型取值 Numeric Data Type

  • <number>
  • <integer>

其它数据类型取值 Other Data Types

  • <length>
  • <percentage>
  • <angle>
  • <time>
  • <frequency>
  • <fraction>
  • <grid>

长度单位 Length Units

  • em
  • ex
  • ch
  • rem
  • vw
  • vh
  • vm
  • cm
  • mm
  • in
  • pt
  • pc
  • px

角度单位 Angle Units

  • deg
  • grad
  • rad
  • turn

时间单位 Time Units

  • s
  • ms

频率单位 Frequency Units

  • Hz
  • kHz

特殊布局单位 Layout-specific Units

  • fr
  • gr

附录 Appendix

  • 颜色关键字(Color Keywords)
  • 媒体类型(Media Types)

常用CSS Hack

  • 条件Hack
  • 属性级Hack
  • 选择符级Hack

问题和经验

  • Bugs和解决方案
  • 技巧和经验
  • 其它经验

这种颜色 的链接表示是CSS3新增的或者在CSS3中有所调整

Copyright © 2006-2012 Doyoe. All Rights Reserved


CSS3 Quick Search index

CSS参考手册 » CSS3速查表
速查表快速通道 选择其它项
  • 简介列表
  • 属性列表
  • 选择符列表
  • 语法与规则列表
  • 取值列表
  • 单位列表
  • 附录列表
  • CSS Hack列表
  • 问题和经验列表

CSS3 Quick Search

  • CSS3速查表

布局 Layout

  • display
  • overflow-x
  • overflow-y

弹性盒模型 Flexible Box Layout

  • box-orient
  • box-pack
  • box-align
  • box-flex
  • box-flex-group
  • box-ordinal-group
  • box-direction
  • box-lines

边框 Border

  • border-image
  • border-radius
  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius
  • box-shadow
  • box-reflect

背景 Background

  • background-image
  • background-repeat
  • background-attachment
  • background-position
  • background-origin
  • background-clip
  • background-size
  • Multiple background

颜色 Color

  • opacity

字体 Font

  • font-stretch

文本 Text

  • text-overflow
  • text-align
  • text-transform
  • text-decoration
  • text-decoration-line
  • text-decoration-color
  • text-decoration-style
  • text-shadow
  • text-fill-color
  • text-stroke
  • text-stroke-width
  • text-stroke-color
  • word-wrap
  • tab-size

用户界面 User Interface

  • outline-offset
  • nav-index
  • nav-up
  • nav-right
  • nav-down
  • nav-left
  • box-sizing
  • resize
  • ime-mode

多列 Multi-column

  • columns
  • column-width
  • column-count
  • column-gap
  • column-rule
  • column-rule-width
  • column-rule-style
  • column-rule-color
  • column-span
  • column-fill
  • column-break-before
  • column-break-after
  • column-break-inside

转换 Transform

  • transform
  • transform-origin

过渡 Transition

  • transition
  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay

动画 Animation

  • animation
  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-play-state
  • animation-fill-mode

媒体查询 Media Queries

  • width
  • height
  • device-width
  • device-height
  • orientation
  • aspect-ratio
  • device-aspect-ratio
  • color
  • color-index
  • monochrome
  • resolution
  • scan
  • grid

Only Firefox

  • border-colors
  • border-top-colors
  • border-right-colors
  • border-bottom-colors
  • border-left-colors

关系选择符 Relationship Selectors

  • E~F

属性选择符 Attribute Selectors

  • E[att^="val"]
  • E[att$="val"]
  • E[att*="val"]

伪类选择符 Pseudo-Classes Selectors

  • E:not()
  • E:root
  • E:last-child
  • E:only-child
  • E:nth-child(n)
  • E:nth-last-child(n)
  • E:first-of-type
  • E:last-of-type
  • E:only-of-type
  • E:nth-of-type(n)
  • E:nth-last-of-type(n)
  • E:empty
  • E:checked
  • E:enabled
  • E:disabled
  • E:target

伪对象选择符 Pseudo-Element Selectors

  • E:first-letter/E::first-letter
  • E:first-line/E::first-line
  • E:before/E::before
  • E:after/E::after
  • E::selection

语法与规则 Rules and Syntax

  • @import
  • @media
  • @font-face
  • @keyframes

颜色类型取值 Color Type

  • RGBA
  • HSL
  • HSLA
  • transparent

函数类型取值 Functional Notations Type

  • attr()
  • calc()
  • min()
  • max()
  • cycle()

图像类型取值 Image Type

  • linear-gradient()
  • radial-gradient()
  • repeating-linear-gradient()
  • repeating-radial-gradient()

其它数据类型取值 Other Data Types

  • <angle>
  • <time>
  • <frequency>
  • <fraction>
  • <grid>

长度单位 Length Units

  • ch
  • rem
  • vw
  • vh
  • vm

角度单位 Angle Units

  • deg
  • grad
  • rad
  • turn

时间单位 Time Units

  • s
  • ms

频率单位 Frequency Units

  • Hz
  • kHz

特殊布局单位 Layout-specific Units

  • fr
  • gr

这种颜色 的链接表示是CSS3新增的或者在CSS3中有所调整


CSS Manual Introducing

CSS参考手册 » 简介
其它简介条目 选择其它项
  • 关于本手册
  • 关于样式表
  • 关于作者
  • 阅读及使用指引
  • 鸣谢
  • 捐赠

web前端开发参考手册系列之

CSS参考手册

版本：v3.4.0

最后更新时间：2012.2.28

编著：飘零雾雨

下载最新chm版

CSS参考手册在线版


About This CSS Handbook

其它简介条目 选择其它项
  • 关于本手册
  • 关于样式表
  • 关于作者
  • 阅读及使用指引
  • 鸣谢
  • 捐赠

About This Handbook

  • CSS参考手册简介

版权声明 Copyright

  • 本手册由飘零雾雨编写。版权所有者为飘零雾雨。
  • 您可以免费的使用、分发本手册。但未经飘零雾雨的授权许可不得擅自进行篡改、反编译，及将其全部或部分用于商业用途。
  • 本手册受著作权法和国际公约的保护，作者保留对本手册及本声明的最终修改权。
  • 本手册的部分内容参考了苏沈小雨版的CSS2.0手册及World Wide Web Consortium (W3C)公开的网络文档。

版本更新 Update

  • 本手册当前版本为：v3.4.0　更新时间为：2012.2.28　下载chm版：CSS参考手册v3.4.0，如过下载后的chm无法查看页面，请看阅读及使用指引最后一点。
  • 您可以随时访问我的网站：CSS参考手册官网 检查并获取更新版本。
  • 您也可以给我写电子邮件 dooyoe@gmail.com或者QQ: 104589226咨询及洽谈商业合作。
  • 由于个人的精力有限，手册内容难免出现错误和问题，望广大网友不吝斧正。请将您发现的问题提交到CSS参考手册问题反馈，将会在鸣谢页面列出您的名字，以表达对您的感激。
  • 如果您希望为手册的发展贡献一份力量，你也可以捐赠任意金额，促使手册更加完善。

版本信息 Version Information

  • CSS参考手册v3.4.0

    Update Time: 2012.2.28

    新增了display的box和inline-box值；新增了CSS Flexible Box Layout Properties参考；更新了text-decoration参考；新增了text-decoration-line、text-decoration-color、text-decoration-style参考；新增了ime-mode参考；新增了CSS3速查表参考；新开了Only Firefox节点；补充修订了问题和经验列表；新增了一些对本手册指出过Bug提出过建议的感谢名单；修订了热心网友发现的部分错误描述、链接及Bug；

  • CSS参考手册v3.3.0

    Update Time: 2011.12.30

    新增了text-stroke复合属性参考；新增了text-fill-color属性参考；新增了box-reflect属性参考；新增了background-clip的text属性值(感谢 @FlashSoft)；新增了部分属性对Firefox9.0, Chrome16.0, Opera11.60的支持参考；新增了手册的favicon icon；修订了一些热心网友发现的错误链接和Bug；补充修订了问题和经验列表；新增了一些对本手册指出过Bug提出过建议的感谢名单；

  • CSS参考手册v3.2.0

    Update Time: 2011.11.20

    在每页顶部的增加了面包屑及导航到相关内容；新增了<identifier> Value参考；新增了cycle() Value参考；新增了ch Unit参考；新增了Units下某些缺少的demo并完善了内容；新增了animation-fill-mode属性参考；修订了一些错误链接；修订了一些BUG；补充修订了问题和经验列表；

  • CSS参考手册v3.1.0

    Update Time: 2011.10.13

    新增了动画速查表；新增了动画CSS Animations Properties参考；新增了规则@keyframes参考；新增了部分属性的IE10支持；修订了IE9对部分属性的支持问题；修订了一些BUG；补充修订了问题和经验列表；

  • CSS参考手册v3.0.0

    Update Time: 2011.9.16

    重新设计了浏览器支持的呈现方式；新增了更新的浏览器版本支持；新增了浏览器对属性值支持的说明；新增了对CSS3属性和含CSS3属性值的属性的标识；补充修订了问题和经验列表；

  • CSS参考手册v2.1.1

    Update Time: 2011.8.12

    补充修订了问题和经验列表；补充修订了部分缺失和错误的链接；

  • CSS参考手册v2.0.1

    Update Time: 2011.7.2

    新增了问题和经验章节；新增了手册阅读及使用说明；补充修订了对float属性的脚本特性的说明；补充修订了Opera对CSS Gradient Background Maker: linear-gradient(), repeating-linear-gradient()的支持；

  • CSS参考手册v1.3.2

    Update Time: 2011.6.4

    新增了CSS Hack参考；Media Queries参考；更新和完善了@media和@import规则

  • CSS参考手册v1.2.2

    Update Time: 2011.5.21

    更新了IE9对某些属性的兼容性；修复了一些错误的链接地址

  • CSS参考手册v2.0.0（未发布）

    Update Time: 2011.3.17

    手册三版，错误问题修订和演示实例编写，并接着编写未完成的章节

  • CSS参考手册v1.1.0（未发布）

    Update Time: 2011.2.20

    手册再版，修订了很多遗留的问题和错误，并接着编写未完成的章节

  • CSS参考手册v1.0.0（未发布）

    Update Time: 2011.1.22

    手册完成初版，有大量的无效链接和错误，并接着编写未完成的章节


Introduction To CSS

其它简介条目 选择其它项
  • 关于本手册
  • 关于样式表
  • 关于作者
  • 阅读及使用指引
  • 鸣谢
  • 捐赠

Introduction To CSS

  • 层叠样式表简介

说明：

  • 本手册针对的是已有一定网页设计制作经验的读者。其目的是提供最新的样式表内容的快速索引及注释。所以对于样式表的基础知识，在此仅简单介绍，恕不赘述。
  • 本手册的升级信息与版权声明请参阅关于本手册页面。

什么是层叠样式表：

  • CSS是Cascading Style Sheet（层叠样式表）的缩写。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
  • CSS不需要编译,可以直接由浏览器执行(属于浏览器解释型语言)。
  • CSS2.1是目前被使用最广泛的版本，而目前还在开发中的CSS3具有更吸引人的特性。
  • 本手册除了CSS2.1外，还涵盖了大部分的CSS3内容。但由于CSS3尚未定稿，不可避免会出现一些变动。

样式语法：

  • Selector {property:value}

如何将样式表加入您的网页：

你可以用以下三种方式将样式表加入您的网页。而最接近目标的样式定义优先权越高。高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义。例外请参阅!important声明。

  • 内联方式 Inline Styles

    内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。

    示例代码：

    <p style="color:#f00">这一行的字体颜色将显示为红色</p>

  • 内部样式块对象 Embedding a Style Block

    你可以在你的HTML文档的<head>标记里插入一个<style>块对象。

    示例代码：

    <style>
body{background:#fff;color:#000;}
p{font-size:14px;}
</style>

  • 外部样式表 Linking to a Style Sheet

    你可以先建立外部样式表文件*.css，然后使用HTML的link对象。

    示例代码：

    <link rel="stylesheet" href="*.css" />


About The Author Of This CSS Manual

其它简介条目 选择其它项
  • 关于本手册
  • 关于样式表
  • 关于作者
  • 阅读及使用指引
  • 鸣谢
  • 捐赠

About 飘零雾雨

  • 作者简介

基本信息 Basic Information

  • 中文名：杜瑶
  • 英文名：Joy Du
  • 网　名：飘零雾雨
  • 博　客： CSS探索之旅

自述 Intro

  • 精通CSS、HTML、JavaScript等技术。
  • 始终致力于web前端开发技术，关注高性能的web开发。
  • 有丰富的大型门户网站开发经验；熟悉团队项目流程并具备资源调配的能力。

履历 Vita

  • 2010.11 - 至今Achievo（深圳证券交易所部门）
  • 2009.04 - 2010.11Epro(易宝集团)
  • 2008.09 - 2009.04Achievo（Yahoo OSP部门）
  • 2007.09 - 2008.09太平洋网络科技
  • 2006.07 - 2007.09江西青铜文化传媒有限公司

个人站点 My Website

飘雨社区
我的个人门户网站，关注一些有趣的资讯信息。从设计、制作到开发都由我个人完成。
web前端实验室
随手扔一些平时的前端实验示例
CSS参考手册
CSS参考手册，含CSS2及CSS3大部分内容。本手册的内容在一段时间内将持续更新，请密切关注本站并随时获取最新版本。

联系方式 Contact Me

  • 邮箱： dooyoe@gmail.com
  • 电话：15012755326
  • QQ：104589226


The Use Guides Of CSS Manual

其它简介条目 选择其它项
  • 关于本手册
  • 关于样式表
  • 关于作者
  • 阅读及使用指引
  • 鸣谢
  • 捐赠

The Use Guides

  • 阅读及使用指引

手册使用说明 The Instruction

  • 关于本手册一些特定阅读方式的说明
  • 关于本手册存在的一些问题说明及解决方法

阅读指引 The Read Guides

  • 兼容性：

    • 手册在所有参考页的头部和底部都有对浏览器兼容性测试基础环境的说明。如无特别说明，所有文档页均不考虑IE6以下版本。
    • 兼容性表格解读：
      • 浅绿 = 支持
      • 红色 = 不支持
      • 墨绿 = 部分支持
      • 橙色 = 实验性质
      支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
      较早版本 | 6.0-7.0 | 4.0-6.0 | 5.1 | 13.0 | 11.50
      较新版本 | 8.0
      最近版本 | 9.0

      假设上述表格是对某属性x的兼容性说明：那即表示IE6和IE7不支持该属性，IE8对该属性的支持还处在实验性质阶段，IE9及后续版本已支持该属性；Firefox4.0-6.0对该属性的支持还处在实验性质阶段；Safari、Chrome、Opera支持该属性。

      如果是处在“实验性质”状态，则各浏览器的私有写法为：IE加 -ms-；Firefox加 -moz-；Safari和Chrome加 -webkit-；Opera加 -o-

  • 脚本特性：

    • 每个CSS属性参考页所指定的该属性的脚本特性，是指js如何访问该CSS属性。如：float属性的脚本特性为styleFloat或cssFloat，那么js这样写：

      js代码：

      IE：　DOM.style.styleFloat
非IE：DOM.style.cssFloat

  • 示例：

    • 每个CSS参考页的示例都可以点击“运行”按钮，直接查看效果。
    • 目前已知在win7下，本手册的chm版下的示例点击“运行”会出错，在未修复该问题前，如需查看某个示例，请将该示例代码拷贝到本地进行浏览。

问题指引 The Question Guides

  • 在win7下，本手册的chm版下的示例点击“运行”出错

    问题未被修复。在未修复该问题前，如需查看某个示例，请将该示例代码拷贝到本地进行浏览。

  • chm版下载后打开出现网页无法访问的情况

    在chm上右键选择“属性”，勾选最下面的“解除锁定”并应用确定，再次打开就可以了。


Thank You, CSS

其它简介条目 选择其它项
  • 关于本手册
  • 关于样式表
  • 关于作者
  • 阅读及使用指引
  • 鸣谢
  • 捐赠

Thanks

  • 鸣谢

特别鸣谢(排名不分先后)：

  • dh20156(风之石)
  • Laurie
  • JK
  • johnhax
  • FlashSoft
  • mokson
  • keelii
  • cloud
  • xishao
  • wuxiaolan9
  • shaphone
  • 修远兮
  • wgsuxin
  • KennyLuck
  • 貘
  • 周裕波
  • 愚人码头
  • aoao
  • 舒思卫
  • 封凌云

衷心感谢上述朋友对本手册提出的意见和建议，以及发现的Bug，正是有了你们，本手册才会越来越完善。

我也发现了问题，CSS参考手册问题反馈，以上名单大部分来自该列表，如信息不准确，请联系我。


Thank You For The Contribute Of CSS Manual

其它简介条目 选择其它项
  • 关于本手册
  • 关于样式表
  • 关于作者
  • 阅读及使用指引
  • 鸣谢
  • 捐赠

Contribute

  • 捐赠

贡献 Contribute

该手册完全由个人编写和维护，如果手册给您带来了帮助，且您愿意帮助提升手册的更新速度和质量，您可以通过以下方式为手册捐献：

Payment 支付方式 | Account 账户
支付宝 | dooyoe@gmail.com
财付通 | 104589226
姓 名 | 杜瑶
备 注 | 捐赠金额不限

衷心感谢您为CSS参考手册作出的贡献，正是有了您，手册才会越来越完善。


Properties index

CSS参考手册 » 属性列表
其它属性参考 选择其它项
  • 定位(Positioning)
  • 布局(Layout)
  • 弹性盒模型(Flexible Box)
  • 尺寸(Dimension)
  • 外补白(Margin)
  • 内补白(Padding)
  • 边框(Border)
  • 背景(Background)
  • 颜色(Color)
  • 字体(Font)
  • 文本(Text)
  • 列表(List)
  • 表格(Table)
  • 内容(Content)
  • 用户界面(User Interface)
  • 多栏(Multi-column)
  • 2D变换(Transform)
  • 过渡(Transition)
  • 动画(Animation)
  • 打印(Printing)
  • 媒体查询(Media Queries)
  • Only IE
  • Only Firefox

CSS Properties Reference

  • CSS属性集合

定位 Positioning

  • position
  • z-index
  • top
  • right
  • bottom
  • left

布局 Layout

  • display
  • float
  • clear
  • visibility
  • clip
  • overflow
  • overflow-x
  • overflow-y

弹性盒模型 Flexible Box Layout

  • box-orient
  • box-pack
  • box-align
  • box-flex
  • box-flex-group
  • box-ordinal-group
  • box-direction
  • box-lines

尺寸 Dimension

  • width
  • min-width
  • max-width
  • height
  • min-height
  • max-height

外补白 Margin

  • margin
  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

内补白 Padding

  • padding
  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

边框 Border

  • border
  • border-width
  • border-style
  • border-color
  • border-top
  • border-top-width
  • border-top-style
  • border-top-color
  • border-right
  • border-right-width
  • border-right-style
  • border-right-color
  • border-bottom
  • border-bottom-width
  • border-bottom-style
  • border-bottom-color
  • border-left
  • border-left-width
  • border-left-style
  • border-left-color
  • border-image
  • border-radius
  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius
  • box-shadow
  • box-reflect

背景 Background

  • background
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
  • background-origin
  • background-clip
  • background-size
  • Multiple background

颜色 Color

  • color
  • opacity

字体 Font

  • font
  • font-style
  • font-variant
  • font-weight
  • font-size
  • font-family
  • font-stretch

文本 Text

  • text-indent
  • text-overflow
  • text-align
  • text-transform
  • text-decoration
  • text-decoration-line
  • text-decoration-color
  • text-decoration-style
  • text-shadow
  • text-fill-color
  • text-stroke
  • text-stroke-width
  • text-stroke-color
  • letter-spacing
  • word-spacing
  • vertical-align
  • word-wrap
  • white-space
  • direction
  • unicode-bidi
  • line-height
  • tab-size

列表 List

  • list-style
  • list-style-image
  • list-style-position
  • list-style-type

表格 Table

  • table-layout
  • border-collapse
  • border-spacing
  • caption-side
  • empty-cells

内容 Content

  • content
  • counter-increment
  • counter-reset
  • quotes

用户界面 User Interface

  • outline
  • outline-width
  • outline-style
  • outline-color
  • outline-offset
  • nav-index
  • nav-up
  • nav-right
  • nav-down
  • nav-left
  • cursor
  • zoom
  • box-sizing
  • resize
  • ime-mode

多列 Multi-column

  • columns
  • column-width
  • column-count
  • column-gap
  • column-rule
  • column-rule-width
  • column-rule-style
  • column-rule-color
  • column-span
  • column-fill
  • column-break-before
  • column-break-after
  • column-break-inside

转换 Transform

  • transform
  • transform-origin

过渡 Transition

  • transition
  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay

动画 Animation

  • animation
  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-play-state
  • animation-fill-mode

打印 Printing

  • page
  • page-break-before
  • page-break-after
  • page-break-inside

媒体查询 Media Queries

  • width
  • height
  • device-width
  • device-height
  • orientation
  • aspect-ratio
  • device-aspect-ratio
  • color
  • color-index
  • monochrome
  • resolution
  • scan
  • grid

Only IE

  • scrollbar-3dlight-color
  • scrollbar-drakshadow-color
  • scrollbar-highlight-color
  • scrollbar-shadow-color
  • scrollbar-arrow-color
  • scrollbar-face-color
  • scrollbar-track-color
  • scrollbar-base-color
  • filter
  • behavior

Only Firefox

  • border-colors
  • border-top-colors
  • border-right-colors
  • border-bottom-colors
  • border-left-colors

这种颜色 的链接表示是CSS3属性或原属性被CSS3修改并增加了新的属性值


Positioning index

CSS参考手册 » 属性列表 » 定位属性
其它定位属性参考 选择其它项
  • position
  • z-index
  • top
  • right
  • bottom
  • left

CSS Positioning Properties

  • 定位属性

定位 Positioning

Properties 属性 | CSS Version 版本 | Inherit From Parent 继承性 | Description 简介
position | CSS2 | 无 | 检索对象的定位方式
z-index | CSS2 | 无 | 检索或设置对象的层叠顺序
top | CSS2 | 无 | 检索或设置对象与其最近一个定位的父对象顶部相关的位置
right | CSS2 | 无 | 检索或设置对象与其最近一个定位的父对象右边相关的位置
bottom | CSS2 | 无 | 检索或设置对象与其最近一个定位的父对象底边相关的位置
left | CSS2 | 无 | 检索或设置对象与其最近一个定位的父对象左边相关的位置

这种颜色 的链接表示是CSS3属性或原属性被CSS3修改并增加了新的属性值


position

其它定位属性参考 选择其它项
  • position
  • z-index
  • top
  • right
  • bottom
  • left

position

  • 版本：CSS2
  • 继承性：无

语法：

position：static | relative | absolute | fixed

默认值：static

取值：

static：
无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用。
relative：
对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。
absolute：
对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。
fixed：
对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。IE6及以下不支持此参数值

说明：

检索对象的定位方式。
  • 对应的脚本特性为position。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0 #1 | 4.0 | 5.1 | 13.0 | 11.50
较新版本 | 7.0
  1. IE6及更早浏览器不支持position属性的fixed参数值。

示例：


z-index

其它定位属性参考 选择其它项
  • position
  • z-index
  • top
  • right
  • bottom
  • left

z-index

  • 版本：CSS2
  • 继承性：无

语法：

z-index: auto | <integer>

默认值：auto

取值：

auto：
遵从其父对象的定位
<integer>：
用整数值来定义堆叠级别。可以为负值。

说明：

检索或设置对象的层叠顺序。
  • 并级的对象，此属性参数值越大，则被层叠在最上面。
  • 如两个对象的此属性具有同样的值，那么将依据它们在HTML文档中流的顺序层叠，写在后面的将会覆盖前面的。
  • 必须定义position属性值为absolute、relative或fixed，此取值方可生效。
  • 对应的脚本特性为zIndex。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


top

其它定位属性参考 选择其它项
  • position
  • z-index
  • top
  • right
  • bottom
  • left

top

  • 版本：CSS2
  • 继承性：无

语法：

top: <length> | <percentage> | auto

默认值：auto

取值：

auto：
无特殊定位，根据HTML定位规则在文档流中分配
<length>：
用长度值来定义距离顶部的偏移量。可以为负值。
<percentage>：
用百分比来定义距离顶部的偏移量。可以为负值。

说明：

检索或设置对象与其最近一个定位的父对象顶部相关的位置。
  • 必须定义position属性值为absolute、relative或fixed，此取值方可生效。
  • 对应的脚本特性为top。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


right

其它定位属性参考 选择其它项
  • position
  • z-index
  • top
  • right
  • bottom
  • left

right

  • 版本：CSS2
  • 继承性：无

语法：

right：<length> | <percentage> | auto

默认值：auto

取值：

auto：
无特殊定位，根据HTML定位规则在文档流中分配
<length>：
用长度值来定义距离右边的偏移量。可以为负值。
<percentage>：
用百分比来定义距离右边的偏移量。可以为负值。

说明：

检索或设置对象与其最近一个定位的父对象右边相关的位置。
  • 必须定义position属性值为absolute、relative或fixed，此取值方可生效。
  • 对应的脚本特性为right。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


bottom

其它定位属性参考 选择其它项
  • position
  • z-index
  • top
  • right
  • bottom
  • left

bottom

  • 版本：CSS2
  • 继承性：无

语法：

bottom: <length> | <percentage> | auto

默认值：auto

取值：

auto：
无特殊定位，根据HTML定位规则在文档流中分配
<length>：
用长度值来定义距离底部的偏移量。可以为负值。
<percentage>：
用百分比来定义距离底部的偏移量。可以为负值。

说明：

检索或设置对象与其最近一个定位的父对象底边相关的位置。
  • 必须定义position属性值为absolute、relative或fixed，此取值方可生效。
  • 对应的脚本特性为bottom。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


left

其它定位属性参考 选择其它项
  • position
  • z-index
  • top
  • right
  • bottom
  • left

left

  • 版本：CSS2
  • 继承性：无

语法：

left: <length> | <percentage> | auto

默认值：auto

取值：

auto：
无特殊定位，根据HTML定位规则在文档流中分配
<length>：
用长度值来定义距离左边的偏移量。可以为负值。
<percentage>：
用百分比来定义距离左边的偏移量。可以为负值。

说明：

检索或设置对象与其最近一个定位的父对象左边相关的位置。
  • 必须定义position属性值为absolute、relative或fixed，此取值方可生效。
  • 对应的脚本特性为left。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


Layout index

CSS参考手册 » 属性列表 » 布局属性
其它布局属性参考 选择其它项
  • display
  • float
  • clear
  • visibility
  • clip
  • overflow
  • overflow-x
  • overflow-y

CSS Layout Properties

  • 布局属性

布局 Layout

Properties 属性 | CSS Version 版本 | Inherit From Parent 继承性 | Description 简介
display | CSS1/CSS2/CSS3 | 无 | 设置或检索对象是否及如何显示
float | CSS1 | 无 | 该属性的值指出了对象是否及如何浮动。请参阅clear属性
clear | CSS1 | 无 | 该属性的值指出了不允许有浮动对象的边。请参阅float属性
visibility | CSS2 | 无 | 设置或检索是否显示对象。与display属性不同，此属性为隐藏的对象保留其占据的物理空间
clip | CSS2 | 无 | 检索或设置对象的可视区域。区域外的部分是透明的
overflow | CSS2 | 无 | 检索或设置当对象的内容超过其指定高度及宽度时如何管理内容
overflow-x | CSS3 | 无 | 检索或设置当对象的内容超过其指定宽度时如何管理内容
overflow-y | CSS3 | 无 | 检索或设置当对象的内容超过其指定高度时如何管理内容

这种颜色 的链接表示是CSS3属性或原属性被CSS3修改并增加了新的属性值


display

其它布局属性参考 选择其它项
  • display
  • float
  • clear
  • visibility
  • clip
  • overflow
  • overflow-x
  • overflow-y

display

  • 版本：CSS1/CSS2/CSS3
  • 继承性：无

语法：

display：none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group | compact | run-in | ruby | ruby-base | ruby-text | ruby-base-group | ruby-text-group | box | inline-box

取值：

none：
隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间
inline：
指定对象为内联元素。
block：
指定对象为块元素。
list-item：
指定对象为列表项目。
inline-block：
指定对象为内联块元素。（CSS2）
table：
指定对象作为块元素级的表格。类同于html标签<table>（CSS2）
inline-table：
指定对象作为内联元素级的表格。类同于html标签<table>（CSS2）
table-caption：
指定对象作为表格标题。类同于html标签<caption>（CSS2）
table-cell：
指定对象作为表格单元格。类同于html标签<td>（CSS2）
table-row：
指定对象作为表格行。类同于html标签<tr>（CSS2）
table-row-group：
指定对象作为表格行组。类同于html标签<tbody>（CSS2）
table-column：
指定对象作为表格列。类同于html标签<col>（CSS2）
table-column-group：
指定对象作为表格列组显示。类同于html标签<colgroup>（CSS2）
table-header-group：
指定对象作为表格标题组。类同于html标签<thead>（CSS2）
table-footer-group：
指定对象作为表格脚注组。类同于html标签<tfoot>（CSS2）
compact：
分配对象为块对象或基于内容之上的内联对象（CSS3）
run-in：
分配对象为块对象或基于内容之上的内联对象（CSS3）
ruby：
将对象作为表格脚注组显示（CSS3）
ruby-base：
将对象作为表格脚注组显示（CSS3）
ruby-text：
将对象作为表格脚注组显示（CSS3）
ruby-base-group：
将对象作为表格脚注组显示（CSS3）
ruby-text-group：
将对象作为表格脚注组显示（CSS3）
box：
将对象作为弹性盒模型显示（CSS3）
inline-box：
将对象作为内联块级弹性盒模型显示（CSS3）

说明：

设置或检索对象是否及如何显示。
  • IE7及以下浏览器不支持table相关的参数值，如：table, inline-table, table-caption, table-cell, table-row, table-row-group, table-column, table-column-group, table-footer-group, table-header-group
  • 写本文档时尚无浏览器支持ruby相关的参数值，如：ruby, ruby-base, ruby-text, ruby-base-group, ruby-text-group
  • 对应的脚本特性为display。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0-7.0 #1 | 4.0-6.0 #2 | 5.1 #3 | 13.0 #4 | 11.50-11.51 #5
较新版本 | 8.0 #6
最近版本 | 9.0 #7
  1. IE7及更早浏览器只支持none | inline | block | inline-block | list-item参数值。
  2. Firefox4.0-6.0不支持所有的CSS3新增属性值。
  3. Safari5.1不支持CSS3新增属性值：ruby | ruby-base | ruby-text | ruby-base-group | ruby-text-group。
  4. Chrome13.0不支持CSS3新增属性值：ruby | ruby-base | ruby-text | ruby-base-group | ruby-text-group。
  5. Opera10.50-10.51不支持CSS3新增属性值：ruby | ruby-base | ruby-text | ruby-base-group | ruby-text-group | box | inline-box。
  6. IE8不支持CSS3新增属性值：compact | ruby | ruby-base | ruby-text | ruby-base-group | ruby-text-group | box | inline-box。
  7. IE9不支持compact | box | inline-box属性值。

示例：


float

其它布局属性参考 选择其它项
  • display
  • float
  • clear
  • visibility
  • clip
  • overflow
  • overflow-x
  • overflow-y

float

  • 版本：CSS1
  • 继承性：无

语法：

float：none | left | right

默认值： none

取值：

none：
设置对象不浮动
left：
设置对象浮在左边
right：
设置对象浮在右边

说明：

该属性的值指出了对象是否及如何浮动。请参阅clear属性
  • 当该属性不等于none引起对象浮动时，对象将被视作块对象(block-level)，即display属性等于block。也就是说，浮动对象的display特性将被忽略。
  • 该属性可以被应用在非绝对定位的任何元素上。
  • 对应的脚本特性为styleFloat（IE）或cssFloat（非IE）。(注意这里为styleFloat或cssFloat，而不是float)

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


clear

其它布局属性参考 选择其它项
  • display
  • float
  • clear
  • visibility
  • clip
  • overflow
  • overflow-x
  • overflow-y

clear

  • 版本：CSS1
  • 继承性：无

语法：

clear：none | left | right | both

默认值： none

取值：

none：
允许两边都可以有浮动对象
both：
不允许有浮动对象
left：
不允许左边有浮动对象
right：
不允许右边有浮动对象

说明：

该属性的值指出了不允许有浮动对象的边。请参阅float属性
  • 对应的脚本特性为clear。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


visibility

其它布局属性参考 选择其它项
  • display
  • float
  • clear
  • visibility
  • clip
  • overflow
  • overflow-x
  • overflow-y

visibility

  • 版本：CSS2
  • 继承性：无

语法：

visibility：visible | hidden | collapse

默认值：visible

取值：

visible：
设置对象可视
hidden：
设置对象隐藏
collapse：
主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象，其作用等同于hidden。IE6及以下不支持此参数值

说明：

设置或检索是否显示对象。与display属性不同，此属性为隐藏的对象保留其占据的物理空间
  • 如果希望对象为可视，其父对象也必须是可视的。
  • 对应的脚本特性为visibility。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0 #1 | 4.0 | 5.1 | 13.0 | 11.50
较新版本 | 7.0
  1. IE6及更早浏览器不支持visibility属性的collapse参数值。

示例：


clip

其它布局属性参考 选择其它项
  • display
  • float
  • clear
  • visibility
  • clip
  • overflow
  • overflow-x
  • overflow-y

clip

  • 版本：CSS2
  • 继承性：无

语法：

clip：auto | rect(<number>|auto <number>|auto <number>|auto <number>|auto)

默认值：auto

取值：

auto：
对象无剪切
rect(<number>|auto <number>|auto <number>|auto <number>|auto)：
依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值，其中任一数值都可用auto替换，即此边不剪切。

示例：clip:rect(auto 50px 20px auto);

说明：上边不剪切，右边从第50个像素开始剪切直至最右边，下边从第20个像素开始剪切直至最底部，左边不剪切

IE7及以下浏览器只支持rect(<number> <number> <number> <number>)的方式，其它浏览器还支持rect(<number>,<number>,<number>,<number>)加逗号的方式。

说明：

检索或设置对象的可视区域。区域外的部分是透明的。
  • 必须将position的值设为absolute，此属性方可使用。
  • 对应的脚本特性为clip。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0-7.0 #1 | 4.0 | 5.1 | 13.0 | 11.50
较新版本 | 8.0
  1. IE7及更早浏览器只支持rect()内部的数值以空格分隔的方式，不支持以逗号分隔。

示例：


overflow

其它布局属性参考 选择其它项
  • display
  • float
  • clear
  • visibility
  • clip
  • overflow
  • overflow-x
  • overflow-y

overflow

  • 版本：CSS2
  • 继承性：无

语法：

overflow：<overflow-style>{1,2}

<overflow-style> = visible | hidden | scroll | auto

默认值：visible

取值：

visible：
不剪切内容。
hidden：
将超出对象尺寸的内容进行裁剪，将不出现滚动条。
scroll：
将超出对象尺寸的内容进行裁剪，并以滚动条的方式显示超出的内容。
auto：
在需要时剪切内容并添加滚动条，此为body对象和textarea的默认值。

说明：

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。参阅overflow-x、overflow-y属性
  • 对于table来说，假如table-layout属性设置为fixed，则td对象支持带有默认值为hidden的overflow属性。如果设为hidden，scroll或者auto，那么超出td尺寸的内容将被剪切。如果设为visible，将导致额外的文本溢出到右边或左边（视direction属性设置而定）的单元格。
  • 对应的脚本特性为overflow。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


overflow-x

其它布局属性参考 选择其它项
  • display
  • float
  • clear
  • visibility
  • clip
  • overflow
  • overflow-x
  • overflow-y

overflow-x

  • 版本：CSS3
  • 继承性：无

语法：

overflow-x：<overflow-style>

<overflow-style> = visible | hidden | scroll | auto

默认值：visible

取值：

visible：
不剪切内容。
hidden：
将超出对象宽度的内容进行裁剪，将不出现滚动条。
scroll：
将超出对象宽度的内容进行裁剪，并以滚动条的方式显示超出的内容。
auto：
在需要时剪切内容并添加滚动条，此为body对象和textarea的默认值。

说明：

检索或设置当对象的内容超过其指定宽度时如何管理内容。参阅overflow、overflow-y属性
  • 对应的脚本特性为overflowX。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


overflow-y

其它布局属性参考 选择其它项
  • display
  • float
  • clear
  • visibility
  • clip
  • overflow
  • overflow-x
  • overflow-y

overflow-y

  • 版本：CSS3
  • 继承性：无

语法：

overflow-y：<overflow-style>

<overflow-style> = visible | hidden | scroll | auto

默认值：visible

取值：

visible：
不剪切内容。
hidden：
将超出对象高度的内容进行裁剪，将不出现滚动条。
scroll：
将超出对象高度的内容进行裁剪，并以滚动条的方式显示超出的内容。
auto：
在需要时剪切内容并添加滚动条，此为body对象和textarea的默认值。

说明：

检索或设置当对象的内容超过其指定高度时如何管理内容。参阅overflow、overflow-x属性
  • 对应的脚本特性为overflowY。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


CSS3 Flexible Box Layout Module index

CSS参考手册 » 属性列表 » 弹性盒模型属性
弹性盒模型属性参考 选择其它项
  • box-orient
  • box-pack
  • box-align
  • box-flex
  • box-flex-group
  • box-ordinal-group
  • box-direction
  • box-lines

CSS Flexible Box Layout Properties

  • 弹性盒模型属性

弹性盒模型 Flexible Box Layout

Properties 属性 | CSS Version 版本 | Inherit From Parent 继承性 | Description 简介
box-orient | CSS3 | 无 | 设置或检索弹性盒模型对象的子元素的排列方式。
box-pack | CSS3 | 无 | 设置或检索弹性盒模型对象的子元素的对齐方式。请参阅box-align兄弟属性
box-align | CSS3 | 无 | 设置或检索弹性盒模型对象的子元素的对齐方式。请参阅box-pack兄弟属性
box-flex | CSS3 | 无 | 设置或检索弹性盒模型对象的子元素如何分配其剩余空间。
box-flex-group | CSS3 | 无 | 设置或检索弹性盒模型对象的子元素的所属组。
box-ordinal-group | CSS3 | 无 | 设置或检索弹性盒模型对象的子元素的显示顺序。
box-direction | CSS3 | 无 | 设置或检索弹性盒模型对象的子元素的排列顺序是否反转。
box-lines | CSS3 | 无 | 设置或检索弹性盒模型对象的子元素是否可以换行显示。

这种颜色 的链接表示是CSS3属性或原属性被CSS3修改并增加了新的属性值。

要使得弹性盒模型属性生效，需先定义display的参数值为box或inline-box。

根据最新的w3c文档，Flexible Box Layout属性可能都要被修改


box-orient

弹性盒模型属性参考 选择其它项
  • box-orient
  • box-pack
  • box-align
  • box-flex
  • box-flex-group
  • box-ordinal-group
  • box-direction
  • box-lines

box-orient

  • 版本：CSS3
  • 继承性：无

语法：

box-orient：horizontal | vertical

默认值：horizontal

取值：

horizontal：
设置弹性盒模型对象的子元素为水平排列
vertical：
设置弹性盒模型对象的子元素为纵向排列

说明：

设置或检索弹性盒模型对象的子元素的排列方式。
  • 对应的脚本特性为boxOrient。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0-9.0 | 4.0-9.0 | 5.1 | 13.0-16.0 | 11.50-11.60
较新版本 | 10.0

示例：


box-pack

弹性盒模型属性参考 选择其它项
  • box-orient
  • box-pack
  • box-align
  • box-flex
  • box-flex-group
  • box-ordinal-group
  • box-direction
  • box-lines

box-pack

  • 版本：CSS3
  • 继承性：无

语法：

box-pack：start | center | end | justify

默认值：start

取值：

start：
设置弹性盒模型对象的子元素从开始位置对齐（大部分情况等同于左对齐）
center：
设置弹性盒模型对象的子元素居中对齐
end：
设置弹性盒模型对象的子元素从结束位置对齐（大部分情况等同于右对齐）
justify：
设置或弹性盒模型对象的子元素两端对齐

说明：

设置或检索弹性盒模型对象的子元素的对齐方式。查看其兄弟属性box-align，两者的效果正好（相反）互补
  • box-pack的对齐方式受box-orient影响；
  • 默认情况下（即box-orient设置为horizontal）start和end所呈现的效果等同于左对齐和右对齐；
  • 当box-orient设置为vertical时，start和end所呈现的效果等同于顶部对齐和底部对齐；
  • 对应的脚本特性为boxPack。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0-9.0 | 4.0-9.0 #1 | 5.1 | 13.0-16.0 | 11.50-11.60
较新版本 | 10.0
  1. Firefox4.0-9.0不支持box-pack的justify属性值。

示例：


box-align

弹性盒模型属性参考 选择其它项
  • box-orient
  • box-pack
  • box-align
  • box-flex
  • box-flex-group
  • box-ordinal-group
  • box-direction
  • box-lines

box-align

  • 版本：CSS3
  • 继承性：无

语法：

box-align：start | end | center | baseline | stretch

默认值：stretch

取值：

start：
设置弹性盒模型对象的子元素从开始位置对齐
center：
设置弹性盒模型对象的子元素居中对齐
end：
设置弹性盒模型对象的子元素从结束位置对齐
baseline：
设置弹性盒模型对象的子元素基线对齐
stretch：
设置弹性盒模型对象的子元素自适应父元素尺寸

说明：

设置或检索弹性盒模型对象的子元素的对齐方式。查看其兄弟属性box-pack，两者的效果正好（相反）互补
  • box-align的对齐方式受box-orient影响；
  • 默认情况下（即box-orient设置为horizontal）start和end所呈现的效果等同于顶部对齐和底部对齐；
  • 当box-orient设置为vertical时，start和end所呈现的效果等同于左对齐和右对齐；
  • 对应的脚本特性为boxAlign。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0-9.0 | 4.0-9.0 | 5.1 | 13.0-16.0 | 11.50-11.60
较新版本 | 10.0

示例：


box-flex

弹性盒模型属性参考 选择其它项
  • box-orient
  • box-pack
  • box-align
  • box-flex
  • box-flex-group
  • box-ordinal-group
  • box-direction
  • box-lines

box-flex

  • 版本：CSS3
  • 继承性：无

语法：

box-flex：<number>

默认值：0

取值：

<number>：
使用浮点数指定对象所分配其父元素剩余空间的比例。

说明：

设置或检索弹性盒模型对象的子元素如何分配其剩余空间。
  • 示例：将一个容器分成6份，子对象a分1份，b分2份，c分3份

    HTML Code：

    <ul id="box">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

    CSS Code：

    #box{display:box;width:240px;height:100px;margin:0;padding:10px;list-style:none;}
#box li:nth-child(1){box-flex:1;}
#box li:nth-child(2){box-flex:1;}
#box li:nth-child(3){box-flex:2;}

    上面代码请自行加上-moz-,-webkit-之类的。box-flex生效需定义其父元素display为box或inline-box

  • 误区：注意box-flex只是动态分配父元素的剩余空间，而不是整个父元素的空间。如上例，父元素#box的宽度为240px，如果你认为a,b,c的宽度分别为60, 60, 120那么就错了，因为box-flex只是分配父元素的剩余空间而已，所以a,b,c所分到的应该是除内容外所剩余下来的宽度
  • 为了清晰所谓的剩余空间分配，对上例稍作修改，HTML Code不变

    CSS Code：

    #box{display:box;width:240px;height:100px;margin:0;padding:10px;list-style:none;}
.box li{width:50px;padding:7px;}
#box li:nth-child(1){box-flex:1;}
#box li:nth-child(2){box-flex:1;}
#box li:nth-child(3){box-flex:2;}

    从上面的代码，我们可以知道a,b,c的宽度分别为50+7*2=64px，三者加起来即192px，所以剩下的240-192=48px才是父元素的剩余空间，于是a,b,c按照设定的1:1:2来分配这48px，a分得12px，b分得12px，c分得24px，所以最终a=64+12=76px，b=64+12=76px，c=64+24=88px

  • 对应的脚本特性为boxFlex。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0-9.0 | 4.0-9.0 | 5.1 | 13.0-16.0 | 11.50-11.60
较新版本 | 10.0

示例：


box-flex-group

弹性盒模型属性参考 选择其它项
  • box-orient
  • box-pack
  • box-align
  • box-flex
  • box-flex-group
  • box-ordinal-group
  • box-direction
  • box-lines

box-flex-group

  • 版本：CSS3
  • 继承性：无

语法：

box-flex-group：<integer>

默认值：1

取值：

<integer>：
用整数值来定义弹性盒模型对象的子元素所在的组。

说明：

设置或检索弹性盒模型对象的子元素的所属组。
  • 动态给数值较大的组分配其内容所需的实际空间（如无内容、padding、border则不占空间），剩余空间则均分给数值最小的那个组（可能有1个或多个元素）
  • 对应的脚本特性为boxFlexGroup。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0-9.0 | 4.0-9.0 | 5.1 | 13.0-16.0 | 11.50-11.60
较新版本 | 10.0

示例：


box-ordinal-group

弹性盒模型属性参考 选择其它项
  • box-orient
  • box-pack
  • box-align
  • box-flex
  • box-flex-group
  • box-ordinal-group
  • box-direction
  • box-lines

box-ordinal-group

  • 版本：CSS3
  • 继承性：无

语法：

box-ordinal-group：<integer>

默认值：1

取值：

<integer>：
用整数值来定义弹性盒模型对象的子元素显示顺序。

说明：

设置或检索弹性盒模型对象的子元素的显示顺序。
  • 数值较低的元素显示在数值较高的元素前面；
  • 相同数值的元素，它们的显示顺序取决于它们的代码顺序；
  • 对应的脚本特性为boxOrdinalGroup。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0-9.0 | 4.0-9.0 | 5.1 | 13.0-16.0 | 11.50-11.60
较新版本 | 10.0

示例：


box-direction

弹性盒模型属性参考 选择其它项
  • box-orient
  • box-pack
  • box-align
  • box-flex
  • box-flex-group
  • box-ordinal-group
  • box-direction
  • box-lines

box-direction

  • 版本：CSS3
  • 继承性：无

语法：

box-direction：normal | reverse

默认值：normal

取值：

normal：
设置弹性盒模型对象的子元素按正常顺序排列
reverse：
反转弹性盒模型对象的子元素的排列顺序

说明：

设置或检索弹性盒模型对象的子元素的排列顺序是否反转。
  • Firefox设置box-direction为reverse时，在将元素的排列顺序反转的同时也将元素的对齐方式逆转了；Safari和Chrome则只是反转元素排列顺序
  • 对应的脚本特性为boxDirection。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0-9.0 | 4.0-9.0 | 5.1 | 13.0-16.0 | 11.50-11.60
较新版本 | 10.0

示例：


box-lines

弹性盒模型属性参考 选择其它项
  • box-orient
  • box-pack
  • box-align
  • box-flex
  • box-flex-group
  • box-ordinal-group
  • box-direction
  • box-lines

box-lines

  • 版本：CSS3
  • 继承性：无

语法：

box-lines：single | multiple

默认值：single

取值：

single：
弹性盒模型对象的子元素只在一行内显示
multiple：
弹性盒模型对象的子元素超出父元素的空间时换行显示

说明：

设置或检索弹性盒模型对象的子元素是否可以换行显示。
  • Safari和Chrome已经支持box-lines，但没有实现该属性的效果
  • 对应的脚本特性为boxLines。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0-9.0 | 4.0-9.0 | 5.1 | 13.0-16.0 | 11.50-11.60
较新版本 | 10.0

示例：


Dimension index

CSS参考手册 » 属性列表 » 尺寸属性
其它尺寸属性参考 选择其它项
  • width
  • min-width
  • max-width
  • height
  • min-height
  • max-height

CSS Dimension Properties

  • 尺寸属性

尺寸 Dimension

Properties 属性 | CSS Version 版本 | Inherit From Parent 继承性 | Description 简介
width | CSS1 | 无 | 检索或设置对象的宽度
min-width | CSS2 | 无 | 设置或检索对象的最小宽度
max-width | CSS2 | 无 | 设置或检索对象的最大宽度
height | CSS1 | 无 | 检索或设置对象的高度
min-height | CSS2 | 无 | 设置或检索对象的最小高度
max-height | CSS2 | 无 | 设置或检索对象的最大高度

这种颜色 的链接表示是CSS3属性或原属性被CSS3修改并增加了新的属性值


width

其它尺寸属性参考 选择其它项
  • width
  • min-width
  • max-width
  • height
  • min-height
  • max-height

width

  • 版本：CSS1
  • 继承性：无

语法：

width：<length> | <percentage> | auto

默认值： auto

取值：

auto：
无特定宽度值，取决于其它属性值
<length>：
用长度值来定义宽度。不允许负值
<percentage>：
用百分比来定义宽度。不允许负值

说明：

检索或设置对象的宽度。
  • 对于img对象来说，仅指定此属性，其height值将根据图片源尺寸等比例缩放。
  • 对于盒模型规则，请参阅box-sizing属性。
  • 对应的脚本特性为width。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


min-width

其它尺寸属性参考 选择其它项
  • width
  • min-width
  • max-width
  • height
  • min-height
  • max-height

min-width

  • 版本：CSS2
  • 继承性：无

语法：

min-width：<length> | <percentage>

默认值：0

取值：

<length>：
用长度值来定义最小宽度。不允许负值
<percentage>：
用百分比来定义最小宽度。不允许负值

说明：

设置或检索对象的最小宽度。
  • 如果min-width属性的值大于max-width属性的值，max-width将会自动以min-width的值作为自己的值。
  • IE6尚不支持此属性
  • 对应的脚本特性为minWidth。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50
较新版本 | 7.0

示例：


max-width

其它尺寸属性参考 选择其它项
  • width
  • min-width
  • max-width
  • height
  • min-height
  • max-height

max-width

  • 版本：CSS2
  • 继承性：无

语法：

max-width：<length> | <percentage> | none

默认值：none

取值：

none：
无最大宽度限制
<length>：
用长度值来定义最大宽度。不允许负值
<percentage>：
用百分比来定义最大宽度。不允许负值

说明：

设置或检索对象的最大宽度。
  • 如果max-width属性的值小于min-width属性的值，max-width将会自动以min-width的值作为自己的值。
  • IE6尚不支持此属性
  • 对应的脚本特性为maxWidth。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50
较新版本 | 7.0

示例：


height

其它尺寸属性参考 选择其它项
  • width
  • min-width
  • max-width
  • height
  • min-height
  • max-height

height

  • 版本：CSS1
  • 继承性：无

语法：

height：<length> | <percentage> | auto

默认值： auto

取值：

auto：
无特定高度值，取决于其它属性值
<length>：
用长度值来定义高度。不允许负值
<percentage>：
用百分比来定义高度。不允许负值

说明：

检索或设置对象的高度。
  • 对于img对象来说，仅指定此属性，其width值将根据图片源尺寸等比例缩放。
  • 对于盒模型规则，请参阅box-sizing属性。
  • 对应的脚本特性为height。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


min-height

其它尺寸属性参考 选择其它项
  • width
  • min-width
  • max-width
  • height
  • min-height
  • max-height

min-height

  • 版本：CSS2
  • 继承性：无

语法：

min-height：<length> | <percentage>

默认值：0

取值：

<length>：
用长度值来定义最小高度。不允许负值
<percentage>：
用百分比来定义最小高度。不允许负值

说明：

检索或设置对象的最小高度。
  • 如果min-height属性的值大于max-height属性的值，max-height将会自动以min-height的值作为自己的值。
  • IE6尚不支持此属性。IE6的变通实现方法请参与CSS探索之旅的相关文章。
  • 对应的脚本特性为minHeight。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50
较新版本 | 7.0

示例：


max-height

其它尺寸属性参考 选择其它项
  • width
  • min-width
  • max-width
  • height
  • min-height
  • max-height

max-height

  • 版本：CSS2
  • 继承性：无

语法：

max-height：<length> | <percentage> | none

默认值：none

取值：

none：
无最小高度限制
<length>：
用长度值来定义最大高度。不允许负值
<percentage>：
用百分比来定义最大高度。不允许负值

说明：

检索或设置对象的最大高度。
  • 如果max-height属性的值小于min-height属性的值，max-height将会自动以min-height的值作为自己的值。
  • IE6尚不支持此属性
  • 对应的脚本特性为maxHeight。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50
较新版本 | 7.0

示例：


Margin index

CSS参考手册 » 属性列表 » 外补白属性
其它外补白属性参考 选择其它项
  • margin
  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

CSS Margin Properties

  • 外补白属性

外补白 Margin

Properties 属性 | CSS Version 版本 | Inherit From Parent 继承性 | Description 简介
margin | CSS1 | 无 | 检索或设置对象四边的外延边距
margin-top | CSS1 | 无 | 检索或设置对象顶边的外延边距
margin-right | CSS1 | 无 | 检索或设置对象右边的外延边距
margin-bottom | CSS1 | 无 | 检索或设置对象底边的外延边距
margin-left | CSS1 | 无 | 检索或设置对象左边的外延边距

这种颜色 的链接表示是CSS3属性或原属性被CSS3修改并增加了新的属性值


margin

  • 版本：CSS1
  • 继承性：无

语法：

margin：[ <length> | <percentage> | auto ]{1,4}

默认值：看每个独立属性

相关属性：[ margin-top ] || [ margin-right ] || [ margin-bottom ] || [ margin-left ]

取值：

auto：
值被设置为相对边的值
<length>：
用长度值来定义外补白。可以为负值
<percentage>：
用百分比来定义外补白。可以为负值

说明：

检索或设置对象四边的外延边距。
  • 如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
  • 如果只提供一个，将用于全部的四边。
  • 如果提供两个，第一个用于上、下，第二个用于左、右。
  • 如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。
  • 内联对象可以使用该属性设置左、右两边的外补丁；若要设置上、下两边的外补丁，必须先使该对象表现为块级或内联块级。
  • 外延边距始终透明。
  • 对应的脚本特性为margin。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


margin-top

  • 版本：CSS1
  • 继承性：无

语法：

margin-top：[ <length> | <percentage> | auto ]{1,4}

默认值： 0

相关属性：[ margin ] || [ margin-right ] || [ margin-bottom ] || [ margin-left ]

取值：

auto：
值被设置为相对边的值
<length>：
用长度值来定义外补白。可以为负值
<percentage>：
用百分比来定义外补白。可以为负值

说明：

检索或设置对象顶边的外延边距。
  • 内联对象要使用该属性必须先使该对象表现为块级或内联块级。
  • 外延边距始终透明。
  • 对应的脚本特性为marginTop。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


margin-right

  • 版本：CSS1
  • 继承性：无

语法：

margin-right：[ <length> | <percentage> | auto ]{1,4}

默认值： 0

相关属性：[ margin ] || [ margin-top ] || [ margin-bottom ] || [ margin-left ]

取值：

auto：
值被设置为相对边的值
<length>：
用长度值来定义外补白。可以为负值
<percentage>：
用百分比来定义外补白。可以为负值

说明：

检索或设置对象右边的外延边距。
  • 内联对象可以使用该属性设置右边距。
  • 外延边距始终透明。
  • 对应的脚本特性为marginRight。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


margin-bottom

  • 版本：CSS1
  • 继承性：无

语法：

margin-bottom：[ <length> | <percentage> | auto ]{1,4}

默认值： 0

相关属性：[ margin ] || [ margin-top ] || [ margin-right ] || [ margin-left ]

取值：

auto：
值被设置为相对边的值
<length>：
用长度值来定义外补白。可以为负值
<percentage>：
用百分比来定义外补白。可以为负值

说明：

检索或设置对象底边的外延边距。
  • 内联对象要使用该属性必须先使该对象表现为块级或内联块级。
  • 外延边距始终透明。
  • 对应的脚本特性为marginBottom。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


margin-left

  • 版本：CSS1
  • 继承性：无

语法：

margin-left：[ <length> | <percentage> | auto ]{1,4}

默认值： 0

相关属性：[ margin ] || [ margin-top ] || [ margin-right ] || [ margin-bottom ]

取值：

auto：
值被设置为相对边的值
<length>：
用长度值来定义外补白。可以为负值
<percentage>：
用百分比来定义外补白。可以为负值

说明：

检索或设置对象左边的外延边距。
  • 内联对象可以使用该属性设置左边距。
  • 外延边距始终透明。
  • 对应的脚本特性为marginLeft。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


Padding index

CSS参考手册 » 属性列表 » 内补白属性
其它内补白属性参考 选择其它项
  • padding
  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

CSS Padding Properties

  • 内补白属性

内补白 Padding

Properties 属性 | CSS Version 版本 | Inherit From Parent 继承性 | Description 简介
padding | CSS1 | 无 | 检索或设置对象四边的内部边距
padding-top | CSS1 | 无 | 检索或设置对象顶边的内部边距
padding-right | CSS1 | 无 | 检索或设置对象右边的内部边距
padding-bottom | CSS1 | 无 | 检索或设置对象底边的内部边距
padding-left | CSS1 | 无 | 检索或设置对象左边的内部边距

这种颜色 的链接表示是CSS3属性或原属性被CSS3修改并增加了新的属性值


padding

  • 版本：CSS1
  • 继承性：无

语法：

padding：[ <length> | <percentage> ]{1,4}

默认值：看每个独立属性

相关属性：[ padding-top ] || [ padding-right ] || [ padding-bottom ] || [ padding-left ]

取值：

<length>：
用长度值来定义内补白。不允许负值
<percentage>：
用百分比来定义内补白。不允许负值

说明：

检索或设置对象四边的内部边距。
  • 如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
  • 如果只提供一个，将用于全部的四边。
  • 如果提供两个，第一个用于上、下，第二个用于左、右。
  • 如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。
  • 内联对象可以使用该属性设置左、右两边的内补丁；若要设置上、下两边的内补丁，必须先使该对象表现为块级或内联块级。
  • 对应的脚本特性为padding。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


padding-top

  • 版本：CSS1
  • 继承性：无

语法：

padding-top：[ <length> | <percentage> ]{1,4}

默认值： 0

相关属性：[ padding ] || [ padding-right ] || [ padding-bottom ] || [ padding-left ]

取值：

<length>：
用长度值来定义内补白。不允许负值
<percentage>：
用百分比来定义内补白。不允许负值

说明：

检索或设置对象顶边的内补白。
  • 内联对象要使用该属性必须先使该对象表现为块级或内联块级。
  • 对应的脚本特性为paddingTop。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


padding-right

  • 版本：CSS1
  • 继承性：无

语法：

padding-right：[ <length> | <percentage> ]{1,4}

默认值： 0

相关属性：[ padding ] || [ padding-top ] || [ padding-bottom ] || [ padding-left ]

取值：

<length>：
用长度值来定义内补白。不允许负值
<percentage>：
用百分比来定义内补白。不允许负值

说明：

检索或设置对象右边的内补白。
  • 内联对象可以使用该属性设置内补白。
  • 对应的脚本特性为paddingRight。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


padding-bottom

  • 版本：CSS1
  • 继承性：无

语法：

padding-bottom：[ <length> | <percentage> ]{1,4}

默认值： 0

相关属性：[ padding ] || [ padding-top ] || [ padding-right ] || [ padding-left ]

取值：

<length>：
用长度值来定义内补白。不允许负值
<percentage>：
用百分比来定义内补白。不允许负值

说明：

检索或设置对象底边的内补白。
  • 内联对象要使用该属性必须先使该对象表现为块级或内联块级。
  • 对应的脚本特性为paddingBottom。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


padding-left

  • 版本：CSS1
  • 继承性：无

语法：

padding-left：[ <length> | <percentage> ]{1,4}

默认值： 0

相关属性：[ padding ] || [ padding-top ] || [ padding-right ] || [ padding-bottom ]

取值：

<length>：
用长度值来定义内补白。不允许负值
<percentage>：
用百分比来定义内补白。不允许负值

说明：

检索或设置对象左边的内补白。
  • 内联对象可以使用该属性设置左边内补白。
  • 对应的脚本特性为paddingLeft。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


Border index

CSS参考手册 » 属性列表 » 边框属性
其它边框属性参考 选择其它项
  • border
  • border-width
  • border-style
  • border-color
  • border-top
  • border-top-width
  • border-top-style
  • border-top-color
  • border-right
  • border-right-width
  • border-right-style
  • border-right-color
  • border-bottom
  • border-bottom-width
  • border-bottom-style
  • border-bottom-color
  • border-left
  • border-left-width
  • border-left-style
  • border-left-color
  • border-image
  • border-radius
  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius
  • box-shadow
  • box-reflect

CSS Border Properties

  • 边框属性

边框 Border

Properties 属性 | CSS Version 版本 | Inherit From Parent 继承性 | Description 简介
border | CSS1 | 无 | 复合属性。设置对象边框的特性
border-width | CSS1 | 无 | 设置或检索对象边框宽度
border-style | CSS1 | 无 | 设置或检索对象边框样式
border-color | CSS1 | 无 | 设置或检索对象边框颜色
border-top | CSS1 | 无 | 复合属性。设置对象顶边的特性
border-top-width | CSS1 | 无 | 设置或检索对象顶边宽度
border-top-style | CSS1 | 无 | 设置或检索对象顶边样式
border-top-color | CSS1 | 无 | 设置或检索对象顶边颜色
border-right | CSS1 | 无 | 复合属性。设置对象右边的特性
border-right-width | CSS1 | 无 | 设置或检索对象右边宽度
border-right-style | CSS1 | 无 | 设置或检索对象右边样式
border-right-color | CSS1 | 无 | 设置或检索对象右边颜色
border-bottom | CSS1 | 无 | 复合属性。设置对象底边的特性
border-bottom-width | CSS1 | 无 | 设置或检索对象底边宽度
border-bottom-style | CSS1 | 无 | 设置或检索对象底边样式
border-bottom-color | CSS1 | 无 | 设置或检索对象底边颜色
border-left | CSS1 | 无 | 复合属性。置对象左边的特性
border-left-width | CSS1 | 无 | 设置或检索对象左边宽度
border-left-style | CSS1 | 无 | 设置或检索对象左边样式
border-left-color | CSS1 | 无 | 设置或检索对象左边颜色
border-image | CSS3 | 无 | 设置或检索对象的边框使用图像来填充
border-radius | CSS3 | 无 | 设置或检索对象使用圆角边框
border-top-left-radius | CSS3 | 无 | 设置或检索对象左上角圆角边框
border-top-right-radius | CSS3 | 无 | 设置或检索对象右上角圆角边框
border-bottom-right-radius | CSS3 | 无 | 设置或检索对象右下角圆角边框
border-bottom-left-radius | CSS3 | 无 | 设置或检索对象左下角圆角边框
box-shadow | CSS3 | 无 | 设置或检索对象阴影
box-reflect | CSS3 | 无 | 设置或检索对象的倒影

这种颜色 的链接表示是CSS3属性或原属性被CSS3修改并增加了新的属性值


border

其它边框属性参考 选择其它项
  • border
  • border-width
  • border-style
  • border-color
  • border-top
  • border-top-width
  • border-top-style
  • border-top-color
  • border-right
  • border-right-width
  • border-right-style
  • border-right-color
  • border-bottom
  • border-bottom-width
  • border-bottom-style
  • border-bottom-color
  • border-left
  • border-left-width
  • border-left-style
  • border-left-color
  • border-image
  • border-radius
  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius
  • box-shadow
  • box-reflect

border

  • 版本：CSS1
  • 继承性：无

语法：

border：[ border-width ] || [ border-style ] || [ border-color ]

默认值：看每个独立属性

相关属性：[ border-top ] || [ border-right ] || [ border-bottom ] || [ border-left ]

取值：

[ border-width ]：
设置或检索对象边框宽度。
[ border-style ]：
设置或检索对象边框样式。
[ border-color ]：
设置或检索对象边框颜色。

说明：

复合属性。设置对象边框的特性。参阅outline属性。
  • 如使用该复合属性定义其单个参数，则其他参数的默认值将无条件覆盖各自对应的单个属性设置。
  • 对应的脚本特性为border。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


border-width

其它边框属性参考 选择其它项
  • border
  • border-width
  • border-style
  • border-color
  • border-top
  • border-top-width
  • border-top-style
  • border-top-color
  • border-right
  • border-right-width
  • border-right-style
  • border-right-color
  • border-bottom
  • border-bottom-width
  • border-bottom-style
  • border-bottom-color
  • border-left
  • border-left-width
  • border-left-style
  • border-left-color
  • border-image
  • border-radius
  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius
  • box-shadow
  • box-reflect

border-width

  • 版本：CSS1
  • 继承性：无

语法：

border-width：<border-width>{1,4}

<border-width> = <length> | thin | medium | thick

默认值：看每个独立属性

相关属性：[ border-top-width ] || [ border-right-width ] || [ border-bottom-width ] || [ border-left-width ]

取值：

<length>：
用长度值来定义边框的厚度。不允许负值
medium：
定义默认厚度的边框。
thin：
定义比默认厚度细的边框。
thick：
定义比默认厚度粗的边框。

说明：

设置或检索对象的边框宽度。
  • 如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
  • 如果只提供一个，将用于全部的四边。
  • 如果提供两个，第一个用于上、下，第二个用于左、右。
  • 如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。
  • 如果border-style设置为none，本属性将失去作用。
  • 对应的脚本特性为borderWidth。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


border-style

其它边框属性参考 选择其它项
  • border
  • border-width
  • border-style
  • border-color
  • border-top
  • border-top-width
  • border-top-style
  • border-top-color
  • border-right
  • border-right-width
  • border-right-style
  • border-right-color
  • border-bottom
  • border-bottom-width
  • border-bottom-style
  • border-bottom-color
  • border-left
  • border-left-width
  • border-left-style
  • border-left-color
  • border-image
  • border-radius
  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius
  • box-shadow
  • box-reflect

border-style

  • 版本：CSS1
  • 继承性：无

语法：

border-style：<border-style>{1,4}

<border-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

默认值：看每个独立属性

相关属性：[ border-top-style ] || [ border-right-style ] || [ border-bottom-style ] || [ border-left-style ]

取值：

none：
无轮廓。border-color与border-width将被忽略
hidden：
隐藏边框。IE7及以下尚不支持
dotted：
点状轮廓。IE6下显示为dashed效果
dashed：
虚线轮廓。
solid：
实线轮廓
double：
双线轮廓。两条单线与其间隔的和等于指定的border-width值
groove：
3D凹槽轮廓。
ridge：
3D凸槽轮廓。
inset：
3D凹边轮廓。
outset：
3D凸边轮廓。

说明：

设置或检索对象的边框样式。
  • 如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
  • 如果只提供一个，将用于全部的四边。
  • 如果提供两个，第一个用于上、下，第二个用于左、右。
  • 如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。
  • 如果border-width等于0，本属性将失去作用。
  • 对应的脚本特性为borderStyle。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0 #1 | 4.0 | 5.1 | 13.0 | 11.50
较新版本 | 7.0 #2
最近版本 | 8.0
  1. IE6及更早浏览器不支持hidden属性值，且会将dotted属性值显示为dashed的效果。
  2. IE7及更早浏览器不支持hidden属性值。

示例：


border-color

其它边框属性参考 选择其它项
  • border
  • border-width
  • border-style
  • border-color
  • border-top
  • border-top-width
  • border-top-style
  • border-top-color
  • border-right
  • border-right-width
  • border-right-style
  • border-right-color
  • border-bottom
  • border-bottom-width
  • border-bottom-style
  • border-bottom-color
  • border-left
  • border-left-width
  • border-left-style
  • border-left-color
  • border-image
  • border-radius
  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius
  • box-shadow
  • box-reflect

border-color

  • 版本：CSS1
  • 继承性：无

语法：

border-color：<color>{1,4}

默认值：看每个独立属性

相关属性：[ border-top-color ] || [ border-right-color ] || [ border-bottom-color ] || [ border-left-color ]

取值：

<color>：
指定颜色。

说明：

设置或检索对象的边框颜色。参阅border-colors属性。
  • 如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
  • 如果只提供一个，将用于全部的四边。
  • 如果提供两个，第一个用于上、下，第二个用于左、右。
  • 如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。
  • 如果border-width等于0或border-style设置为none，本属性将被忽略。
  • 对应的脚本特性为borderColor。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


border-top

其它边框属性参考 选择其它项
  • border
  • border-width
  • border-style
  • border-color
  • border-top
  • border-top-width
  • border-top-style
  • border-top-color
  • border-right
  • border-right-width
  • border-right-style
  • border-right-color
  • border-bottom
  • border-bottom-width
  • border-bottom-style
  • border-bottom-color
  • border-left
  • border-left-width
  • border-left-style
  • border-left-color
  • border-image
  • border-radius
  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius
  • box-shadow
  • box-reflect

border-top

  • 版本：CSS1
  • 继承性：无

语法：

border-top：[ border-top-width ] || [ border-top-style ] || [ border-top-color ]

默认值：看每个独立属性

相关属性：[ border ] || [ border-right ] || [ border-bottom ] || [ border-left ]

取值：

[ border-top-width ]：
设置或检索对象的顶部边框宽度。
[ border-top-style ]：
设置或检索对象的顶部边框样式。
[ border-top-color ]：
设置或检索对象的顶部边框颜色。

说明：

复合属性。设置对象顶部边框的特性。参阅border属性。
  • 如使用该复合属性定义其单个参数，则其他参数的默认值将无条件覆盖各自对应的单个属性设置。
  • 对应的脚本特性为borderTop。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


border-top-width

其它边框属性参考 选择其它项
  • border
  • border-width
  • border-style
  • border-color
  • border-top
  • border-top-width
  • border-top-style
  • border-top-color
  • border-right
  • border-right-width
  • border-right-style
  • border-right-color
  • border-bottom
  • border-bottom-width
  • border-bottom-style
  • border-bottom-color
  • border-left
  • border-left-width
  • border-left-style
  • border-left-color
  • border-image
  • border-radius
  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius
  • box-shadow
  • box-reflect

border-top-width

  • 版本：CSS1
  • 继承性：无

语法：

border-top-width：<border-width>

<border-width> = <length> | thin | medium | thick

默认值：medium

相关属性：[ border-width ] || [ border-right-width ] || [ border-bottom-width ] || [ border-left-width ]

取值：

<length>：
用长度值来定义边框的厚度。不允许负值
medium：
定义默认厚度的边框。
thin：
定义比默认厚度细的边框。
thick：
定义比默认厚度粗的边框。

说明：

设置或检索对象的顶部边框宽度。
  • 如果border-style设置为none，本属性将失去作用。
  • 对应的脚本特性为borderTopWidth。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


border-top-style

其它边框属性参考 选择其它项
  • border
  • border-width
  • border-style
  • border-color
  • border-top
  • border-top-width
  • border-top-style
  • border-top-color
  • border-right
  • border-right-width
  • border-right-style
  • border-right-color
  • border-bottom
  • border-bottom-width
  • border-bottom-style
  • border-bottom-color
  • border-left
  • border-left-width
  • border-left-style
  • border-left-color
  • border-image
  • border-radius
  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius
  • box-shadow
  • box-reflect

border-top-style

  • 版本：CSS1
  • 继承性：无

语法：

border-top-style：<border-style>

<border-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

默认值：none

相关属性：[ border-style ] || [ border-right-style ] || [ border-bottom-style ] || [ border-left-style ]

取值：

none：
无轮廓。border-color与border-width将被忽略
hidden：
隐藏边框。IE7及以下尚不支持
dotted：
点状轮廓。IE6下显示为dashed效果
dashed：
虚线轮廓。
solid：
实线轮廓
double：
双线轮廓。两条单线与其间隔的和等于指定的border-width值
groove：
3D凹槽轮廓。
ridge：
3D凸槽轮廓。
inset：
3D凹边轮廓。
outset：
3D凸边轮廓。

说明：

设置或检索对象的顶部边框样式。
  • 如果border-width等于0，本属性将失去作用。
  • 对应的脚本特性为borderTopStyle。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0 #1 | 4.0 | 5.1 | 13.0 | 11.50
较新版本 | 7.0 #2
最近版本 | 8.0
  1. IE6及更早浏览器不支持hidden属性值，且会将dotted属性值显示为dashed的效果。
  2. IE7及更早浏览器不支持hidden属性值。

示例：


border-top-color

其它边框属性参考 选择其它项
  • border
  • border-width
  • border-style
  • border-color
  • border-top
  • border-top-width
  • border-top-style
  • border-top-color
  • border-right
  • border-right-width
  • border-right-style
  • border-right-color
  • border-bottom
  • border-bottom-width
  • border-bottom-style
  • border-bottom-color
  • border-left
  • border-left-width
  • border-left-style
  • border-left-color
  • border-image
  • border-radius
  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius
  • box-shadow
  • box-reflect

border-top-color

  • 版本：CSS1
  • 继承性：无

语法：

border-top-color：<color>

默认值：采用文本颜色

相关属性：[ border-color ] || [ border-right-color ] || [ border-bottom-color ] || [ border-left-color ]

取值：

<color>：
指定颜色。

说明：

设置或检索对象的顶部边框颜色。参阅border-top-colors属性。
  • 如果border-width等于0或border-style设置为none，本属性将被忽略。
  • 对应的脚本特性为borderTopColor。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


border-right

其它边框属性参考 选择其它项
  • border
  • border-width
  • border-style
  • border-color
  • border-top
  • border-top-width
  • border-top-style
  • border-top-color
  • border-right
  • border-right-width
  • border-right-style
  • border-right-color
  • border-bottom
  • border-bottom-width
  • border-bottom-style
  • border-bottom-color
  • border-left
  • border-left-width
  • border-left-style
  • border-left-color
  • border-image
  • border-radius
  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius
  • box-shadow
  • box-reflect

border-right

  • 版本：CSS1
  • 继承性：无

语法：

border-right：[ border-right-width ] || [ border-right-style ] || [ border-right-color ]

默认值：看每个独立属性

相关属性：[ border ] || [ border-top ] || [ border-bottom ] || [ border-left ]

取值：

[ border-right-width ]：
设置或检索对象的右边边框宽度。
[ border-right-style ]：
设置或检索对象的右边边框样式。
[ border-right-color ]：
设置或检索对象的右边边框颜色。

说明：

复合属性。设置对象右边边框的特性。参阅border属性。
  • 如使用该复合属性定义其单个参数，则其他参数的默认值将无条件覆盖各自对应的单个属性设置。
  • 对应的脚本特性为borderRight。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


border-right-width

其它边框属性参考 选择其它项
  • border
  • border-width
  • border-style
  • border-color
  • border-top
  • border-top-width
  • border-top-style
  • border-top-color
  • border-right
  • border-right-width
  • border-right-style
  • border-right-color
  • border-bottom
  • border-bottom-width
  • border-bottom-style
  • border-bottom-color
  • border-left
  • border-left-width
  • border-left-style
  • border-left-color
  • border-image
  • border-radius
  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius
  • box-shadow
  • box-reflect

border-right-width

  • 版本：CSS1
  • 继承性：无

语法：

border-right-width：<border-width>

<border-width> = <length> | thin | medium | thick

默认值：medium

相关属性：[ border-width ] || [ border-top-width ] || [ border-bottom-width ] || [ border-left-width ]

取值：

<length>：
用长度值来定义边框的厚度。不允许负值
medium：
定义默认厚度的边框。
thin：
定义比默认厚度细的边框。
thick：
定义比默认厚度粗的边框。

说明：

设置或检索对象的右边边框宽度。
  • 如果border-style设置为none，本属性将失去作用。
  • 对应的脚本特性为borderRightWidth。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


border-right-style

其它边框属性参考 选择其它项
  • border
  • border-width
  • border-style
  • border-color
  • border-top
  • border-top-width
  • border-top-style
  • border-top-color
  • border-right
  • border-right-width
  • border-right-style
  • border-right-color
  • border-bottom
  • border-bottom-width
  • border-bottom-style
  • border-bottom-color
  • border-left
  • border-left-width
  • border-left-style
  • border-left-color
  • border-image
  • border-radius
  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius
  • box-shadow
  • box-reflect

border-right-style

  • 版本：CSS1
  • 继承性：无

语法：

border-right-style：<border-style>

<border-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

默认值： none

相关属性：[ border-style ] || [ border-top-style ] || [ border-bottom-style ] || [ border-left-style ]

取值：

none：
无轮廓。border-color与border-width将被忽略
hidden：
隐藏边框。IE7及以下尚不支持
dotted：
点状轮廓。IE6下显示为dashed效果
dashed：
虚线轮廓。
solid：
实线轮廓
double：
双线轮廓。两条单线与其间隔的和等于指定的border-width值
groove：
3D凹槽轮廓。
ridge：
3D凸槽轮廓。
inset：
3D凹边轮廓。
outset：
3D凸边轮廓。

说明：

设置或检索对象的右边边框样式。
  • 如果border-width等于0，本属性将失去作用。
  • 对应的脚本特性为borderRightStyle。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0 #1 | 4.0 | 5.1 | 13.0 | 11.50
较新版本 | 7.0 #2
最近版本 | 8.0
  1. IE6及更早浏览器不支持hidden属性值，且会将dotted属性值显示为dashed的效果。
  2. IE7及更早浏览器不支持hidden属性值。

示例：


border-right-color

其它边框属性参考 选择其它项
  • border
  • border-width
  • border-style
  • border-color
  • border-top
  • border-top-width
  • border-top-style
  • border-top-color
  • border-right
  • border-right-width
  • border-right-style
  • border-right-color
  • border-bottom
  • border-bottom-width
  • border-bottom-style
  • border-bottom-color
  • border-left
  • border-left-width
  • border-left-style
  • border-left-color
  • border-image
  • border-radius
  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius
  • box-shadow
  • box-reflect

border-right-color

  • 版本：CSS1
  • 继承性：无

语法：

border-right-color：<color>

默认值：采用文本颜色

相关属性：[ border-color ] || [ border-top-color ] || [ border-bottom-color ] || [ border-left-color ]

取值：

<color>：
指定颜色。

说明：

设置或检索对象的右边边框颜色。参阅border-right-colors属性。
  • 如果border-width等于0或border-style设置为none，本属性将被忽略。
  • 对应的脚本特性为borderRightColor。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


border-bottom

其它边框属性参考 选择其它项
  • border
  • border-width
  • border-style
  • border-color
  • border-top
  • border-top-width
  • border-top-style
  • border-top-color
  • border-right
  • border-right-width
  • border-right-style
  • border-right-color
  • border-bottom
  • border-bottom-width
  • border-bottom-style
  • border-bottom-color
  • border-left
  • border-left-width
  • border-left-style
  • border-left-color
  • border-image
  • border-radius
  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius
  • box-shadow
  • box-reflect

border-bottom

  • 版本：CSS1
  • 继承性：无

语法：

border-bottom：[ border-bottom-width ] || [ border-bottom-style ] || [ border-bottom-color ]

默认值：看每个独立属性

相关属性：[ border ] || [ border-top ] || [ border-right ] || [ border-left ]

取值：

[ border-bottom-width ]：
设置或检索对象的底部边框宽度。
[ border-bottom-style ]：
设置或检索对象的底部边框样式。
[ border-bottom-color ]：
设置或检索对象的底部边框颜色。

说明：

复合属性。设置对象底部边框的特性。参阅border属性。
  • 如使用该复合属性定义其单个参数，则其他参数的默认值将无条件覆盖各自对应的单个属性设置。
  • 对应的脚本特性为borderBottom。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


border-bottom-width

其它边框属性参考 选择其它项
  • border
  • border-width
  • border-style
  • border-color
  • border-top
  • border-top-width
  • border-top-style
  • border-top-color
  • border-right
  • border-right-width
  • border-right-style
  • border-right-color
  • border-bottom
  • border-bottom-width
  • border-bottom-style
  • border-bottom-color
  • border-left
  • border-left-width
  • border-left-style
  • border-left-color
  • border-image
  • border-radius
  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius
  • box-shadow
  • box-reflect

border-bottom-width

  • 版本：CSS1
  • 继承性：无

语法：

border-bottom-width：<border-width>

<border-width> = <length> | thin | medium | thick

默认值：medium

相关属性：[ border-width ] || [ border-top-width ] || [ border-right-width ] || [ border-left-width ]

取值：

<length>：
用长度值来定义边框的厚度。不允许负值
medium：
定义默认厚度的边框。
thin：
定义比默认厚度细的边框。
thick：
定义比默认厚度粗的边框。

说明：

设置或检索对象的底部边框宽度。
  • 如果border-style设置为none，本属性将失去作用。
  • 对应的脚本特性为borderBottomWidth。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


border-bottom-style

其它边框属性参考 选择其它项
  • border
  • border-width
  • border-style
  • border-color
  • border-top
  • border-top-width
  • border-top-style
  • border-top-color
  • border-right
  • border-right-width
  • border-right-style
  • border-right-color
  • border-bottom
  • border-bottom-width
  • border-bottom-style
  • border-bottom-color
  • border-left
  • border-left-width
  • border-left-style
  • border-left-color
  • border-image
  • border-radius
  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius
  • box-shadow
  • box-reflect

border-bottom-style

  • 版本：CSS1
  • 继承性：无

语法：

border-bottom-style：<border-style>

<border-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

默认值： none

相关属性：[ border-style ] || [ border-top-style ] || [ border-right-style ] || [ border-left-style ]

取值：

none：
无轮廓。border-color与border-width将被忽略
hidden：
隐藏边框。IE7及以下尚不支持
dotted：
点状轮廓。IE6下显示为dashed效果
dashed：
虚线轮廓。
solid：
实线轮廓
double：
双线轮廓。两条单线与其间隔的和等于指定的border-width值
groove：
3D凹槽轮廓。
ridge：
3D凸槽轮廓。
inset：
3D凹边轮廓。
outset：
3D凸边轮廓。

说明：

设置或检索对象的底部边框样式。
  • 如果border-width等于0，本属性将失去作用。
  • 对应的脚本特性为borderBottomStyle。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0 #1 | 4.0 | 5.1 | 13.0 | 11.50
较新版本 | 7.0 #2
最近版本 | 8.0
  1. IE6及更早浏览器不支持hidden属性值，且会将dotted属性值显示为dashed的效果。
  2. IE7及更早浏览器不支持hidden属性值。

示例：


border-bottom-color

其它边框属性参考 选择其它项
  • border
  • border-width
  • border-style
  • border-color
  • border-top
  • border-top-width
  • border-top-style
  • border-top-color
  • border-right
  • border-right-width
  • border-right-style
  • border-right-color
  • border-bottom
  • border-bottom-width
  • border-bottom-style
  • border-bottom-color
  • border-left
  • border-left-width
  • border-left-style
  • border-left-color
  • border-image
  • border-radius
  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius
  • box-shadow
  • box-reflect

border-bottom-color

  • 版本：CSS1
  • 继承性：无

语法：

border-bottom-color：<color>

默认值：采用文本颜色

相关属性：[ border-color ] || [ border-top-color ] || [ border-right-color ] || [ border-left-color ]

取值：

<color>：
指定颜色。

说明：

设置或检索对象的底部边框颜色。参阅border-bottom-colors属性。
  • 如果border-width等于0或border-style设置为none，本属性将被忽略。
  • 对应的脚本特性为borderBottomColor。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


border-left

其它边框属性参考 选择其它项
  • border
  • border-width
  • border-style
  • border-color
  • border-top
  • border-top-width
  • border-top-style
  • border-top-color
  • border-right
  • border-right-width
  • border-right-style
  • border-right-color
  • border-bottom
  • border-bottom-width
  • border-bottom-style
  • border-bottom-color
  • border-left
  • border-left-width
  • border-left-style
  • border-left-color
  • border-image
  • border-radius
  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius
  • box-shadow
  • box-reflect

border-left

  • 版本：CSS1
  • 继承性：无

语法：

border-left：[ border-left-width ] || [ border-left-style ] || [ border-left-color ]

默认值：看每个独立属性

相关属性：[ border ] || [ border-top ] || [ border-right ] || [ border-bottom ]

取值：

[ border-left-width ]：
设置或检索对象的左边边框宽度。
[ border-left-style ]：
设置或检索对象的左边边框样式。
[ border-left-color ]：
设置或检索对象的左边边框颜色。

说明：

复合属性。设置对象左边边框的特性。参阅border属性。
  • 如使用该复合属性定义其单个参数，则其他参数的默认值将无条件覆盖各自对应的单个属性设置。
  • 对应的脚本特性为borderLeft。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


border-left-width

其它边框属性参考 选择其它项
  • border
  • border-width
  • border-style
  • border-color
  • border-top
  • border-top-width
  • border-top-style
  • border-top-color
  • border-right
  • border-right-width
  • border-right-style
  • border-right-color
  • border-bottom
  • border-bottom-width
  • border-bottom-style
  • border-bottom-color
  • border-left
  • border-left-width
  • border-left-style
  • border-left-color
  • border-image
  • border-radius
  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius
  • box-shadow
  • box-reflect

border-left-width

  • 版本：CSS1
  • 继承性：无

语法：

border-left-width：<border-width>

<border-width> = <length> | thin | medium | thick

默认值：medium

相关属性：[ border-width ] || [ border-top-width ] || [ border-right-width ] || [ border-bottom-width ]

取值：

<length>：
用长度值来定义边框的厚度。不允许负值
medium：
定义默认厚度的边框。
thin：
定义比默认厚度细的边框。
thick：
定义比默认厚度粗的边框。

说明：

设置或检索对象的左边边框宽度。
  • 如果border-style设置为none，本属性将失去作用。
  • 对应的脚本特性为borderLeftWidth。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


border-left-style

其它边框属性参考 选择其它项
  • border
  • border-width
  • border-style
  • border-color
  • border-top
  • border-top-width
  • border-top-style
  • border-top-color
  • border-right
  • border-right-width
  • border-right-style
  • border-right-color
  • border-bottom
  • border-bottom-width
  • border-bottom-style
  • border-bottom-color
  • border-left
  • border-left-width
  • border-left-style
  • border-left-color
  • border-image
  • border-radius
  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius
  • box-shadow
  • box-reflect

border-left-style

  • 版本：CSS1
  • 继承性：无

语法：

border-left-style：<border-style>

<border-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

默认值： none

相关属性：[ border-style ] || [ border-top-style ] || [ border-right-style ] || [ border-bottom-style ]

取值：

none：
无轮廓。border-color与border-width将被忽略
hidden：
隐藏边框。IE7及以下尚不支持
dotted：
点状轮廓。IE6下显示为dashed效果
dashed：
虚线轮廓。
solid：
实线轮廓
double：
双线轮廓。两条单线与其间隔的和等于指定的border-width值
groove：
3D凹槽轮廓。
ridge：
3D凸槽轮廓。
inset：
3D凹边轮廓。
outset：
3D凸边轮廓。

说明：

设置或检索对象的左边边框样式。
  • 如果border-width等于0，本属性将失去作用。
  • 对应的脚本特性为borderLeftStyle。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0 #1 | 4.0 | 5.1 | 13.0 | 11.50
较新版本 | 7.0 #2
最近版本 | 8.0
  1. IE6及更早浏览器不支持hidden属性值，且会将dotted属性值显示为dashed的效果。
  2. IE7及更早浏览器不支持hidden属性值。

示例：


border-left-color

其它边框属性参考 选择其它项
  • border
  • border-width
  • border-style
  • border-color
  • border-top
  • border-top-width
  • border-top-style
  • border-top-color
  • border-right
  • border-right-width
  • border-right-style
  • border-right-color
  • border-bottom
  • border-bottom-width
  • border-bottom-style
  • border-bottom-color
  • border-left
  • border-left-width
  • border-left-style
  • border-left-color
  • border-image
  • border-radius
  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius
  • box-shadow
  • box-reflect

border-left-color

  • 版本：CSS1
  • 继承性：无

语法：

border-left-color：<color>

默认值：采用文本颜色

相关属性：[ border-color ] || [ border-top-color ] || [ border-right-color ] || [ border-bottom-color ]

取值：

<color>：
指定颜色。

说明：

设置或检索对象的左边边框颜色。参阅border-left-colors属性。
  • 如果border-width等于0或border-style设置为none，本属性将被忽略。
  • 对应的脚本特性为borderLeftColor。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


border-image

其它边框属性参考 选择其它项
  • border
  • border-width
  • border-style
  • border-color
  • border-top
  • border-top-width
  • border-top-style
  • border-top-color
  • border-right
  • border-right-width
  • border-right-style
  • border-right-color
  • border-bottom
  • border-bottom-width
  • border-bottom-style
  • border-bottom-color
  • border-left
  • border-left-width
  • border-left-style
  • border-left-color
  • border-image
  • border-radius
  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius
  • box-shadow
  • box-reflect

border-image

  • 版本：CSS3
  • 继承性：无

语法：

border-image：<border-image-source> || <border-image-slice> [ / <border-image-width>? [ / <border-image-outset> ]? ]? || <border-image-repeat>

为了方便理解border-image的取值，可将border-image理解成由以下5个伪属性组成：

  • border-image-source : none | <url>

    默认值：none

    该属性用于指定是否用图像定义边框样式或图像来源路径。

  • border-image-slice : [ <number> | <percentage> ]{1,4} && fill?

    默认值：100%

    该属性用于指定对边框背景图的分割方式

    写本文档时尚无浏览器支持参数值 fill 关键字

  • border-image-width : [ <length> | <percentage> | <number> | auto ]{1,4}

    默认值：1

    该属性用于指定边框宽度。该属性可省略，由外部的border-width来定义

    写本文档时所有浏览器只支持<length>类型的参数值

    也可以省略此属性，在外部用border-width属性来设置该值

  • border-image-outset : [ <length> | <number> ]{1,4}

    默认值：0

    该属性用于指定对边框背景图的扩展

    写本文档时尚无浏览器支持该属性

  • border-image-repeat : [ stretch | repeat | round | space ]{1,2}

    默认值：stretch

    该属性用于指定边框背景图的填充方式。可定义0-2个参数值，即水平和垂直方向。如果2个值相同，可合并成1个，表示水平和垂直方向都用相同的方式填充边框背景图；如果2个值都为stretch，则可省略不写。

    写本文档时Opera尚不支持该属性，但却默认使用了stretch的效果

取值：

none：
无背景图片。
<url>：
使用绝对或相对地址指定图像。
<number>：
用浮点数指定宽度。不允许负值。
<percentage>：
用百分比指定宽度。不允许负值。
<length>：
用长度值指定宽度。不允许负值。
stretch：
指定用拉伸方式来填充边框背景图。
repeat：
指定用平铺方式来填充边框背景图。当图片碰到边界时，如果超过则被截断。
round：
指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框。写本文档时仅Firefox能看到该效果

说明：

设置或检索对象的边框样式使用图像来填充。
  • 使用图像替代border-style去定义边框样式。当border-image为none或图像不可见时，将会显示border-style所定义的边框样式效果。
  • 对应的脚本特性为borderImage。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-10.0 | 4.0-9.0 | 5.1 | 13.0-16.0 | 11.50-11.60

写法：

内核类型 | 写法(border-image)
Webkit(Chrome/Safari) | -webkit-border-image
Gecko(Firefox) | -moz-border-image
Presto(Opera) | -o-border-image
Trident(IE) |

示例：


border-radius

其它边框属性参考 选择其它项
  • border
  • border-width
  • border-style
  • border-color
  • border-top
  • border-top-width
  • border-top-style
  • border-top-color
  • border-right
  • border-right-width
  • border-right-style
  • border-right-color
  • border-bottom
  • border-bottom-width
  • border-bottom-style
  • border-bottom-color
  • border-left
  • border-left-width
  • border-left-style
  • border-left-color
  • border-image
  • border-radius
  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius
  • box-shadow
  • box-reflect

border-radius

  • 版本：CSS3
  • 继承性：无

语法：

border-radius：[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

默认值：0

取值：

<length>：
用长度值设置对象的圆角半径长度。不允许负值
<percentage>：
用百分比设置对象的圆角半径长度。不允许负值

说明：

设置或检索对象使用圆角边框。提供2个参数，2个参数以“/”分隔，每个参数允许设置1~4个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数
  • 水平半径：如果提供全部四个参数值，将按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序作用于四个角。
  • 如果只提供一个，将用于全部的于四个角。
  • 如果提供两个，第一个用于上左(top-left)、下右(bottom-right)，第二个用于上右(top-right)、下左(bottom-left)。
  • 如果提供三个，第一个用于上左(top-left)，第二个用于上右(top-right)、下左(bottom-left)，第三个用于下右(bottom-right)。
  • 垂直半径也遵循以上4点。
  • 对应的脚本特性为borderRadius。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0-8.0 | 4.0 | 5.1 | 13.0 | 11.50
较新版本 | 9.0

示例：


border-top-left-radius

其它边框属性参考 选择其它项
  • border
  • border-width
  • border-style
  • border-color
  • border-top
  • border-top-width
  • border-top-style
  • border-top-color
  • border-right
  • border-right-width
  • border-right-style
  • border-right-color
  • border-bottom
  • border-bottom-width
  • border-bottom-style
  • border-bottom-color
  • border-left
  • border-left-width
  • border-left-style
  • border-left-color
  • border-image
  • border-radius
  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius
  • box-shadow
  • box-reflect

border-top-left-radius

  • 版本：CSS3
  • 继承性：无

语法：

border-top-left-radius：[ <length> | <percentage> ] [ <length> | <percentage> ]?

默认值：0

取值：

<length>：
用长度值设置对象的左上角(top-left)圆角半径长度。不允许负值
<percentage>：
用百分比设置对象的左上角(top-left)圆角半径长度。不允许负值

说明：

设置或检索对象的左上角圆角边框。提供2个参数，2个参数以空格分隔，每个参数允许设置1个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数
  • 如设置border-top-left-radius:5px 10px;表示top-left这个角的水平圆角半径为5px，垂直圆角半径为10px。
  • 对应的脚本特性为borderTopLeftRadius。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0-8.0 | 4.0 | 5.1 | 13.0 | 11.50
较新版本 | 9.0

示例：


border-top-right-radius

其它边框属性参考 选择其它项
  • border
  • border-width
  • border-style
  • border-color
  • border-top
  • border-top-width
  • border-top-style
  • border-top-color
  • border-right
  • border-right-width
  • border-right-style
  • border-right-color
  • border-bottom
  • border-bottom-width
  • border-bottom-style
  • border-bottom-color
  • border-left
  • border-left-width
  • border-left-style
  • border-left-color
  • border-image
  • border-radius
  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius
  • box-shadow
  • box-reflect

border-top-right-radius

  • 版本：CSS3
  • 继承性：无

语法：

border-top-right-radius：[ <length> | <percentage> ] [ <length> | <percentage> ]?

默认值：0

取值：

<length>：
用长度值设置对象的右上角(top-right)圆角半径长度。不允许负值
<percentage>：
用百分比设置对象的右上角(top-right)圆角半径长度。不允许负值

说明：

设置或检索对象的右上角圆角边框。提供2个参数，2个参数以空格分隔，每个参数允许设置1个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数
  • 如设置border-top-right-radius:5px 10px;表示top-right这个角的水平圆角半径为5px，垂直圆角半径为10px。
  • 对应的脚本特性为borderTopRightRadius。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0-8.0 | 4.0 | 5.1 | 13.0 | 11.50
较新版本 | 9.0

示例：


border-bottom-right-radius

其它边框属性参考 选择其它项
  • border
  • border-width
  • border-style
  • border-color
  • border-top
  • border-top-width
  • border-top-style
  • border-top-color
  • border-right
  • border-right-width
  • border-right-style
  • border-right-color
  • border-bottom
  • border-bottom-width
  • border-bottom-style
  • border-bottom-color
  • border-left
  • border-left-width
  • border-left-style
  • border-left-color
  • border-image
  • border-radius
  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius
  • box-shadow
  • box-reflect

border-bottom-right-radius

  • 版本：CSS3
  • 继承性：无

语法：

border-bottom-right-radius：[ <length> | <percentage> ] [ <length> | <percentage> ]?

默认值：0

取值：

<length>：
用长度值设置对象的右下角(bottom-right)圆角半径长度。不允许负值
<percentage>：
用百分比设置对象的右下角(bottom-right)圆角半径长度。不允许负值

说明：

设置或检索对象的右下角圆角边框。提供2个参数，2个参数以空格分隔，每个参数允许设置1个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数
  • 如设置border-bottom-right-radius:5px 10px;表示bottom-right这个角的水平圆角半径为5px，垂直圆角半径为10px。
  • 对应的脚本特性为borderBottomRightRadius。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0-8.0 | 4.0 | 5.1 | 13.0 | 11.50
较新版本 | 9.0

示例：


border-bottom-left-radius

其它边框属性参考 选择其它项
  • border
  • border-width
  • border-style
  • border-color
  • border-top
  • border-top-width
  • border-top-style
  • border-top-color
  • border-right
  • border-right-width
  • border-right-style
  • border-right-color
  • border-bottom
  • border-bottom-width
  • border-bottom-style
  • border-bottom-color
  • border-left
  • border-left-width
  • border-left-style
  • border-left-color
  • border-image
  • border-radius
  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius
  • box-shadow
  • box-reflect

border-bottom-left-radius

  • 版本：CSS3
  • 继承性：无

语法：

border-bottom-left-radius：[ <length> | <percentage> ] [ <length> | <percentage> ]?

默认值：0

取值：

<length>：
用长度值设置对象的左下角(bottom-left)圆角半径长度。不允许负值
<percentage>：
用百分比设置对象的左下角(bottom-left)圆角半径长度。不允许负值

说明：

设置或检索对象的左下角圆角边框。提供2个参数，2个参数以空格分隔，每个参数允许设置1个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数
  • 如设置border-bottom-left-radius:5px 10px;表示bottom-left这个角的水平圆角半径为5px，垂直圆角半径为10px。
  • 对应的脚本特性为borderBottomLeftRadius。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0-8.0 | 4.0 | 5.1 | 13.0 | 11.50
较新版本 | 9.0

示例：


box-shadow

其它边框属性参考 选择其它项
  • border
  • border-width
  • border-style
  • border-color
  • border-top
  • border-top-width
  • border-top-style
  • border-top-color
  • border-right
  • border-right-width
  • border-right-style
  • border-right-color
  • border-bottom
  • border-bottom-width
  • border-bottom-style
  • border-bottom-color
  • border-left
  • border-left-width
  • border-left-style
  • border-left-color
  • border-image
  • border-radius
  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius
  • box-shadow
  • box-reflect

box-shadow

  • 版本：CSS3
  • 继承性：无

语法：

box-shadow：none | <shadow> [ , <shadow> ]*

<shadow> = inset? && [ <length>{2,4} && <color>? ]

默认值： none

取值：

none：
无阴影
<length>①：
第1个长度值用来设置对象的阴影水平偏移值。可以为负值
<length>②：
第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
<length>③：
如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
<length>④：
如果提供了第4个长度值则用来设置对象的阴影外延值。不允许负值
<color>：
设置对象的阴影的颜色。
inset：
设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影

说明：

设置或检索对象阴影。参阅text-shadow属性
  • 可以设定多组效果，每组参数值以逗号分隔。
  • 对应的脚本特性为boxShadow。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0-8.0 | 4.0 | 5.1 | 13.0 | 11.50
较新版本 | 9.0

示例：


box-reflect

其它边框属性参考 选择其它项
  • border
  • border-width
  • border-style
  • border-color
  • border-top
  • border-top-width
  • border-top-style
  • border-top-color
  • border-right
  • border-right-width
  • border-right-style
  • border-right-color
  • border-bottom
  • border-bottom-width
  • border-bottom-style
  • border-bottom-color
  • border-left
  • border-left-width
  • border-left-style
  • border-left-color
  • border-image
  • border-radius
  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius
  • box-shadow
  • box-reflect

box-reflect

  • 版本：CSS3
  • 继承性：无

语法：

box-reflect：none | <direction> <offset>? <mask-box-image>?

<direction> = above | below | left | right

<offset> = <length> | <percentage>

<mask-box-image> = none | <url> | <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient>

默认值：none

取值：

none：
无倒影

<direction>　Demo: 简单图片倒影 See with Webkit

above：
指定倒影在对象的上边
below：
指定倒影在对象的下边
left：
指定倒影在对象的左边
right：
指定倒影在对象的右边

<offset>　Demo: 图片与倒影间隔 See with Webkit

<length>：
用长度值来定义倒影与对象之间的间隔。可以为负值
<percentage>：
用百分比来定义倒影与对象之间的间隔。可以为负值

<mask-box-image>　Demo: 更真实的图片倒影 文字倒影与渐变 See with Webkit

none：
无遮罩图像
<url>：
使用绝对或相对地址指定遮罩图像。
<linear-gradient>：
使用线性渐变创建遮罩图像。
<radial-gradient>：
使用径向(放射性)渐变创建遮罩图像。
<repeating-linear-gradient>：
使用重复的线性渐变创建背遮罩像。
<repeating-radial-gradient>：
使用重复的径向(放射性)渐变创建遮罩图像。

说明：

设置或检索对象倒影。
  • 对应的脚本特性为boxReflect。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-10.0 | 4.0-9.0 | 5.1 | 13.0 | 11.50-11.60

示例：


Background index

CSS参考手册 » 属性列表 » 背景属性
其它背景属性参考 选择其它项
  • background
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
  • background-origin
  • background-clip
  • background-size
  • Multiple background

CSS Background Properties

  • 背景属性

背景 Background

Properties 属性 | CSS Version 版本 | Inherit From Parent 继承性 | Description 简介
background | CSS1 | 无 | 复合属性。设置或检索对象的背景特性
background-color | CSS1 | 无 | 设置或检索对象的背景颜色
background-image | CSS1/CSS3 | 无 | 设置或检索对象的背景图像
background-repeat | CSS1/CSS3 | 无 | 设置或检索对象的背景图像如何铺排填充
background-attachment | CSS1/CSS3 | 无 | 设置或检索对象的背景图像是随对象内容滚动还是固定的
background-position | CSS1/CSS3 | 无 | 设置或检索对象的背景图像位置
background-origin | CSS3 | 无 | 设置或检索对象的背景图像显示的原点
background-clip | CSS3 | 无 | 检索或设置对象的背景向外裁剪的区域
background-size | CSS3 | 无 | 检索或设置对象的背景图像的尺寸大小
Multiple background | CSS3 | 无 | 检索或设置对象的多重背景图像

这种颜色 的链接表示是CSS3属性或原属性被CSS3修改并增加了新的属性值


background

其它背景属性参考 选择其它项
  • background
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
  • background-origin
  • background-clip
  • background-size
  • Multiple background

background

  • 版本：CSS1
  • 继承性：无

语法：

background：[ background-color ] || [ background-image ] || [ background-repeat ] || [ background-attachment ] || [ background-position ]

默认值：看每个独立属性

相关属性：[ background-origin ] || [ background-clip ] || [ background-size ]

取值：

[ background-color ]：
指定对象的背景颜色。
[ background-image ]：
指定对象的背景图像。可以是真实图片路径或使用渐变创建的“背景图像”
[ background-repeat ]：
指定对象的背景图像如何铺排填充。
[ background-attachment ]：
指定对象的背景图像是随对象内容滚动还是固定的。
[ background-position ]：
指定对象的背景图像位置。
[ background-origin ]：
指定对象的背景图像显示的原点。
[ background-clip ]：
指定对象的背景图像向外裁剪的区域。
[ background-size ]：
指定对象的背景图像的尺寸大小。

说明：

复合属性。设置对象的背景特性。
  • 如使用该复合属性定义其单个参数，则其他参数的默认值将无条件覆盖各自对应的单个属性设置。
  • 对应的脚本特性为background。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


background-color

其它背景属性参考 选择其它项
  • background
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
  • background-origin
  • background-clip
  • background-size
  • Multiple background

background-color

  • 版本：CSS1
  • 继承性：无

语法：

background-color：<color>

默认值：transparent

取值：

<color>：
指定颜色。

说明：

设置或检索对象的背景颜色。
  • 当同时定义了背景颜色和背景图像时，背景图像覆盖在背景颜色之上。
  • 如果设置了background-image，同时也建议作者设置background-color用于当背景图像不可见时保持与文本一定的对比。
  • 对应的脚本特性为backgroundColor。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


background-image

其它背景属性参考 选择其它项
  • background
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
  • background-origin
  • background-clip
  • background-size
  • Multiple background

background-image

  • 版本：CSS1/CSS3
  • 继承性：无

语法：

background-image：<bg-image> [ , <bg-image> ]*

<bg-image> = none | <url> | <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient>

默认值：none

取值：

none：
无背景图。
<url>：
使用绝对或相对地址指定背景图像。
<linear-gradient>：
使用线性渐变创建背景图像。（CSS3）
<radial-gradient>：
使用径向(放射性)渐变创建背景图像。（CSS3）
<repeating-linear-gradient>：
使用重复的线性渐变创建背景图像。（CSS3）
<repeating-radial-gradient>：
使用重复的径向(放射性)渐变创建背景图像。（CSS3）

说明：

设置或检索对象的背景图像。
  • 如果设置了background-image，同时也建议作者设置background-color用于当背景图像不可见时保持与文本一定的对比。
  • 对应的脚本特性为backgroundImage。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-8.0 #1 | 4.0 | 5.1 | 13.0 | 11.50-11.51 #3
版本 | 9.0 #2
版本 | 10.0 |  |  |  | 11.60
  1. IE8及更早浏览器不支持CSS3 background-image，即不支持多背景和使用渐变作为背景图像。
  2. IE9不支持CSS3新增参数值：<linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient>作为背景图像。
  3. Opera11.50-11.51不支持CSS3新增参数值：<radial-gradient> | <repeating-radial-gradient>作为背景图像。

示例：


background-repeat

其它背景属性参考 选择其它项
  • background
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
  • background-origin
  • background-clip
  • background-size
  • Multiple background

background-repeat

  • 版本：CSS1/CSS3
  • 继承性：无

语法：

background-repeat：<repeat-style> [ , <repeat-style> ]*

<repeat-style> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}

默认值：repeat

取值：

repeat-x：
背景图像在横向上平铺
repeat-y：
背景图像在纵向上平铺
repeat：
背景图像在横向和纵向平铺
no-repeat：
背景图像不平铺
round：
背景图像自动缩放直到适应且填充满整个容器。（CSS3）
space：
背景图像以相同的间距平铺且填充满整个容器或某个方向。（CSS3）

说明：

设置或检索对象的背景图像如何铺排填充。必须先指定background-image属性。
  • 允许提供2个参数，如果提供全部2个参数，第1个用于横向，第二个用于纵向。
  • 如果只提供1个参数，则用于横向和纵向。特殊值repeat-x和repeat-y除外，因为repeat-x相当于repeat no-repeat，repeat-y相当于no-repeat repeat，即其实repeat-x和repeat-y等价于提供了2个参数值
  • 对应的脚本特性为backgroundRepeat。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-8.0 #1 | 4.0-8.0 #2 | 5.1 #3 | 13.0-16.0 #4 | 11.50
版本 | 9.0
  1. IE8及更早浏览器不支持为background-repeat定义2个参数值；不支持CSS3新增参数值round | space。
  2. Firefox4.0-8.0不支持为background-repeat定义2个参数值；不支持CSS3新增参数值round | space。
  3. Safari5.1已接受CSS3新增参数值round | space，但还未实现支持。
  4. Chrome13.0-16.0已接受CSS3新增参数值round | space，但还未实现支持。

示例：


background-attachment

其它背景属性参考 选择其它项
  • background
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
  • background-origin
  • background-clip
  • background-size
  • Multiple background

background-attachment

  • 版本：CSS1/CSS3
  • 继承性：无

语法：

background-attachment：<attachment> [ , <attachment> ]*

<attachment> = fixed | local | scroll

默认值：scroll

取值：

fixed：
背景图像相对于窗体固定。
scroll：
背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。
local：
背景图像相对于元素内容固定，也就是说当元素随元素滚动时背景图像也会跟着滚动，因为背景图像总是要跟着内容。（CSS3）

说明：

设置或检索背景图像是随对象内容滚动还是固定的。必须先指定background-image属性。
  • 对应的脚本特性为backgroundAttachment。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-8.0 #1 | 4.0-8.0 #2 | 5.1 | 13.0 | 11.50
版本 | 9.0
  1. IE8及更早浏览器不支持CSS3新增参数值：local。
  2. Firefox4.0-8.0不支持CSS3新增参数值：local。

示例：


background-position

其它背景属性参考 选择其它项
  • background
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
  • background-origin
  • background-clip
  • background-size
  • Multiple background

background-position

  • 版本：CSS1
  • 继承性：无

语法：

background-position：<position> [ , <position> ]*

<position> = [ left | center | right | top | bottom | <percentage> | <length> ] | [ left | center | right | <percentage> | <length> ] [ top | center | bottom | <percentage> | <length> ] | [ center | [ left | right ] [ <percentage> | <length> ]? ] && [ center | [ top | bottom ] [ <percentage> | <length> ]? ]

默认值：0% 0%，效果等同于left top

取值：

<percentage>：
用百分比指定背景图像填充的位置。可以为负值。
<length>：
用长度值指定背景图像填充的位置。可以为负值。
center：
背景图像横向和纵向居中。
left：
背景图像在横向上填充从左边开始。
right：
背景图像在横向上填充从右边开始。
top：
背景图像在纵向上填充从顶部开始。
bottom：
背景图像在纵向上填充从底部开始。

说明：

设置或检索对象的背景图像位置。必须先指定background-image属性。
  • 该属性提供2个参数值。
  • 如果提供两个，第一个用于横坐标，第二个用于纵坐标。
  • 如果只提供一个，该值将用于横坐标；纵坐标将默认为50%。
  • 对应的脚本特性为backgroundPosition。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-8.0 #1 | 4.0 | 5.1 | 13.0 | 11.50
版本 | 9.0
  1. IE8及更早浏览器不支持CSS3 Background-position定义多组位置，只支持单组。

示例：


background-origin

其它背景属性参考 选择其它项
  • background
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
  • background-origin
  • background-clip
  • background-size
  • Multiple background

background-origin

  • 版本：CSS3
  • 继承性：无

语法：

background-origin：<box> [ , <box> ]*

<box> = border-box | padding-box | content-box

默认值：padding-box

取值：

padding-box：
从padding区域（含padding）开始显示背景图像。
border-box：
从border区域（含border）开始显示背景图像。
content-box：
从content区域开始显示背景图像。

说明：

设置或检索对象的背景图像计算background-position时的参考原点(位置)。
  • 对应的脚本特性为backgroundOrigin。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-8.0 | 4.0 | 5.1 | 13.0 | 11.50
版本 | 9.0

示例：


background-clip

其它背景属性参考 选择其它项
  • background
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
  • background-origin
  • background-clip
  • background-size
  • Multiple background

background-clip

  • 版本：CSS3
  • 继承性：无

语法：

background-clip：<box> [ , <box> ]*

<box> = border-box | padding-box | content-box | text

默认值：border-box

取值：

padding-box：
从padding区域（不含padding）开始向外裁剪背景。
border-box：
从border区域（不含border）开始向外裁剪背景。
content-box：
从content区域开始向外裁剪背景。
text：
从前景内容的形状（比如文字）作为裁剪区域向外裁剪，如此即可实现使用背景作为填充色之类的遮罩效果。遮罩效果 See with Webkit

说明：

指定对象的背景图像向外裁剪的区域。
  • 对应的脚本特性为backgroundClip。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-8.0 | 4.0-9.0#1 | 5.1 | 13.0 | 11.50-11.60 #1
版本 | 9.0 #1
  1. IE9, Firefox4.0-9.0, Opera11.50-11.60尚未支持text属性值，目前为webkit only [1] [2]。

示例：


background-size

其它背景属性参考 选择其它项
  • background
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
  • background-origin
  • background-clip
  • background-size
  • Multiple background

background-size

  • 版本：CSS3
  • 继承性：无

语法：

background-size：<bg-size> [ , <bg-size> ]*

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

默认值：auto

取值：

<length>：
用长度值指定背景图像大小。不允许负值。
<percentage>：
用百分比指定背景图像大小。不允许负值。
auto：
背景图像的真实大小。
cover：
将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
contain：
将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。

说明：

检索或设置对象的背景图像的尺寸大小。
  • 该属性提供2个参数值(特性值cover和contain除外)。
  • 如果提供两个，第一个用于定义背景图像的宽度，第二个用于定义背景图像的高度。
  • 如果只提供一个，该值将用于定义背景图像的宽度，第2个值默认为auto，即高度为auto，此时背景图以提供的宽度作为参照来进行等比缩放。
  • 对应的脚本特性为backgroundSize。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-8.0 | 4.0 | 5.1 | 13.0 | 11.50
版本 | 9.0

示例：


Multiple background

其它背景属性参考 选择其它项
  • background
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
  • background-origin
  • background-clip
  • background-size
  • Multiple background

Multiple background

  • 版本：CSS3
  • 继承性：无

语法：

background：[ background-image ] || [ background-repeat ] || [ background-attachment ] || [ background-position ]

相关属性：[ background-origin ] || [ background-clip ] || [ background-size ]

取值：

[ background-image ]：
指定对象的背景图像。可以是真实图片路径或使用渐变创建的“背景图像”
[ background-repeat ]：
指定对象的背景图像如何铺排填充。
[ background-attachment ]：
指定对象的背景图像是随对象内容滚动还是固定的。
[ background-position ]：
指定对象的背景图像位置。
[ background-origin ]：
指定对象的背景图像显示的原点。
[ background-clip ]：
指定对象的背景图像向外裁剪的区域。
[ background-size ]：
指定对象的背景图像的尺寸大小。

说明：

复合属性。检索或设置对象的多重背景图像（背景色background-color不能设置多重）。
  • 一个元素可以设置多重背景图像。
  • 每组属性间使用逗号分隔。
  • 如果设置的多重背景图之间存在着交集（即存在着重叠关系），前面的背景图会覆盖在后面的背景图之上。
  • 示例：假设要在同一个元素上定义3个背景图像

    缩写方式：

    background:url(test1.jpg) no-repeat scroll 10px 20px,url(test2.jpg) no-repeat scroll 50px 60px,url(test3.jpg) no-repeat scroll 90px 100px;
background-origin:content-box,content-box,content-box;
background-clip:padding-box,padding-box,padding-box;
background-size:50px 60px,50px 60px,50px 60px;

    拆分方式：

    background-image:url(test1.jpg),url(test2.jpg),url(test3.jpg);
background-repeat:no-repeat,no-repeat,no-repeat;
background-attachment:scroll,scroll,scroll;
background-repeat:10px 20px,50px 60px,90px 100px;
background-origin:content-box,content-box,content-box;
background-clip:padding-box,padding-box,padding-box;
background-size:50px 60px,50px 60px,50px 60px;

  • 如果定义了多个背景图片，而其他属性只有一个参数值，则表明所有背景图片的该属性都应用同一个参数值。据此可以对上面的例子进行缩写：

    缩写方式：

    background:url(test1.jpg) no-repeat scroll 10px 20px,url(test2.jpg) no-repeat scroll 50px 60px,url(test3.jpg) no-repeat scroll 90px 100px;
background-origin:content-box;
background-clip:padding-box;
background-size:50px 60px;

    拆分方式：

    background-image:url(test1.jpg),url(test2.jpg),url(test3.jpg);
background-repeat:no-repeat;
background-attachment:scroll;
background-repeat:10px 20px,50px 60px,90px 100px;
background-origin:content-box;
background-clip:padding-box;
background-size:50px 60px;

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-8.0 | 4.0 | 5.1 | 13.0 | 11.50
版本 | 9.0

示例：


Color index

CSS参考手册 » 属性列表 » 颜色属性
其它颜色属性参考 选择其它项
  • color
  • opacity

CSS Color Properties

  • 色彩属性

色彩 Color

Properties 属性 | CSS Version 版本 | Inherit From Parent 继承性 | Description 简介
color | CSS1 | 有 | 指定颜色。请参阅颜色值
opacity | CSS3 | 无 | 检索或设置对象的不透明度。

这种颜色 的链接表示是CSS3属性或原属性被CSS3修改并增加了新的属性值


color

  • 版本：CSS1
  • 继承性：有

语法：

color：<color>

取值：

<color>：
指定颜色。

说明：

检索或设置对象的文本颜色。无默认值
  • 可以使用Color Name(颜色名称), HEX, RGB, RGBA, HSL, HSLA, transparent来指定color。
  • 注意，用颜色名称指定color可能不被一些浏览器接受。
  • 对应的脚本特性为color。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-8.0 #1 | 4.0 | 5.1 | 13.0 | 11.50
版本 | 9.0
  1. IE8及更早浏览器不支持color的RGBA, HSL, HSLA及transparent值。

示例：


opacity

  • 版本：CSS3
  • 继承性：无

语法：

opacity：<number>

默认值： 1

取值：

<number>：
使用浮点数指定对象的不透明度。值被约束在[0.0-1.0]范围内，如果超过了这个范围，其计算结果将截取到与之最相近的值。

说明：

检索或设置对象的不透明度。
  • 对于尚不支持opacity属性的IE浏览器可以使用IE私有的滤镜属性来实现与opacity相同的效果

    示例代码：

    div{filter:alpha(opacity=50);} /* for IE8 and earlier */
div{opacity:.5;} /* for IE9 and other browsers */

    以上2段代码的效果相同

  • 对应的脚本特性为opacity。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-8.0 | 4.0 | 5.1 | 13.0 | 11.50
版本 | 9.0

示例：


Font index

CSS参考手册 » 属性列表 » 字体属性
其它字体属性参考 选择其它项
  • font
  • font-style
  • font-variant
  • font-weight
  • font-size
  • font-family
  • font-stretch

CSS Font Properties

  • 字体属性

字体 Font

Properties 属性 | CSS Version 版本 | Inherit From Parent 继承性 | Description 简介
font | CSS1/CSS2 | 有 | 复合属性。设置或检索对象中的文本特性
font-style | CSS1 | 有 | 设置或检索对象中的字体样式
font-variant | CSS1 | 有 | 设置或检索对象中的文本是否为小型的大写字母
font-weight | CSS1 | 有 | 设置或检索对象中的文本字体的粗细
font-size | CSS1 | 有 | 设置或检索对象中的字体尺寸
font-family | CSS1 | 有 | 设置或检索用于对象中文本的字体名称序列
font-stretch | CSS3 | 有 | 设置或检索对象中的文字是否横向拉伸变形。

这种颜色 的链接表示是CSS3属性或原属性被CSS3修改并增加了新的属性值


font

其它字体属性参考 选择其它项
  • font
  • font-style
  • font-variant
  • font-weight
  • font-size
  • font-family
  • font-stretch

font

  • 版本：CSS1/CSS2
  • 继承性：有

语法：

font：[ [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family> ] | caption | icon | menu | message-box | small-caption | status-bar

默认值：看独立属性自身

取值：

<font-style>：
指定文本字体样式
<font-variant>：
指定文本是否为小型的大写字母
<font-weight>：
指定文本字体的粗细
<font-size>：
指定文本字体尺寸
<line-height>：
指定文本字体的行高
<font-family>：
指定文本使用某个字体或字体序列
caption：
使用有标题的系统控件的文本字体（如按钮，菜单等）（CSS2）
icon：
使用图标标签的字体（CSS2）
menu：
使用菜单的字体（CSS2）
message-box：
使用信息对话框的文本字体（CSS2）
small-caption：
使用小控件的字体（CSS2）
status-bar：
使用窗口状态栏的字体（CSS2）

说明：

设置或检索对象中的文本特性。该属性是复合属性。
  • 使用第一种声明方式参数必须按照如上的排列顺序，且font-size和font-family是不可忽略的。每个参数仅允许有一个值。忽略的将使用其参数对应的独立属性的默认值。
  • 对于如何使用客户端系统可能没有的字体，可以参阅@font-face规则。
  • 对应的脚本特性为font。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


font-style

其它字体属性参考 选择其它项
  • font
  • font-style
  • font-variant
  • font-weight
  • font-size
  • font-family
  • font-stretch

font-style

  • 版本：CSS1
  • 继承性：有

语法：

font-style：normal | italic | oblique

默认值：normal

取值：

normal：
指定文本字体样式为正常的字体
italic：
指定文本字体样式为斜体。对于没有斜体变量的特殊字体，将应用oblique
oblique：
指定文本字体样式为倾斜的字体

说明：

设置或检索对象中的文本字体样式。
  • 对应的脚本特性为fontStyle。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


font-variant

其它字体属性参考 选择其它项
  • font
  • font-style
  • font-variant
  • font-weight
  • font-size
  • font-family
  • font-stretch

font-variant

  • 版本：CSS1
  • 继承性：有

语法：

font-variant：normal | small-caps

默认值：normal

取值：

normal：
正常的字体
small-caps：
小型的大写字母字体

说明：

设置或检索对象中的文本是否为小型的大写字母。
  • 对应的脚本特性为fontVariant。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


font-weight

其它字体属性参考 选择其它项
  • font
  • font-style
  • font-variant
  • font-weight
  • font-size
  • font-family
  • font-stretch

font-weight

  • 版本：CSS1
  • 继承性：有

语法：

font-weight：normal | bold | bolder | lighter | <integer>

默认值：normal

取值：

normal：
正常的字体。相当于number为400
bold：
粗体。相当于number为700。
bolder：
特粗体。也相当于strong和b对象的作用
lighter：
细体
<integer>：
用数字表示文本字体粗细。取值范围：100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

说明：

设置或检索对象中的文本字体的粗细。
  • 作用由客户端系统安装的字体的特定字体变量映射决定。系统选择最近的匹配。也就是说，用户可能看不到不同值之间的差异。
  • 对应的脚本特性为fontWeight。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


font-size

其它字体属性参考 选择其它项
  • font
  • font-style
  • font-variant
  • font-weight
  • font-size
  • font-family
  • font-stretch

font-size

  • 版本：CSS1
  • 继承性：有

语法：

font-size：<absolute-size> | <relative-size> | <length> | <percentage>

默认值：medium

取值：

<absolute-size>：
根据对象字体进行调节。可选参数值：xx-small | x-small | small | medium | large | x-large | xx-large
<relative-size>：
相对于父对像中字体尺寸进行相对调节。使用成比例的em单位计算。可选参数值：smaller | larger
<length>：
用长度值指定文字大小。不允许负值。
<percentage>：
用百分比指定文字大小。其百分比取值是基于父对象中字体的尺寸。不允许负值。

说明：

设置或检索对象中的字体尺寸。
  • 对应的脚本特性为fontSize。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


font-family

其它字体属性参考 选择其它项
  • font
  • font-style
  • font-variant
  • font-weight
  • font-size
  • font-family
  • font-stretch

font-family

  • 版本：CSS1
  • 继承性：有

语法：

font-family：[ <family-name> | <generic-family> ] [, <family-name> | <generic-family>]*

<family-name> = arial | georgia | verdana | helvetica | simsun and etc.

<generic-family> = cursive | fantasy | monospace | serif | sans-serif

默认值：由浏览器确定

取值：

<family-name>：
字体名称。按优先顺序排列。以逗号隔开。如果字体名称包含空格或中文，则应使用引号括起
<generic-family>：
字体序列名称。

说明：

设置或检索用于对象中文本的字体名称序列。
  • 序列可包含嵌入字体。请参阅@font-face规则。
  • 对应的脚本特性为fontFamily。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


font-stretch

其它字体属性参考 选择其它项
  • font
  • font-style
  • font-variant
  • font-weight
  • font-size
  • font-family
  • font-stretch

font-stretch

  • 版本：CSS3
  • 继承性：有

语法：

font-stretch：ultra-condensed | extra-condensed | condensed | semi-condensed | normal | semi-expanded | expanded | extra-expanded | ultra-expanded

默认值：normal

取值：

ultra-condensed：
比正常文字宽度窄4个基数。
extra-condensed：
比正常文字宽度窄3个基数。
condensed：
比正常文字宽度窄2个基数。
semi-condensed：
比正常文字宽度窄1个基数。
normal：
正常文字宽度
semi-expanded：
比正常文字宽度宽1个基数。
expanded：
比正常文字宽度宽2个基数。
extra-expanded：
比正常文字宽度宽3个基数。
ultra-expanded：
比正常文字宽度宽4个基数。

说明：

设置或检索对象中的文字是否横向拉伸变形。
  • 文字的拉伸是相对于浏览器显示的字体的正常宽度。
  • 对应的脚本特性为fontStretch。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-9.0 #1 | 4.0-6.0 #1 | 5.1 | 13.0 | 11.50-11.51
  1. IE及Firefox已支持font-stretch，但显示效果与正常文字并无不同。

示例：


Text index

CSS参考手册 » 属性列表 » 文本属性
其它文本属性参考 选择其它项
  • text-indent
  • text-overflow
  • text-align
  • text-transform
  • text-decoration
  • text-decoration-line
  • text-decoration-color
  • text-decoration-style
  • text-shadow
  • text-fill-color
  • text-stroke
  • text-stroke-width
  • text-stroke-color
  • letter-spacing
  • word-spacing
  • vertical-align
  • word-wrap
  • white-space
  • direction
  • unicode-bidi
  • line-height
  • tab-size

CSS Text Properties

  • 文本属性

文本 Text

Properties 属性 | CSS Version 版本 | Inherit From Parent 继承性 | Description 简介
text-indent | CSS1 | 有 | 检索或设置对象中的文本的缩进
text-overflow | CSS3 | 无 | 设置或检索是否使用一个省略标记（...）标示对象内文本的溢出
text-align | CSS1/CSS3 | 有 | 设置或检索对象中文本的对齐方式
text-transform | CSS1/CSS3 | 有 | 检索或设置对象中的文本的大小写
text-decoration | CSS1/CSS3 | 无 | 复合属性。检索或设置对象中的文本的装饰，如下划线、闪烁等
text-decoration-line | CSS3 | 无 | 检索或设置对象中的文本装饰线条的位置。
text-decoration-color | CSS3 | 无 | 检索或设置对象中的文本装饰线条的颜色。
text-decoration-style | CSS3 | 无 | 检索或设置对象中的文本装饰线条的形状。
text-shadow | CSS3 | 有 | 设置或检索对象中文本的文字是否有阴影及模糊效果
text-fill-color | CSS3 | 有 | 设置或检索对象中的文字填充颜色
text-stroke | CSS3 | 有 | 复合属性。设置或检索对象中的文字的描边
text-stroke-width | CSS3 | 有 | 设置或检索对象中的文字的描边厚度
text-stroke-color | CSS3 | 有 | 设置或检索对象中的文字的描边颜色
letter-spacing | CSS1 | 有 | 检索或设置对象中的文字之间的间隔
word-spacing | CSS1 | 有 | 检索或设置对象中的单词之间插入的空格数。
vertical-align | CSS1/CSS2 | 无 | 设置或检索对象内容的垂直对其方式
word-wrap | CSS3 | 有 | 设置或检索当当前行超过指定容器的边界时是否断开转行
white-space | CSS1 | 有 | 设置或检索对象内空格的处理方式
direction | CSS2 | 有 | 检索或设置文本流的方向
unicode-bidi | CSS2 | 无 | 用于同一个页面里存在从不同方向读进的文本显示。与direction属性一起使用
line-height | CSS1 | 有 | 检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离
tab-size | CSS3 | 有 | 检索或设置对象中的制表符的长度

这种颜色 的链接表示是CSS3属性或原属性被CSS3修改并增加了新的属性值


text-indent

其它文本属性参考 选择其它项
  • text-indent
  • text-overflow
  • text-align
  • text-transform
  • text-decoration
  • text-decoration-line
  • text-decoration-color
  • text-decoration-style
  • text-shadow
  • text-fill-color
  • text-stroke
  • text-stroke-width
  • text-stroke-color
  • letter-spacing
  • word-spacing
  • vertical-align
  • word-wrap
  • white-space
  • direction
  • unicode-bidi
  • line-height
  • tab-size

text-indent

  • 版本：CSS1
  • 继承性：有

语法：

text-indent：<length> | <percentage>

默认值：0

取值：

<length>：
用长度值指定文本的缩进。可以为负值。
<percentage>：
用百分比指定文本的缩进。可以为负值。

说明：

检索或设置对象中的文本的缩进。
  • 内联对象要使用该属性必须先使该对象表现为块级或内联块级。
  • 对应的脚本特性为textIndent。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


text-overflow

其它文本属性参考 选择其它项
  • text-indent
  • text-overflow
  • text-align
  • text-transform
  • text-decoration
  • text-decoration-line
  • text-decoration-color
  • text-decoration-style
  • text-shadow
  • text-fill-color
  • text-stroke
  • text-stroke-width
  • text-stroke-color
  • letter-spacing
  • word-spacing
  • vertical-align
  • word-wrap
  • white-space
  • direction
  • unicode-bidi
  • line-height
  • tab-size

text-overflow

  • 版本：CSS3
  • 继承性：无

语法：

text-overflow：clip | ellipsis

默认值：clip

取值：

clip：
当对象内文本溢出时不显示省略标记（...），而是将溢出的部分裁切掉。
ellipsis：
当对象内文本溢出时显示省略标记（...）。

说明：

设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。
  • 对应的脚本特性为textOverflow。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0-6.0 | 5.1 | 13.0 | 11.50
版本 |  | 7.0

示例：


text-align

其它文本属性参考 选择其它项
  • text-indent
  • text-overflow
  • text-align
  • text-transform
  • text-decoration
  • text-decoration-line
  • text-decoration-color
  • text-decoration-style
  • text-shadow
  • text-fill-color
  • text-stroke
  • text-stroke-width
  • text-stroke-color
  • letter-spacing
  • word-spacing
  • vertical-align
  • word-wrap
  • white-space
  • direction
  • unicode-bidi
  • line-height
  • tab-size

text-align

  • 版本：CSS1/CSS3
  • 继承性：有

语法：

text-align：left | center | right | justify | start | end

默认值：start

取值：

left：
内容左对齐。
center：
内容居中对齐。
right：
内容右对齐。
justify：
内容两端对齐。写本文档时仅Firefox能看到正确效果
start：
内容对齐开始边界。（CSS3）
end：
内容对齐结束边界。（CSS3）

说明：

设置或检索对象中内容的水平对齐方式。
  • 对应的脚本特性为textAlign。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-9.0 #1 | 4.0 | 5.1 #2 | 13.0-16.0 #3 | 11.50-11.60 #4
  1. IE9及更早浏览器不支持justify；不支持CSS3新增参数值start | end。
  2. Safari5.1不支持justify。
  3. Chrome13.0-16.0不支持justify。
  4. Opera11.50-11.60不支持justify；不支持CSS3新增参数值start | end。

示例：


text-transform

其它文本属性参考 选择其它项
  • text-indent
  • text-overflow
  • text-align
  • text-transform
  • text-decoration
  • text-decoration-line
  • text-decoration-color
  • text-decoration-style
  • text-shadow
  • text-fill-color
  • text-stroke
  • text-stroke-width
  • text-stroke-color
  • letter-spacing
  • word-spacing
  • vertical-align
  • word-wrap
  • white-space
  • direction
  • unicode-bidi
  • line-height
  • tab-size

text-transform

  • 版本：CSS1/CSS3
  • 继承性：有

语法：

text-transform：none | [ [ capitalize | uppercase | lowercase ] || full-width || full-size-kana ]

默认值：none

取值：

none：
无转换
capitalize：
将每个单词的第一个字母转换成大写
uppercase：
转换成大写
lowercase：
转换成小写
full-width：
??（CSS3）
full-size-kana：
??（CSS3）

说明：

检索或设置对象中的文本的大小写。
  • 对应的脚本特性为textTransform。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


text-decoration

其它文本属性参考 选择其它项
  • text-indent
  • text-overflow
  • text-align
  • text-transform
  • text-decoration
  • text-decoration-line
  • text-decoration-color
  • text-decoration-style
  • text-shadow
  • text-fill-color
  • text-stroke
  • text-stroke-width
  • text-stroke-color
  • letter-spacing
  • word-spacing
  • vertical-align
  • word-wrap
  • white-space
  • direction
  • unicode-bidi
  • line-height
  • tab-size

text-decoration

  • 版本：CSS1
  • 继承性：无

语法：

text-decoration：[ text-decoration-line ] || [ text-decoration-style ] || [ text-decoration-color ] || blink

默认值：看每个独立属性

取值：

[ text-decoration-line ]：
指定文本装饰的种类。相当于CSS1时的text-decoration属性
[ text-decoration-style ]：
指定文本装饰的样式。
[ text-decoration-color ]：
指定文本装饰的颜色。
blink：
指定文字的装饰是闪烁。写本文档时仅Firefox和Opera支持该参数值

说明：

复合属性。检索或设置对象中的文本的装饰。
  • 对应的脚本特性为textDecoration。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-9.0 #1 | 4.0-9.0 #2 | 5.1 #3 | 13.0-16.0 #4 | 11.50-11.60 #5
  1. IE9及更早浏览器不支持blink，且不支持CSS3下的text-decoration复合属性属写法。
  2. Firefox4.0-9.0不支持CSS3下的text-decoration复合属性属写法。
  3. Safari5.1不支持blink，且不支持CSS3下的text-decoration复合属性属写法。
  4. Chrome13.0不支持blink，且不支持CSS3下的text-decoration复合属性属写法。
  5. Opera11.50-11.60不支持CSS3下的text-decoration复合属性属写法。

示例：


text-decoration-line

其它文本属性参考 选择其它项
  • text-indent
  • text-overflow
  • text-align
  • text-transform
  • text-decoration
  • text-decoration-line
  • text-decoration-color
  • text-decoration-style
  • text-shadow
  • text-fill-color
  • text-stroke
  • text-stroke-width
  • text-stroke-color
  • letter-spacing
  • word-spacing
  • vertical-align
  • word-wrap
  • white-space
  • direction
  • unicode-bidi
  • line-height
  • tab-size

text-decoration-line

  • 版本：CSS3
  • 继承性：无

语法：

text-decoration-line：none | [ underline || overline || line-through ]

默认值：none

取值：

none：
指定文字无装饰
underline：
指定文字的装饰是下划线
overline：
指定文字的装饰是上划线
line-through：
指定文字的装饰是贯穿线

说明：

检索或设置对象中的文本装饰线条的位置。
  • text-decoration-line的作用类同于CSS1时的text-decoration
  • 对应的脚本特性为textDecorationLine。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-9.0 | 4.0-9.0 | 5.1 | 13.0-16.0 | 11.50-11.60

示例：


text-decoration-color

其它文本属性参考 选择其它项
  • text-indent
  • text-overflow
  • text-align
  • text-transform
  • text-decoration
  • text-decoration-line
  • text-decoration-color
  • text-decoration-style
  • text-shadow
  • text-fill-color
  • text-stroke
  • text-stroke-width
  • text-stroke-color
  • letter-spacing
  • word-spacing
  • vertical-align
  • word-wrap
  • white-space
  • direction
  • unicode-bidi
  • line-height
  • tab-size

text-decoration-color

  • 版本：CSS3
  • 继承性：无

语法：

text-decoration-color：<color>

默认值：采用文本颜色

取值：

<color>：
指定颜色。

说明：

检索或设置对象中的文本装饰线条的颜色。
  • 对应的脚本特性为textDecorationColor。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-9.0 | 4.0-9.0 | 5.1 | 13.0-16.0 | 11.50-11.60

示例：


text-decoration-style

其它文本属性参考 选择其它项
  • text-indent
  • text-overflow
  • text-align
  • text-transform
  • text-decoration
  • text-decoration-line
  • text-decoration-color
  • text-decoration-style
  • text-shadow
  • text-fill-color
  • text-stroke
  • text-stroke-width
  • text-stroke-color
  • letter-spacing
  • word-spacing
  • vertical-align
  • word-wrap
  • white-space
  • direction
  • unicode-bidi
  • line-height
  • tab-size

text-decoration-style

  • 版本：CSS3
  • 继承性：无

语法：

text-decoration-style：solid | double | dotted | dashed | wavy

默认值：solid

取值：

solid：
实线
double：
双线
dotted：
点状线条
dashed：
虚线
wavy：
波浪线

说明：

检索或设置对象中的文本装饰线条的形状。
  • 对应的脚本特性为textDecorationStyle。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-9.0 | 4.0-9.0 | 5.1 | 13.0-16.0 | 11.50-11.60

示例：


text-shadow

其它文本属性参考 选择其它项
  • text-indent
  • text-overflow
  • text-align
  • text-transform
  • text-decoration
  • text-decoration-line
  • text-decoration-color
  • text-decoration-style
  • text-shadow
  • text-fill-color
  • text-stroke
  • text-stroke-width
  • text-stroke-color
  • letter-spacing
  • word-spacing
  • vertical-align
  • word-wrap
  • white-space
  • direction
  • unicode-bidi
  • line-height
  • tab-size

text-shadow

  • 版本：CSS3
  • 继承性：有

语法：

text-shadow：none | <shadow> [ , <shadow> ]*

<shadow> = <length>{2,3} && <color>?

默认值：none

取值：

none：
无阴影
<length>①：
第1个长度值用来设置对象的阴影水平偏移值。可以为负值
<length>②：
第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
<length>③：
如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
<color>：
设置对象的阴影的颜色。

说明：

设置或检索对象中文本的文字是否有阴影及模糊效果。参阅box-shadow属性。
  • 可以设定多组效果，每组参数值以逗号分隔。
  • 对应的脚本特性为textShadow。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-9.0 | 4.0 | 5.1 | 13.0 | 11.50
版本 | 10.0

示例：


text-fill-color

其它文本属性参考 选择其它项
  • text-indent
  • text-overflow
  • text-align
  • text-transform
  • text-decoration
  • text-decoration-line
  • text-decoration-color
  • text-decoration-style
  • text-shadow
  • text-fill-color
  • text-stroke
  • text-stroke-width
  • text-stroke-color
  • letter-spacing
  • word-spacing
  • vertical-align
  • word-wrap
  • white-space
  • direction
  • unicode-bidi
  • line-height
  • tab-size

text-fill-color

  • 版本：CSS3
  • 继承性：有

语法：

text-fill-color：<color>

取值：

<color>：
指定文字的填充颜色。

说明：

检索或设置对象中的文字填充颜色。
  • 若同时设置text-fill-color和color，text-fill-color定义的颜色将覆盖color属性；
  • 通过text-fill-color属性，可以做出一些例如渐变文字和镂空文字的效果。Demo: 渐变文字 镂空文字 See with Webkit
  • 对应的脚本特性为textFillColor。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-10.0 | 4.0-9.0.1 | 5.1 | 13.0 | 11.50-11.60

写法：

内核类型 | 写法
Webkit(Chrome/Safari) | -webkit-text-fill-color
Gecko(Firefox) |
Presto(Opera) |
Trident(IE) |
W3C | text-fill-color

示例：


text-stroke

其它文本属性参考 选择其它项
  • text-indent
  • text-overflow
  • text-align
  • text-transform
  • text-decoration
  • text-decoration-line
  • text-decoration-color
  • text-decoration-style
  • text-shadow
  • text-fill-color
  • text-stroke
  • text-stroke-width
  • text-stroke-color
  • letter-spacing
  • word-spacing
  • vertical-align
  • word-wrap
  • white-space
  • direction
  • unicode-bidi
  • line-height
  • tab-size

text-stroke

  • 版本：CSS3
  • 继承性：有

语法：

text-stroke：[ text-stroke-width ] || [ text-stroke-color ]

默认值：看每个独立属性

取值：

[ text-stroke-width ]：
设置或检索对象中的文字的描边厚度
[ text-stroke-color ]：
设置或检索对象中的文字的描边颜色

说明：

复合属性。设置或检索对象中的文字的描边。
  • 对应的脚本特性为textStroke。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-10.0 | 4.0-9.0.1 | 5.1 | 13.0 | 11.50-11.60

写法：

内核类型 | 写法
Webkit(Chrome/Safari) | -webkit-text-stroke
Gecko(Firefox) |
Presto(Opera) |
Trident(IE) |
W3C | text-stroke

示例：


text-stroke-width

其它文本属性参考 选择其它项
  • text-indent
  • text-overflow
  • text-align
  • text-transform
  • text-decoration
  • text-decoration-line
  • text-decoration-color
  • text-decoration-style
  • text-shadow
  • text-fill-color
  • text-stroke
  • text-stroke-width
  • text-stroke-color
  • letter-spacing
  • word-spacing
  • vertical-align
  • word-wrap
  • white-space
  • direction
  • unicode-bidi
  • line-height
  • tab-size

text-stroke-width

  • 版本：CSS3
  • 继承性：有

语法：

text-stroke-width：<length>

默认值：0

取值：

<length>：
用长度值指定描边厚度。不允许负值

说明：

设置或检索对象中的文字的描边厚度
  • 对应的脚本特性为textStrokeWidth。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-10.0 | 4.0-9.0.1 | 5.1 | 13.0 | 11.50-11.60

写法：

内核类型 | 写法
Webkit(Chrome/Safari) | -webkit-text-stroke-width
Gecko(Firefox) |
Presto(Opera) |
Trident(IE) |
W3C | text-stroke-width

示例：


text-stroke-color

其它文本属性参考 选择其它项
  • text-indent
  • text-overflow
  • text-align
  • text-transform
  • text-decoration
  • text-decoration-line
  • text-decoration-color
  • text-decoration-style
  • text-shadow
  • text-fill-color
  • text-stroke
  • text-stroke-width
  • text-stroke-color
  • letter-spacing
  • word-spacing
  • vertical-align
  • word-wrap
  • white-space
  • direction
  • unicode-bidi
  • line-height
  • tab-size

text-stroke-color

  • 版本：CSS3
  • 继承性：有

语法：

text-stroke-color：<color>

默认值：采用文本颜色

取值：

<color>：
指定文字的描边颜色。

说明：

设置或检索对象中的文字的描边颜色
  • 对应的脚本特性为textStrokeColor。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-10.0 | 4.0-9.0.1 | 5.1 | 13.0 | 11.50-11.60

写法：

内核类型 | 写法
Webkit(Chrome/Safari) | -webkit-text-stroke-color
Gecko(Firefox) |
Presto(Opera) |
Trident(IE) |
W3C | text-stroke-color

示例：


letter-spacing

其它文本属性参考 选择其它项
  • text-indent
  • text-overflow
  • text-align
  • text-transform
  • text-decoration
  • text-decoration-line
  • text-decoration-color
  • text-decoration-style
  • text-shadow
  • text-fill-color
  • text-stroke
  • text-stroke-width
  • text-stroke-color
  • letter-spacing
  • word-spacing
  • vertical-align
  • word-wrap
  • white-space
  • direction
  • unicode-bidi
  • line-height
  • tab-size

letter-spacing

  • 版本：CSS1
  • 继承性：有

语法：

letter-spacing：normal | <length>

默认值：normal

相关属性：[ word-spacing ]

取值：

normal：
默认间隔
<length>：
用长度值指定间隔。可以为负值。

说明：

检索或设置对象中的文字之间的间隔。
  • 该属性将指定的间隔添加到每个文字(包括单词内的每个字母)之后。
  • 对应的脚本特性为letterSpacing。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


word-spacing

其它文本属性参考 选择其它项
  • text-indent
  • text-overflow
  • text-align
  • text-transform
  • text-decoration
  • text-decoration-line
  • text-decoration-color
  • text-decoration-style
  • text-shadow
  • text-fill-color
  • text-stroke
  • text-stroke-width
  • text-stroke-color
  • letter-spacing
  • word-spacing
  • vertical-align
  • word-wrap
  • white-space
  • direction
  • unicode-bidi
  • line-height
  • tab-size

word-spacing

  • 版本：CSS1
  • 继承性：有

语法：

word-spacing：normal | <length>

默认值：normal

相关属性：[ letter-spacing ]

取值：

normal：
默认间隔
<length>：
用长度值指定间隔。可以为负值。

说明：

检索或设置对象中的单词之间间隔。
  • 该属性将指定的间隔添加到每个单词(词内不发生)之后，但最后一个字将被排除在外。
  • 判断是否为单词的依据是单词间是否有空格。
  • 对应的脚本特性为wordSpacing。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


vertical-align

其它文本属性参考 选择其它项
  • text-indent
  • text-overflow
  • text-align
  • text-transform
  • text-decoration
  • text-decoration-line
  • text-decoration-color
  • text-decoration-style
  • text-shadow
  • text-fill-color
  • text-stroke
  • text-stroke-width
  • text-stroke-color
  • letter-spacing
  • word-spacing
  • vertical-align
  • word-wrap
  • white-space
  • direction
  • unicode-bidi
  • line-height
  • tab-size

vertical-align

  • 版本：CSS1/CSS2
  • 继承性：无

语法：

vertical-align：baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length>

默认值：baseline

取值：

baseline：
将支持valign特性的对象的内容与基线对齐
sub：
垂直对齐文本的下标
super：
垂直对齐文本的上标
top：
将支持valign特性的对象的内容与对象顶端对齐
text-top：
将支持valign特性的对象的文本与对象顶端对齐
middle：
将支持valign特性的对象的内容与对象中部对齐
bottom：
将支持valign特性的对象的文本与对象底端对齐
text-bottom：
将支持valign特性的对象的文本与对象顶端对齐
<percentage>：
用百分比指定由基线算起的偏移量。可以为负值。基线对于百分数来说就是0%。
<length>：
用长度值指定由基线算起的偏移量。可以为负值。基线对于数值来说为0。（CSS2）

说明：

设置或检索对象内容的垂直对其方式。
  • 对应的脚本特性为verticalAlign。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


word-wrap

其它文本属性参考 选择其它项
  • text-indent
  • text-overflow
  • text-align
  • text-transform
  • text-decoration
  • text-decoration-line
  • text-decoration-color
  • text-decoration-style
  • text-shadow
  • text-fill-color
  • text-stroke
  • text-stroke-width
  • text-stroke-color
  • letter-spacing
  • word-spacing
  • vertical-align
  • word-wrap
  • white-space
  • direction
  • unicode-bidi
  • line-height
  • tab-size

word-wrap

  • 版本：CSS3
  • 继承性：有

语法：

word-wrap：normal | break-word

默认值：normal

取值：

normal：
允许内容顶开或溢出指定的容器边界。
break-word：
内容将在边界内换行。如果需要，单词内部允许断行。

说明：

检索或设置对象中的单词之间间隔。
  • 对应的脚本特性为wordWrap。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


white-space

其它文本属性参考 选择其它项
  • text-indent
  • text-overflow
  • text-align
  • text-transform
  • text-decoration
  • text-decoration-line
  • text-decoration-color
  • text-decoration-style
  • text-shadow
  • text-fill-color
  • text-stroke
  • text-stroke-width
  • text-stroke-color
  • letter-spacing
  • word-spacing
  • vertical-align
  • word-wrap
  • white-space
  • direction
  • unicode-bidi
  • line-height
  • tab-size

white-space

  • 版本：CSS1
  • 继承性：有

语法：

white-space：normal | pre | nowrap | pre-wrap | pre-line

默认值：normal

取值：

normal：
默认处理方式。
pre：
用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字超出边界时不换行。可查阅pre对象
nowrap：
强制在同一行内显示所有文本，直到文本结束或者遭遇br对象。
pre-wrap：
用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字碰到边界时发生换行。
pre-line：
保持文本的换行，不保留文字间的空白距离，当文字碰到边界时发生换行。

说明：

设置或检索对象内空格的处理方式。
  • 对应的脚本特性为whiteSpace。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 7.0 #1 | 4.0 | 5.1 | 13.0 | 11.50
版本 | 8.0
  1. IE7及更早浏览器不支持pre-wrap | pre-line。

示例：


direction

其它文本属性参考 选择其它项
  • text-indent
  • text-overflow
  • text-align
  • text-transform
  • text-decoration
  • text-decoration-line
  • text-decoration-color
  • text-decoration-style
  • text-shadow
  • text-fill-color
  • text-stroke
  • text-stroke-width
  • text-stroke-color
  • letter-spacing
  • word-spacing
  • vertical-align
  • word-wrap
  • white-space
  • direction
  • unicode-bidi
  • line-height
  • tab-size

direction

  • 版本：CSS2
  • 继承性：有

语法：

direction：ltr | rtl

默认值：ltr

取值：

ltr：
文本流从左到右。
rtl：
文本流从右到左。

说明：

检索或设置文本流的方向。
  • 假如您想应用direction属性于内联元素的文本，您必须设定unicode-bidi属性为embed或bidi-override。
  • 对应的脚本特性为direction。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


unicode-bidi

其它文本属性参考 选择其它项
  • text-indent
  • text-overflow
  • text-align
  • text-transform
  • text-decoration
  • text-decoration-line
  • text-decoration-color
  • text-decoration-style
  • text-shadow
  • text-fill-color
  • text-stroke
  • text-stroke-width
  • text-stroke-color
  • letter-spacing
  • word-spacing
  • vertical-align
  • word-wrap
  • white-space
  • direction
  • unicode-bidi
  • line-height
  • tab-size

unicode-bidi

  • 版本：CSS2
  • 继承性：无

语法：

unicode-bidi：normal | embed | bidi-override

默认值：normal

取值：

normal：
对象不打开附加的嵌入层，对于内联要素，隐式重排序跨对象边界进行工作。
embed：
对象打开附加的嵌入层，direction属性的值指定嵌入层，在对象内部进行隐式重排序。
bidi-override：
严格按照direction属性的值重排序。忽略隐式双向运算规则。

说明：

用于同一个页面里存在从不同方向读进的文本显示。与direction属性一起使用
  • 假如您想应用direction属性于内联元素的文本，您必须设定unicode-bidi属性为embed或bidi-override。
  • 对应的脚本特性为unicodeBidi。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


line-height

其它文本属性参考 选择其它项
  • text-indent
  • text-overflow
  • text-align
  • text-transform
  • text-decoration
  • text-decoration-line
  • text-decoration-color
  • text-decoration-style
  • text-shadow
  • text-fill-color
  • text-stroke
  • text-stroke-width
  • text-stroke-color
  • letter-spacing
  • word-spacing
  • vertical-align
  • word-wrap
  • white-space
  • direction
  • unicode-bidi
  • line-height
  • tab-size

line-height

  • 版本：CSS1
  • 继承性：有

语法：

line-height：normal | <length> | <percentage> | <number>

默认值：normal

取值：

normal：
允许内容顶开或溢出指定的容器边界。
<length>：
用长度值指定行高。可以为负值。
<percentage>：
用百分比指定行高，其百分比取值是基于字体的高度尺寸。可以为负值。
<number>：
用乘积因子指定行高。可以为负值。

说明：

检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离。
  • 对应的脚本特性为lineHeight。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


tab-size

其它文本属性参考 选择其它项
  • text-indent
  • text-overflow
  • text-align
  • text-transform
  • text-decoration
  • text-decoration-line
  • text-decoration-color
  • text-decoration-style
  • text-shadow
  • text-fill-color
  • text-stroke
  • text-stroke-width
  • text-stroke-color
  • letter-spacing
  • word-spacing
  • vertical-align
  • word-wrap
  • white-space
  • direction
  • unicode-bidi
  • line-height
  • tab-size

tab-size

  • 版本：CSS3
  • 继承性：有

语法：

tab-size：<integer> | <length>

默认值：8

取值：

<integer>：
用整数值指定制表符的长度。不允许负值。
<length>：
用长度值指定制表符的长度。不允许负值。

说明：

检索或设置对象中的制表符的长度。
  • 对应的脚本特性为tabSize。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-10.0 | 4.0-6.0 #1 | 5.1 | 13.0 | 11.50-11.51 #1
  1. Firefox4.0-6.0及Opera11.50-11.51还不支持<length>作为参数值。

示例：


List index

CSS参考手册 » 属性列表 » 列表属性
其它列表属性参考 选择其它项
  • list-style
  • list-style-image
  • list-style-position
  • list-style-type

CSS List Properties

  • 列表属性

列表 List

Properties 属性 | CSS Version 版本 | Inherit From Parent 继承性 | Description 简介
list-style | CSS1 | 有 | 复合属性。设置列表项目相关内容
list-style-image | CSS1 | 有 | 设置或检索作为对象的列表项标记的图像
list-style-position | CSS1 | 有 | 设置或检索作为对象的列表项标记如何根据文本排列
list-style-type | CSS1/CSS2 | 有 | 设置或检索对象的列表项所使用的预设标记

这种颜色 的链接表示是CSS3属性或原属性被CSS3修改并增加了新的属性值


list-style

  • 版本：CSS1
  • 继承性：有

语法：

list-style：[ list-style-image ] || [ list-style-position ] || [ list-style-type ]

默认值：看独立属性自身

取值：

[ list-style-image ]：
设置或检索作为对象的列表项标记的图像
[ list-style-position ]：
设置或检索作为对象的列表项标记如何根据文本排列
[ list-style-type ]：
设置或检索对象的列表项所使用的预设标记

说明：

复合属性。设置列表项目相关内容
  • 对应的脚本特性为listStyle。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


list-style-image

  • 版本：CSS1
  • 继承性：有

语法：

list-style-image：none | <url>

默认值：none

取值：

none：
不指定图像
<url>：
使用绝对或相对地址指定列表项标记图像。

说明：

设置或检索作为对象的列表项标记的图像。
  • 若list-style-image属性为none或指定图像不可用时，list-style-type属性将发生作用。
  • 对应的脚本特性为listStyleImage。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


list-style-position

  • 版本：CSS1
  • 继承性：有

语法：

list-style-position：outside | inside

默认值：outside

取值：

outside：
列表项目标记放置在文本以外，且环绕文本不根据标记对齐
inside：
列表项目标记放置在文本以内，且环绕文本根据标记对齐

说明：

设置或检索作为对象的列表项标记如何根据文本排列。
  • 仅作用于具有display值等于list-item的对象（如li对象）。
  • 注意：ol对象和ul对象的type特性为其后的所有列表项目（如li对象）指明列表属性。
  • 对应的脚本特性为listStylePosition。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


list-style-type

  • 版本：CSS1
  • 继承性：有

语法：

list-style-type：disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin

默认值：disc

取值：

disc：
实心圆(CSS1)
circle：
空心圆(CSS1)
square：
实心方块(CSS1)
decimal：
阿拉伯数字(CSS1)
lower-roman：
小写罗马数字(CSS1)
upper-roman：
大写罗马数字(CSS1)
lower-alpha：
小写英文字母(CSS1)
upper-alpha：
大写英文字母(CSS1)
none：
不使用项目符号(CSS1)
armenian：
传统的亚美尼亚数字(CSS2)
cjk-ideographic：
浅白的表意数字(CSS2)
georgian：
传统的乔治数字(CSS2)
lower-greek：
基本的希腊小写字母(CSS2)
hebrew：
传统的希伯莱数字(CSS2)
hiragana：
日文平假名字符(CSS2)
hiragana-iroha：
日文平假名序号(CSS2)
katakana：
日文片假名字符(CSS2)
katakana-iroha：
日文片假名序号(CSS2)
lower-latin：
小写拉丁字母(CSS2)
upper-latin：
大写拉丁字母(CSS2)

说明：

设置或检索对象的列表项所使用的预设标记。
  • 若list-style-image属性为none或指定图像不可用时，list-style-type属性将发生作用。
  • 仅作用于具有display值等于list-item的对象（如li对象）。
  • 注意：ol对象和ul对象的type特性为其后的所有列表项目（如li对象）指明列表属性。
  • 对应的脚本特性为listStyleType。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


Table index

CSS参考手册 » 属性列表 » 表格属性
其它表格属性参考 选择其它项
  • table-layout
  • border-collapse
  • border-spacing
  • caption-side
  • empty-cells

CSS Table Properties

  • 表格属性

表格 Table

Properties 属性 | CSS Version 版本 | Inherit From Parent 继承性 | Description 简介
table-layout | CSS2 | 无 | 设置或检索表格的布局算法
border-collapse | CSS2 | 有 | 设置或检索表格的行和单元格的边是合并在一起还是按照标准的HTML样式分开
border-spacing | CSS2 | 有 | 设置或检索当表格边框独立时，行和单元格的边框在横向和纵向上的间距
caption-side | CSS2 | 有 | 设置或检索表格的caption对象是在表格的那一边
empty-cells | CSS2 | 有 | 设置或检索当表格的单元格无内容时，是否显示该单元格的边框

这种颜色 的链接表示是CSS3属性或原属性被CSS3修改并增加了新的属性值


table-layout

  • 版本：CSS2
  • 继承性：无

语法：

table-layout：auto | fixed

默认值：auto

取值：

auto：
默认的自动算法。布局将基于各单元格的内容。表格在每一单元格读取计算之后才会显示出来。速度很慢
fixed：
固定布局的算法。在这算法中，水平布局是仅仅基于表格的宽度，表格边框的宽度，单元格间距，列的宽度，而和表格内容无关。也就是说，内容可能被裁切

说明：

设置或检索表格的布局算法。
  • 对应的脚本特性为tableLayout。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


border-collapse

  • 版本：CSS2
  • 继承性：有

语法：

border-collapse：separate | collapse

默认值：separate

取值：

separate：
边框独立
collapse：
相邻边被合并

说明：

设置或检索表格的行和单元格的边是合并还是独立。
  • 对应的脚本特性为borderCollapse。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


border-spacing

  • 版本：CSS2
  • 继承性：有

语法：

border-spacing：<length>{1,2}

默认值：0

取值：

<length>：
用长度值来定义行和单元格的边框在横向和纵向上的间距。不允许负值

说明：

设置或检索当表格边框独立时，行和单元格的边框在横向和纵向上的间距
  • 该属性作用等同于标签属性cellspacing。
  • 只有当表格边框独立（即border-collapse属性等于separate时）此属性才起作用。
  • 如果提供全部两个length值时，第一个作用于横向间距，第二个作用于纵向间距。
  • 如果只提供一个length值时，这个值将作用于横向和纵向上的间距。
  • 对应的脚本特性为borderSpacing。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-7.0 | 4.0 | 5.1 | 13.0 | 11.50
版本 | 8.0

示例：


caption-side

  • 版本：CSS2
  • 继承性：有

语法：

caption-side：top | right | bottom | left

默认值：top

取值：

top：
指定caption在表格上边
bottom：
指定caption在表格下边

说明：

设置或检索表格的caption对象是在表格的那一边。
  • 要在IE7及以下浏览器中实现top与bottom参数值的效果，可直接在caption标签内定义标签属性valign为top和bottom。
  • 对应的脚本特性为captionSide。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-7.0 | 4.0 | 5.1 | 13.0 | 11.50
版本 | 8.0

示例：


empty-cells

  • 版本：CSS2
  • 继承性：有

语法：

empty-cells：hide | show

默认值：show

取值：

hide：
指定当表格的单元格无内容时，隐藏该单元格的边框。
show：
指定当表格的单元格无内容时，显示该单元格的边框。

说明：

设置或检索当表格的单元格无内容时，是否显示该单元格的边框。
  • IE7及以下浏览器中默认隐藏无内容的单元格边框，要想使其获得与show参数值相同的效果，可以变相给该空单元格加个占位且不可见的元素，例如全角空格或&nbsp;等等。
  • 只有当表格边框独立（即border-collapse属性等于separate时）此属性才起作用。
  • 对应的脚本特性为emptyCells。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-7.0 | 4.0 | 5.1 | 13.0 | 11.50
版本 | 8.0

示例：


Content index

CSS参考手册 » 属性列表 » 内容属性
其它内容属性参考 选择其它项
  • content
  • counter-increment
  • counter-reset
  • quotes

CSS Content Properties

  • 内容属性

内容 Content

Properties 属性 | CSS Version 版本 | Inherit From Parent 继承性 | Description 简介
content | CSS2 | 无 | 用来和:after及:before伪元素一起使用，在对象前或后显示内容
counter-increment | CSS2 | 无 | 设定当一个selector发生时计数器增加的值
counter-reset | CSS2 | 无 | 将指定selector的计数器复位
quotes | CSS2 | 有 | 设置或检索对象内使用的嵌套标记

这种颜色 的链接表示是CSS3属性或原属性被CSS3修改并增加了新的属性值


content

  • 版本：CSS2
  • 继承性：无

语法：

content：normal | none | [<attr> | <url> | <string> | counter(name) | counter(name,list-style-type) | counters(name,string) | counters(name,string,list-style-type) | no-close-quote | no-open-quote | close-quote | open-quote]+

默认值：normal

取值：

normal：
默认值。表现与none值相同
none：
不生成任何值。
<attr>：
插入标签属性值
<url>：
使用指定的绝对或相对地址插入一个外部资源（图像，声频，视频或浏览器支持的其他任何资源）
<string>：
插入字符串
counter(name)：
使用已命名的计数器
counter(name,list-style-type)：
使用已命名的计数器并遵从指定的list-style-type属性
counters(name,string)：
使用所有已命名的计数器
counters(name,string,list-style-type)：
使用所有已命名的计数器并遵从指定的list-style-type属性
no-close-quote：
并不插入quotes属性的后标记。但增加其嵌套级别
no-open-quote：
并不插入quotes属性的前标记。但减少其嵌套级别
close-quote：
插入quotes属性的后标记
open-quote：
插入quotes属性的前标记

说明：

用来和:after及:before伪元素一起使用，在对象前或后显示内容。
  • 对应的脚本特性为content。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-7.0 | 4.0 | 5.1 | 13.0 | 11.50
版本 | 8.0

示例：


counter-increment

  • 版本：CSS2
  • 继承性：无

语法：

counter-increment：none | [<identifier> <integer>]+

默认值：none

取值：

none：
阻止计数器增加
<identifier>：
identifier定义一个或多个将被增加的selector，id，或者class
<integer>：
定义计算器每次增加的数值，可以为负值，默认值是1

说明：

设定当一个selector发生时计数器增加的值。
  • 对应的脚本特性为counterIncrement。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-7.0 | 4.0 | 5.1 | 13.0 | 11.50
版本 | 8.0

示例：


counter-reset

  • 版本：CSS2
  • 继承性：无

语法：

counter-reset：none | [<identifier> <integer>]+

默认值：none

取值：

none：
阻止计数器复位
<identifier>：
identifier定义一个或多个将被复位的selector，id，或者class
<integer>：
定义被复位的数值，可以为负值，默认值是0

说明：

将指定selector的计数器复位。
  • 对应的脚本特性为counterReset。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-7.0 | 4.0 | 5.1 | 13.0 | 11.50
版本 | 8.0

示例：


quotes

  • 版本：CSS2
  • 继承性：有

语法：

quotes：none | [<string> <string>]+

默认值：none

取值：

none：
content属性的open-quote和close-quote值将不会生成任何标记
<string>：
定义content属性的open-quote和close-quote值的标记，2个为一组

说明：

设置或检索对象内使用的嵌套标记。
  • 对应的脚本特性为quotes。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-7.0 | 4.0 | 5.1 | 13.0 | 11.50
版本 | 8.0

示例：


User Interface index

CSS参考手册 » 属性列表 » 用户界面属性
其它用户界面属性 选择其它项
  • outline
  • outline-width
  • outline-color
  • outline-style
  • outline-offset
  • nav-index
  • nav-up
  • nav-right
  • nav-down
  • nav-left
  • cursor
  • zoom
  • box-sizing
  • resize
  • ime-mode

CSS User Interface Properties

  • 用户界面属性

用户界面 User Interface

Properties 属性 | CSS Version 版本 | Inherit From Parent 继承性 | Description 简介
outline | CSS2 | 无 | 复合属性。设置或检索对象外的线条轮廓
outline-width | CSS2 | 无 | 设置或检索对象外的线条轮廓的宽度
outline-style | CSS2 | 无 | 设置或检索对象外的线条轮廓的样式
outline-color | CSS2 | 无 | 设置或检索对象外的线条轮廓的颜色
outline-offset | CSS3 | 无 | 设置或检索对象外的线条轮廓偏移位置的数值
nav-index | CSS3 | 无 | 设置或检索对象的导航顺序。
nav-up | CSS3 | 无 | 设置或检索对象的导航方向。
nav-right | CSS3 | 无 | 设置或检索对象的导航方向。
nav-down | CSS3 | 无 | 设置或检索对象的导航方向。
nav-left | CSS3 | 无 | 设置或检索对象的导航方向。
cursor | CSS2 | 有 | 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
zoom | CSS2 | 有 | 设置或检索对象的缩放比例。
box-sizing | CSS3 | 无 | 设置或检索对象的盒模型组成模式。
resize | CSS3 | 无 | 设置或检索对象的区域是否允许用户缩放，调节元素尺寸大小。
ime-mode | CSS3 | 无 | 设置或检索是否允许用户激活输入中文，韩文，日文等的输入法（IME）状态。

这种颜色 的链接表示是CSS3属性或原属性被CSS3修改并增加了新的属性值


outline

其它用户界面属性 选择其它项
  • outline
  • outline-width
  • outline-color
  • outline-style
  • outline-offset
  • nav-index
  • nav-up
  • nav-right
  • nav-down
  • nav-left
  • cursor
  • zoom
  • box-sizing
  • resize
  • ime-mode

outline

  • 版本：CSS2
  • 继承性：无

语法：

outline：[ outline-width ] || [ outline-style ] || [ outline-color ]

默认值：看每个独立属性

相关属性: [ outline-offset ]

取值：

[ outline-width ]：
指定轮廓边框的宽度。
[ outline-style ]：
指定轮廓边框的样式。
[ outline-color ]：
指定轮廓边框的颜色。

说明：

复合属性。设置或检索对象外的线条轮廓。outline画在border外面
  • 不允许类似border属性那样能将自身拆分为border-top,border-right,border-bottom,border-left
  • IE8暂时还不支持outline-offset相关属性
  • 对应的脚本特性为outline。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-7.0 | 4.0 | 5.1 | 13.0 | 11.50
版本 | 8.0

示例：


outline-width

其它用户界面属性 选择其它项
  • outline
  • outline-width
  • outline-color
  • outline-style
  • outline-offset
  • nav-index
  • nav-up
  • nav-right
  • nav-down
  • nav-left
  • cursor
  • zoom
  • box-sizing
  • resize
  • ime-mode

outline-width

  • 版本：CSS2
  • 继承性：无

语法：

outline-width：<length> | thin | medium | thick

默认值：medium

取值：

<length>：
用长度值来定义轮廓的厚度。不允许负值
medium：
定义默认宽度的轮廓。
thin：
定义比默认宽度细的轮廓。
thick：
定义比默认宽度粗的轮廓。

说明：

设置或检索对象外的线条轮廓的宽度。参阅outline属性。
  • 不允许类似border-width属性那样能将自身拆分为border-top-width,border-right-width,border-bottom-width,border-left-width
  • 对应的脚本特性为outlineWidth。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-7.0 | 4.0 | 5.1 | 13.0 | 11.50
版本 | 8.0

示例：


outline-color

其它用户界面属性 选择其它项
  • outline
  • outline-width
  • outline-color
  • outline-style
  • outline-offset
  • nav-index
  • nav-up
  • nav-right
  • nav-down
  • nav-left
  • cursor
  • zoom
  • box-sizing
  • resize
  • ime-mode

outline-color

  • 版本：CSS2
  • 继承性：无

语法：

outline-color：<color> | invert

默认值：invert

取值：

<color>：
指定颜色。
invert：
使用背景色的反色。该参数值目前仅在IE及Opera下有效

说明：

设置或检索对象外的线条轮廓的颜色。参阅outline属性。
  • 不允许类似border-color属性那样能将自身拆分为border-top-color,border-right-color,border-bottom-color,border-left-color
  • 对应的脚本特性为outlineColor。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-7.0 | 4.0 | 5.1 | 13.0 | 11.50
版本 | 8.0

示例：


outline-style

其它用户界面属性 选择其它项
  • outline
  • outline-width
  • outline-color
  • outline-style
  • outline-offset
  • nav-index
  • nav-up
  • nav-right
  • nav-down
  • nav-left
  • cursor
  • zoom
  • box-sizing
  • resize
  • ime-mode

outline-style

  • 版本：CSS2
  • 继承性：无

语法：

outline-style：none | dotted | dashed | solid | double | groove | ridge | inset | outset

默认值：none

取值：

none：
无轮廓。与任何指定的outline-width值无关
dotted：
点状轮廓。
dashed：
虚线轮廓。
solid：
实线轮廓
double：
双线轮廓。两条单线与其间隔的和等于指定的outline-width值
groove：
3D凹槽轮廓。
ridge：
3D凸槽轮廓。
inset：
3D凹边轮廓。
outset：
3D凸边轮廓。

说明：

设置或检索对象外的线条轮廓的样式。参阅outline属性。
  • 不允许类似border-style属性那样能将自身拆分为border-top-style,border-right-style,border-bottom-style,border-left-style
  • 对应的脚本特性为outlineStyle。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 #1 | 4.0 | 5.1 | 13.0 | 11.50
版本 | 7.0
  1. IE6及更早浏览器会将dotted属性值显示为dashed的效果。

示例：


outline-offset

其它用户界面属性 选择其它项
  • outline
  • outline-width
  • outline-color
  • outline-style
  • outline-offset
  • nav-index
  • nav-up
  • nav-right
  • nav-down
  • nav-left
  • cursor
  • zoom
  • box-sizing
  • resize
  • ime-mode

outline-offset

  • 版本：CSS3
  • 继承性：无

语法：

outline-offset：<length>

取值：

<length>：
用长度值来定义轮廓偏移。不允许负值

说明：

设置或检索对象外的线条轮廓偏移容器的值。参阅outline属性。
  • 对应的脚本特性为outlineOffset。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-10.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


nav-index

其它用户界面属性 选择其它项
  • outline
  • outline-width
  • outline-color
  • outline-style
  • outline-offset
  • nav-index
  • nav-up
  • nav-right
  • nav-down
  • nav-left
  • cursor
  • zoom
  • box-sizing
  • resize
  • ime-mode

nav-index

  • 版本：CSS3
  • 继承性：无

语法：

nav-index：auto | <number>

默认值：auto

相关属性: [ nav-up ] || [ nav-right ] || [ nav-down ] || [ nav-left ]

取值：

auto：
元素的导航焦点顺序由客户端自动分配。
<number>：
用浮点数来定义元素的导航焦点顺序。若某元素的该值等于1则意味着该元素最先被导航。当若干个元素的nav-index值相同时，则按照文档的先后顺序进行导航。

说明：

设置或检索对象的导航顺序。
  • 该属性是HTML4/XHTML1中标签属性tabindex的替代品。
  • 只有支持nav-index属性的元素才能参与导航排序。
  • 被禁用的元素将不参与导航排序。
  • 对应的脚本特性为navIndex。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-10.0 | 4.0 | 5.1 | 13.0 | 11.50-11.51

示例：


nav-up

其它用户界面属性 选择其它项
  • outline
  • outline-width
  • outline-color
  • outline-style
  • outline-offset
  • nav-index
  • nav-up
  • nav-right
  • nav-down
  • nav-left
  • cursor
  • zoom
  • box-sizing
  • resize
  • ime-mode

nav-up

  • 版本：CSS3
  • 继承性：无

语法：

nav-up：auto | <id> [ current | root | <target-name> ]?

默认值：auto

相关属性: [ nav-index ] || [ nav-right ] || [ nav-down ] || [ nav-left ]

取值：

auto：
默认顺序。
<id>：
被导航元素的id。
<target-name>：
框架目标页面之间的元素焦点导航。

说明：

设置或检索对象的导航方向。
  • 只有支持nav-index属性的元素才能参与导航排序。
  • 被禁用的元素将不参与导航排序。
  • 对应的脚本特性为navUp。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-10.0 | 4.0 | 5.1 | 13.0 | 11.50-11.51

示例：


nav-right

其它用户界面属性 选择其它项
  • outline
  • outline-width
  • outline-color
  • outline-style
  • outline-offset
  • nav-index
  • nav-up
  • nav-right
  • nav-down
  • nav-left
  • cursor
  • zoom
  • box-sizing
  • resize
  • ime-mode

nav-right

  • 版本：CSS3
  • 继承性：无

语法：

nav-right：auto | <id> [ current | root | <target-name> ]?

默认值：auto

相关属性: [ nav-index ] || [ nav-up ] || [ nav-down ] || [ nav-left ]

取值：

auto：
默认顺序。
<id>：
被导航元素的id。
<target-name>：
框架目标页面之间的元素焦点导航。

说明：

设置或检索对象的导航方向。
  • 只有支持nav-index属性的元素才能参与导航排序。
  • 被禁用的元素将不参与导航排序。
  • 对应的脚本特性为navRight。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-10.0 | 4.0 | 5.1 | 13.0 | 11.50-11.51

示例：


nav-down

其它用户界面属性 选择其它项
  • outline
  • outline-width
  • outline-color
  • outline-style
  • outline-offset
  • nav-index
  • nav-up
  • nav-right
  • nav-down
  • nav-left
  • cursor
  • zoom
  • box-sizing
  • resize
  • ime-mode

nav-down

  • 版本：CSS3
  • 继承性：无

语法：

nav-down：auto | <id> [ current | root | <target-name> ]?

默认值：auto

相关属性: [ nav-index ] || [ nav-up ] || [ nav-right ] || [ nav-left ]

取值：

auto：
默认顺序。
<id>：
被导航元素的id。
<target-name>：
框架目标页面之间的元素焦点导航。

说明：

设置或检索对象的导航方向。
  • 只有支持nav-index属性的元素才能参与导航排序。
  • 被禁用的元素将不参与导航排序。
  • 对应的脚本特性为navDown。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-10.0 | 4.0 | 5.1 | 13.0 | 11.50-11.51

示例：


nav-left

其它用户界面属性 选择其它项
  • outline
  • outline-width
  • outline-color
  • outline-style
  • outline-offset
  • nav-index
  • nav-up
  • nav-right
  • nav-down
  • nav-left
  • cursor
  • zoom
  • box-sizing
  • resize
  • ime-mode

nav-left

  • 版本：CSS3
  • 继承性：无

语法：

nav-left：auto | <id> [ current | root | <target-name> ]?

默认值：auto

相关属性: [ nav-index ] || [ nav-up ] || [ nav-right ] || [ nav-down ]

取值：

auto：
默认顺序。
<id>：
被导航元素的id。
<target-name>：
框架目标页面之间的元素焦点导航。

说明：

设置或检索对象的导航方向。
  • 只有支持nav-index属性的元素才能参与导航排序。
  • 被禁用的元素将不参与导航排序。
  • 对应的脚本特性为navLeft。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-10.0 | 4.0 | 5.1 | 13.0 | 11.50-11.51

示例：


cursor

其它用户界面属性 选择其它项
  • outline
  • outline-width
  • outline-color
  • outline-style
  • outline-offset
  • nav-index
  • nav-up
  • nav-right
  • nav-down
  • nav-left
  • cursor
  • zoom
  • box-sizing
  • resize
  • ime-mode

cursor

  • 版本：CSS2
  • 继承性：有

语法：

cursor：[<url> [<x> <y>]?,]*[ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll]

默认值：auto

说明：

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
  • 使用自定义图像作为光标类型，IE, Opera只支持*.cur等特定的图片格式；Firefox, Chrome, Safari既支持特定图片类型也支持常见的*.jpg, *.gif, *.jpg等图片格式。
  • cursor的属性值可以是一个序列

    示例代码：

    :link,:visited{
    cursor:url(example.svg#linkcursor),
            url(hyper.cur),
            url(hyper.png) 2 3,
            pointer;
}

    本例用来给所有的超链接定义光标类型，客户端如果不支持SVG类型的光标，则使用下个"hyper.cur"；如果cur类型也不支持，则使用下个"hyper.png"；依次类推。

  • 对应的脚本特性为cursor。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


zoom

其它用户界面属性 选择其它项
  • outline
  • outline-width
  • outline-color
  • outline-style
  • outline-offset
  • nav-index
  • nav-up
  • nav-right
  • nav-down
  • nav-left
  • cursor
  • zoom
  • box-sizing
  • resize

zoom

  • 版本：CSS2
  • 继承性：无

语法：

zoom：normal | <number> | <percentage>

默认值：normal

取值：

normal：
使用对象的实际尺寸。
<number>：
用浮点数来定义缩放比例。不允许负值
<percentage>：
用百分比来定义缩放比例。不允许负值

说明：

设置或检索对象的缩放比例。
  • 对应的脚本特性为zoom。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0-6.0 | 5.1 | 13.0 | 11.50-11.51

示例：


box-sizing

其它用户界面属性 选择其它项
  • outline
  • outline-width
  • outline-color
  • outline-style
  • outline-offset
  • nav-index
  • nav-up
  • nav-right
  • nav-down
  • nav-left
  • cursor
  • zoom
  • box-sizing
  • resize
  • ime-mode

box-sizing

  • 版本：CSS3
  • 继承性：无

语法：

box-sizing：content-box | border-box

默认值：content-box

取值：

content-box：
padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding )
此属性表现为标准模式下的盒模型。
border-box：
padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )
此属性表现为怪异模式下的盒模型。

示例：

  • content-box:

    .test1{ box-sizing:content-box; width:200px; padding:10px; border:15px solid #eee; }

  • border-box:

    .test2{ box-sizing:border-box; width:200px; padding:10px; border:15px solid #eee; }

说明：

设置或检索对象的盒模型组成模式。
  • 对应的脚本特性为boxSizing。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-7.0 | 4.0-8.0 | 5.1 | 13.0 | 11.50
版本 | 8.0
版本 | 9.0

写法：

内核类型 | 写法(box-sizing)
Webkit(Chrome/Safari) | box-sizing
Gecko(Firefox) | -moz-box-sizing
Presto(Opera) | box-sizing
Trident(IE) | IE8:-ms-box-sizing/IE9:box-sizing

示例：


resize

其它用户界面属性 选择其它项
  • outline
  • outline-width
  • outline-color
  • outline-style
  • outline-offset
  • nav-index
  • nav-up
  • nav-right
  • nav-down
  • nav-left
  • cursor
  • zoom
  • box-sizing
  • resize
  • ime-mode

resize

  • 版本：CSS3
  • 继承性：无

语法：

resize：none | both | horizontal | vertical

默认值：none

取值：

none：
不允许用户调整元素大小。
both：
用户可以调节元素的宽度和高度。
horizontal：
用户可以调节元素的宽度
vertical：
用户可以调节元素的高度。

说明：

设置或检索对象的区域是否允许用户缩放，调节元素尺寸大小。
  • 如果希望此属性生效，需要设置对象的overflow属性，值可以是auto,hidden或scroll。
  • 对应的脚本特性为resize。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-10.0 | 4.0 | 5.1 | 13.0 | 11.50-11.60

示例：


ime-mode

其它用户界面属性 选择其它项
  • outline
  • outline-width
  • outline-color
  • outline-style
  • outline-offset
  • nav-index
  • nav-up
  • nav-right
  • nav-down
  • nav-left
  • cursor
  • zoom
  • box-sizing
  • resize
  • ime-mode

ime-mode

  • 版本：CSS3
  • 继承性：无

语法：

zoom：auto | normal | active | inactive | disabled

默认值：auto

取值：

auto：
不影响IME的状态。
normal：
正常的IME状态
active：
指定所有使用ime输入的字符。即激活本地语言输入法。用户仍可以撤销激活ime
inactive：
指定所有不使用ime输入的字符。即激活非本地语言。用户仍可以撤销激活ime
disabled：
完全禁用ime。对于有焦点的控件(如输入框)，用户不可以激活ime

说明：

设置或检索是否允许用户激活输入中文，韩文，日文等的输入法（IME）状态。
  • 对应的脚本特性为imeMode。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0 | 5.1 | 13.0-16.0 | 11.50-11.60

示例：


Multi-column index

CSS参考手册 » 属性列表 » 多栏属性
其它多栏属性参考 选择其它项
  • columns
  • column-width
  • column-count
  • column-gap
  • column-rule
  • column-rule-width
  • column-rule-style
  • column-rule-color
  • column-span
  • column-fill
  • column-break-before
  • column-break-after
  • column-break-inside

CSS Multi-column Properties

  • 多列属性

多列 Multi-column

Properties 属性 | CSS Version 版本 | Inherit From Parent 继承性 | Description 简介
columns | CSS3 | 无 | 设置或检索对象的列数和每列的宽度。复合属性
column-width | CSS3 | 无 | 设置或检索对象每列的宽度
column-count | CSS3 | 无 | 设置或检索对象的列数
column-gap | CSS3 | 无 | 设置或检索对象的列与列之间的间隙
column-rule | CSS3 | 无 | 设置或检索对象的列与列之间的边框。复合属性
column-rule-width | CSS3 | 无 | 设置或检索对象的列与列之间的边框厚度。
column-rule-style | CSS3 | 无 | 设置或检索对象的列与列之间的边框样式。
column-rule-color | CSS3 | 无 | 设置或检索对象的列与列之间的边框颜色。
column-span | CSS3 | 无 | 设置或检索对象元素是否横跨所有列。
column-fill | CSS3 | 无 | 设置或检索对象所有列的高度是否统一。
column-break-before | CSS3 | 无 | 设置或检索对象之前是否断行。
column-break-after | CSS3 | 无 | 设置或检索对象之前是否断行。
column-break-inside | CSS3 | 无 | 设置或检索对象内部是否断行。

这种颜色 的链接表示是CSS3属性或原属性被CSS3修改并增加了新的属性值


columns

其它多栏属性参考 选择其它项
  • columns
  • column-width
  • column-count
  • column-gap
  • column-rule
  • column-rule-width
  • column-rule-style
  • column-rule-color
  • column-span
  • column-fill
  • column-break-before
  • column-break-after
  • column-break-inside

columns

  • 版本：CSS3
  • 继承性：无

语法：

columns：[ column-width ] || [ column-count ]

默认值：看每个独立属性

取值：

[ column-width ]：
设置或检索对象每列的宽度
[ column-count ]：
设置或检索对象的列数

说明：

设置或检索对象的列数和每列的宽度。复合属性
  • 对应的脚本特性为columns。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-9.0 | 4.0-8.0 | 5.1 | 13.0-16.0 | 11.50
版本 | 10.0 | 9.0

写法：

内核类型 | 写法
Webkit(Chrome/Safari) | -webkit-columns
Gecko(Firefox) | -moz-columns
Presto(Opera) | columns
Trident(IE) | columns
W3C | columns

示例：


column-width

其它多栏属性参考 选择其它项
  • columns
  • column-width
  • column-count
  • column-gap
  • column-rule
  • column-rule-width
  • column-rule-style
  • column-rule-color
  • column-span
  • column-fill
  • column-break-before
  • column-break-after
  • column-break-inside

column-width

  • 版本：CSS3
  • 继承性：无

语法：

column-width：<length> | auto

默认值：auto

取值：

<length>：
用长度值来定义列宽。不允许负值
auto：
根据column-count自定分配宽度

说明：

设置或检索对象每列的宽度
  • 对应的脚本特性为columnWidth。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-9.0 | 4.0-9.0 | 5.1 | 13.0-16.0 | 11.50
版本 | 10.0

写法：

内核类型 | 写法
Webkit(Chrome/Safari) | -webkit-column-width
Gecko(Firefox) | -moz-column-width
Presto(Opera) | column-width
Trident(IE) | column-width
W3C | column-width

示例：


column-count

其它多栏属性参考 选择其它项
  • columns
  • column-width
  • column-count
  • column-gap
  • column-rule
  • column-rule-width
  • column-rule-style
  • column-rule-color
  • column-span
  • column-fill
  • column-break-before
  • column-break-after
  • column-break-inside

column-count

  • 版本：CSS3
  • 继承性：无

语法：

column-count：<integer> | auto

默认值：auto

取值：

<integer>：
用整数值来定义列数。不允许负值
auto：
根据column-width自定分配宽度

说明：

设置或检索对象的列数
  • 对应的脚本特性为columnCount。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-9.0 | 4.0-9.0 | 5.1 | 13.0-16.0 | 11.50
版本 | 10.0

写法：

内核类型 | 写法
Webkit(Chrome/Safari) | -webkit-column-count
Gecko(Firefox) | -moz-column-count
Presto(Opera) | column-count
Trident(IE) | column-count
W3C | column-count

示例：


column-gap

其它多栏属性参考 选择其它项
  • columns
  • column-width
  • column-count
  • column-gap
  • column-rule
  • column-rule-width
  • column-rule-style
  • column-rule-color
  • column-span
  • column-fill
  • column-break-before
  • column-break-after
  • column-break-inside

column-gap

  • 版本：CSS3
  • 继承性：无

语法：

column-gap：<length> | normal

默认值：normal

取值：

<length>：
用长度值来定义列与列之间的间隙。不允许负值
normal：
与font-size大小相同。假设该对象的font-size为16px，则normal值为16px，类推。

说明：

设置或检索对象的列与列之间的间隙
  • 对应的脚本特性为columnGap。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-9.0 | 4.0-9.0 | 5.1 | 13.0-16.0 | 11.50
版本 | 10.0

写法：

内核类型 | 写法
Webkit(Chrome/Safari) | -webkit-column-gap
Gecko(Firefox) | -moz-column-gap
Presto(Opera) | column-gap
Trident(IE) | column-gap
W3C | column-gap

示例：


column-rule

其它多栏属性参考 选择其它项
  • columns
  • column-width
  • column-count
  • column-gap
  • column-rule
  • column-rule-width
  • column-rule-style
  • column-rule-color
  • column-span
  • column-fill
  • column-break-before
  • column-break-after
  • column-break-inside

column-rule

  • 版本：CSS3
  • 继承性：无

语法：

column-rule：[ column-rule-width ] || [ column-rule-style ] || [ column-rule-color ]

默认值：看每个独立属性

取值：

[ column-rule-width ]：
设置或检索对象的列与列之间的边框厚度。
[ column-rule-style ]：
设置或检索对象的列与列之间的边框样式。
[ column-rule-color ]：
设置或检索对象的列与列之间的边框颜色。

说明：

设置或检索对象的列与列之间的边框。复合属性。参阅border属性
  • 对应的脚本特性为columnRule。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-9.0 | 4.0-9.0 | 5.1 | 13.0-16.0 | 11.50
版本 | 10.0

写法：

内核类型 | 写法
Webkit(Chrome/Safari) | -webkit-column-rule
Gecko(Firefox) | -moz-column-rule
Presto(Opera) | column-rule
Trident(IE) | column-rule
W3C | column-rule

示例：


column-rule-width

其它多栏属性参考 选择其它项
  • columns
  • column-width
  • column-count
  • column-gap
  • column-rule
  • column-rule-width
  • column-rule-style
  • column-rule-color
  • column-span
  • column-fill
  • column-break-before
  • column-break-after
  • column-break-inside

column-rule-width

  • 版本：CSS3
  • 继承性：无

语法：

column-rule-width：<length> | thin | medium | thick

默认值：medium

取值：

<length>：
用长度值来定义边框的厚度。不允许负值
medium：
定义默认厚度的边框。
thin：
定义比默认厚度细的边框。
thick：
定义比默认厚度粗的边框。

说明：

设置或检索对象的列与列之间的边框厚度。参阅border-width属性
  • 如果column-rule-style设置为none，本属性将失去作用。
  • 对应的脚本特性为columnRuleWidth。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-9.0 | 4.0-9.0 | 5.1 | 13.0-16.0 | 11.50
版本 | 10.0

写法：

内核类型 | 写法
Webkit(Chrome/Safari) | -webkit-column-rule-width
Gecko(Firefox) | -moz-column-rule-width
Presto(Opera) | column-rule-width
Trident(IE) | column-rule-width
W3C | column-rule-width

示例：


column-rule-style

其它多栏属性参考 选择其它项
  • columns
  • column-width
  • column-count
  • column-gap
  • column-rule
  • column-rule-width
  • column-rule-style
  • column-rule-color
  • column-span
  • column-fill
  • column-break-before
  • column-break-after
  • column-break-inside

column-rule-style

  • 版本：CSS3
  • 继承性：无

语法：

column-rule-style：none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

默认值：none

取值：

none：
无轮廓。column-rule-color与column-rule-width将被忽略
hidden：
隐藏边框。
dotted：
点状轮廓。
dashed：
虚线轮廓。
solid：
实线轮廓
double：
双线轮廓。两条单线与其间隔的和等于指定的column-rule-width值
groove：
3D凹槽轮廓。
ridge：
3D凸槽轮廓。
inset：
3D凹边轮廓。
outset：
3D凸边轮廓。

说明：

设置或检索对象的列与列之间的边框样式。参阅border-style属性
  • 如果column-rule-width等于0，本属性将失去作用。
  • 对应的脚本特性为columnRuleStyle。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-9.0 | 4.0-9.0 | 5.1 | 13.0-16.0 | 11.50
版本 | 10.0

写法：

内核类型 | 写法
Webkit(Chrome/Safari) | -webkit-column-rule-style
Gecko(Firefox) | -moz-column-rule-style
Presto(Opera) | column-rule-style
Trident(IE) | column-rule-style
W3C | column-rule-style

示例：


column-rule-color

其它多栏属性参考 选择其它项
  • columns
  • column-width
  • column-count
  • column-gap
  • column-rule
  • column-rule-width
  • column-rule-style
  • column-rule-color
  • column-span
  • column-fill
  • column-break-before
  • column-break-after
  • column-break-inside

column-rule-color

  • 版本：CSS3
  • 继承性：无

语法：

column-rule-color：<color>

默认值：采用文本颜色

取值：

<color>：
指定颜色。

说明：

设置或检索对象的列与列之间的边框颜色。参阅border-color属性
  • 如果column-rule-width等于0或column-rule-style设置为none，本属性将被忽略。
  • 对应的脚本特性为columnRuleWidth。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-9.0 | 4.0-9.0 | 5.1 | 13.0-16.0 | 11.50
版本 | 10.0

写法：

内核类型 | 写法
Webkit(Chrome/Safari) | -webkit-column-rule-color
Gecko(Firefox) | -moz-column-rule-color
Presto(Opera) | column-rule-color
Trident(IE) | column-rule-color
W3C | column-rule-color

示例：


column-span

其它多栏属性参考 选择其它项
  • columns
  • column-width
  • column-count
  • column-gap
  • column-rule
  • column-rule-width
  • column-rule-style
  • column-rule-color
  • column-span
  • column-fill
  • column-break-before
  • column-break-after
  • column-break-inside

column-span

  • 版本：CSS3
  • 继承性：无

语法：

column-span：none | all

默认值：none

取值：

none：
不跨列
all：
横跨所有列

说明：

设置或检索对象元素是否横跨所有列。
  • 对应的脚本特性为columnSpan。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-9.0 | 4.0-9.0 | 5.1 | 13.0-16.0 | 11.50
版本 | 10.0

写法：

内核类型 | 写法
Webkit(Chrome/Safari) | -webkit-column-span
Gecko(Firefox) |
Presto(Opera) | column-span
Trident(IE) | column-span
W3C | column-span

示例：


column-fill

其它多栏属性参考 选择其它项
  • columns
  • column-width
  • column-count
  • column-gap
  • column-rule
  • column-rule-width
  • column-rule-style
  • column-rule-color
  • column-span
  • column-fill
  • column-break-before
  • column-break-after
  • column-break-inside

column-fill

  • 版本：CSS3
  • 继承性：无

语法：

column-fill：auto | balance

默认值：auto

取值：

auto：
列高度自适应内容
balance：
所有列的高度以其中最高的一列统一

说明：

设置或检索对象所有列的高度是否统一。
  • 对应的脚本特性为columnFill。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-9.0 | 4.0-9.0 | 5.1 | 13.0-11.60 | 11.50-11.60
版本 | 10.0

写法：

内核类型 | 写法
Webkit(Chrome/Safari) |
Gecko(Firefox) |
Presto(Opera) |
Trident(IE) | column-fill
W3C | column-fill

示例：


column-break-before

其它多栏属性参考 选择其它项
  • columns
  • column-width
  • column-count
  • column-gap
  • column-rule
  • column-rule-width
  • column-rule-style
  • column-rule-color
  • column-span
  • column-fill
  • column-break-before
  • column-break-after
  • column-break-inside

column-break-before

  • 版本：CSS3
  • 继承性：无

语法：

column-break-before：auto | always | avoid | left | right | page | column | avoid-page | avoid-column

默认值：auto

取值：

auto：
既不强迫也不禁止在元素之前断行并产生新列
always：
总是在元素之前断行并产生新列
avoid：
避免在元素之前断行并产生新列

说明：

设置或检索对象之前是否断行。
  • 对应的脚本特性为columnBreakBefore。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-9.0 | 4.0-9.0 | 5.1 | 13.0-16.0 | 11.50-11.60
版本 | 10.0

写法：

内核类型 | 写法
Webkit(Chrome/Safari) | -webkit-column-break-before
Gecko(Firefox) |
Presto(Opera) |
Trident(IE) | column-break-before
W3C | column-break-before

示例：


column-break-after

其它多栏属性参考 选择其它项
  • columns
  • column-width
  • column-count
  • column-gap
  • column-rule
  • column-rule-width
  • column-rule-style
  • column-rule-color
  • column-span
  • column-fill
  • column-break-before
  • column-break-after
  • column-break-inside

column-break-after

  • 版本：CSS3
  • 继承性：无

语法：

column-break-after：auto | always | avoid | left | right | page | column | avoid-page | avoid-column

默认值：auto

取值：

auto：
既不强迫也不禁止在元素之后断行并产生新列
always：
总是在元素之后断行并产生新列
avoid：
避免在元素之后断行并产生新列

说明：

设置或检索对象之后是否断行。
  • 对应的脚本特性为columnBreakAfter。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-9.0 | 4.0-9.0 | 5.1 | 13.0-16.0 | 11.50-11.60
版本 | 10.0

写法：

内核类型 | 写法
Webkit(Chrome/Safari) | -webkit-column-break-after
Gecko(Firefox) |
Presto(Opera) |
Trident(IE) | column-break-after
W3C | column-break-after

示例：


column-break-inside

其它多栏属性参考 选择其它项
  • columns
  • column-width
  • column-count
  • column-gap
  • column-rule
  • column-rule-width
  • column-rule-style
  • column-rule-color
  • column-span
  • column-fill
  • column-break-before
  • column-break-after
  • column-break-inside

column-break-inside

  • 版本：CSS3
  • 继承性：无

语法：

column-break-inside：auto | avoid | avoid-page | avoid-column

默认值：auto

取值：

auto：
既不强迫也不禁止在元素内部断行并产生新列
avoid：
避免在元素内部断行并产生新列

说明：

设置或检索对象内部是否断行。
  • 对应的脚本特性为columnBreakInside。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-9.0 | 4.0-9.0 | 5.1 | 13.0-16.0 | 11.50-11.60
版本 | 10.0

写法：

内核类型 | 写法
Webkit(Chrome/Safari) | -webkit-column-break-inside
Gecko(Firefox) |
Presto(Opera) |
Trident(IE) | column-break-inside
W3C | column-break-inside


Transform index

CSS参考手册 » 属性列表 » 2D变换属性
其它2D变换属性 选择其它项
  • transform
  • transform-origin

CSS 2D Transform Properties

  • 2D变换属性

2D变换 2D Transform

Properties 属性 | CSS Version 版本 | Inherit From Parent 继承性 | Description 简介
transform | CSS3 | 无 | 检索或设置对象的变换
transform-origin | CSS3 | 无 | 检索或设置对象中的变换所参照的原点

这种颜色 的链接表示是CSS3属性或原属性被CSS3修改并增加了新的属性值


transform

  • 版本：CSS3
  • 继承性：无

语法：

transform：none | matrix(<number>,<number>,<number>,<number>,<number>,<number>)? translate(<length>[,<length>])? translateX(<length>)? translateY(<length>)? rotate(<angle>)? scale(<number>[,<number>])? scaleX(<number>)? scaleY(<number>)? skew(<angle>[,<angle>])? skewX(<angle>) || skewY(<angle>)?

默认值：none

取值：

none：
无转换
matrix(<number>,<number>,<number>,<number>,<number>,<number>)：
以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a,b,c,d,e,f]变换矩阵
translate(<length>[, <length>])：
指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
translateX(<length>)：
指定对象X轴（水平方向）的平移
translateY(<length>)：
指定对象Y轴（垂直方向）的平移
rotate(<angle>)：
指定对象的2D rotation（2D旋转），需先有transform-origin属性的定义
scale(<number>[, <number>])：
指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值
scaleX(<number>)：
指定对象X轴的（水平方向）缩放
scaleY(<number>)：
指定对象Y轴的（垂直方向）缩放
skew(<angle> [, <angle>])：
指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
skewX(<angle>)：
指定对象X轴的（水平方向）扭曲
skewY(<angle>)：
指定对象Y轴的（垂直方向）扭曲

说明：

设置或检索对象的转换。
  • 对应的脚本特性为transform。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-8.0 | 4.0-9.0 | 5.1 | 13.0-16.0 | 11.50-11.60
版本 | 9.0-10.0

写法：

内核类型 | 写法
Webkit(Chrome/Safari) | -webkit-transform
Gecko(Firefox) | -moz-transform
Presto(Opera) | -o-transform
Trident(IE) | -ms-transform
W3C | transform

示例：


transform-origin

  • 版本：CSS3
  • 继承性：无

语法：

transform-origin：[ <percentage> | <length> | left | center① | right ] [ <percentage> | <length> | top | center② | bottom ]?

默认值：50% 50%，效果等同于center center

取值：

<percentage>：
用百分比指定坐标值。可以为负值。
<length>：
用长度值指定坐标值。可以为负值。
left：
指定原点的横坐标为left
center①：
指定原点的横坐标为center
right：
指定原点的横坐标为right
top：
指定原点的纵坐标为top
center②：
指定原点的纵坐标为center
bottom：
指定原点的纵坐标为bottom

说明：

设置或检索对象以某个原点进行转换。
  • 该属性提供2个参数值。
  • 如果提供两个，第一个用于横坐标，第二个用于纵坐标。
  • 如果只提供一个，该值将用于横坐标；纵坐标将默认为50%。
  • 对应的脚本特性为transformOrigin。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-8.0 | 4.0-9.0 | 5.1 | 13.0-16.0 | 11.50-11.60
版本 | 9.0-10.0

写法：

内核类型 | 写法
Webkit(Chrome/Safari) | -webkit-transform-origin
Gecko(Firefox) | -moz-transform-origin
Presto(Opera) | -o-transform-origin
Trident(IE) | -ms-transform-origin
W3C | transform-origin

示例：


Transition index

CSS参考手册 » 属性列表 » 过渡属性
其它过渡属性参考 选择其它项
  • transition
  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay

CSS Transition Properties

  • 过渡属性

过渡 Transition

Properties 属性 | CSS Version 版本 | Inherit From Parent 继承性 | Description 简介
transition | CSS3 | 无 | 复合属性。检索或设置对象变换时的过渡效果
transition-property | CSS3 | 无 | 检索或设置对象中的参与过渡的属性
transition-duration | CSS3 | 无 | 检索或设置对象过渡的持续时间
transition-timing-function | CSS3 | 无 | 检索或设置对象中过渡的类型
transition-delay | CSS3 | 无 | 检索或设置对象延迟过渡的时间

这种颜色 的链接表示是CSS3属性或原属性被CSS3修改并增加了新的属性值


transition

  • 版本：CSS3
  • 继承性：无

语法：

transition：[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]

默认值：看每个独立属性

取值：

[ transition-property ]：
检索或设置对象中的参与过渡的属性
[ transition-duration ]：
检索或设置对象过渡的持续时间
[ transition-timing-function ]：
检索或设置对象中过渡的动画类型
[ transition-delay ]：
检索或设置对象延迟过渡的时间

说明：

复合属性。检索或设置对象变换时的过渡。
  • 可以为同一元素的多个属性定义过渡效果。示例：

    缩写方式：

    transition:border-color .5s ease-in .1s, background-color .5s ease-in .1s, color .5s ease-in .1s;

    拆分方式：

    transition-property:border-color, background-color, color;
transition-duration:.5s, .5s, .5s;
transition-timing-function:ease-in, ease-in, ease-in;
transition-delay:.1s, .1s, .1s;
  • 如果定义了多个过渡的属性，而其他属性只有一个参数值，则表明所有需要过渡的属性都应用同一个参数值。据此可以对上面的例子进行缩写：

    拆分方式：

    transition-property:border-color, background-color, color;
transition-duration:.5s;
transition-timing-function:ease-in;
transition-delay:.1s;
  • 如果需要定义多个过渡属性且不想指定具体是哪些属性过渡，同时其他属性只有一个参数值，据此可以对上面的例子进行缩写：

    缩写方式：

    transition:all .5s ease-in .1s;

    拆分方式：

    transition-property:all;
transition-duration:.5s;
transition-timing-function:ease-in;
transition-delay:.1s;
  • 对应的脚本特性为transition。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-9.0 | 4.0-9.0 | 5.1 | 13.0-16.0 | 11.50-11.60
版本 | 10.0

写法：

内核类型 | 写法
Webkit(Chrome/Safari) | -webkit-transition
Gecko(Firefox) | -moz-transition
Presto(Opera) | -o-transition
Trident(IE) | -ms-transition
W3C | transition

示例：


transition-property

  • 版本：CSS3
  • 继承性：无

语法：

transition-property：all | none | <property>[ ,<property> ]*

默认值：all

取值：

all：
所有可以进行过渡的css属性
none：
不指定过渡的css属性
<property>：
指定要进行过渡的css属性

说明：

检索或设置对象中的参与过渡的属性。
  • 默认值为：all。默认为所有可以进行过渡的css属性。
  • 如果提供多个属性值，以逗号进行分隔。
  • 对应的脚本特性为transitionProperty。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-9.0 | 4.0-9.0 | 5.1 | 13.0-16.0 | 11.50-11.60
版本 | 10.0

写法：

内核类型 | 写法
Webkit(Chrome/Safari) | -webkit-transition-property
Gecko(Firefox) | -moz-transition-property
Presto(Opera) | -o-transition-property
Trident(IE) | -ms-transition-property
W3C | transition-property

示例：

有过渡效果的属性：

属性名称 | 类型
background-color | color
background-image | only gradients
background-position | percentage, length
border-bottom-color | color
border-bottom-width | length
border-color | color
border-left-color | color
border-left-width | length
border-right-color | color
border-right-width | length
border-spacing | length
border-top-color | color
border-top-width | length
border-width | length
bottom | length, percentage
color | color
crop | rectangle
font-size | length, percentage
font-weight | number
grid-* | various
height | length, percentage
left | length, percentage
letter-spacing | length
line-height | number, length, percentage
margin-bottom | length
margin-left | length
margin-right | length
margin-top | length
max-height | length, percentage
max-width | length, percentage
min-height | length, percentage
min-width | length, percentage
opacity | number
outline-color | color
outline-offset | integer
outline-width | length
padding-bottom | length
padding-left | length
padding-right | length
padding-top | length
right | length, percentage
text-indent | length, percentage
text-shadow | shadow
top | length, percentage
vertical-align | keywords, length, percentage
visibility | visibility
width | length, percentage
word-spacing | length, percentage
z-index | integer
zoom | number


transition-duration

  • 版本：CSS3
  • 继承性：无

语法：

transition-duration：<time>[ ,<time> ]*

默认值：0

取值：

<time>：
指定对象过渡的持续时间

说明：

检索或设置对象过渡的持续时间。
  • 如果提供多个属性值，以逗号进行分隔。
  • 对应的脚本特性为transitionDuration。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-9.0 | 4.0-9.0 | 5.1 | 13.0-16.0 | 11.50-11.60
版本 | 10.0

写法：

内核类型 | 写法
Webkit(Chrome/Safari) | -webkit-transition-duration
Gecko(Firefox) | -moz-transition-duration
Presto(Opera) | -o-transition-duration
Trident(IE) | -ms-transition-duration
W3C | transition-duration

示例：


transition-timing-function

  • 版本：CSS3
  • 继承性：无

语法：

transition-timing-function：linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)[ ,linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) ]*

默认值：ease

取值：

linear：
线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease：
平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in：
由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out：
由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out：
由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
cubic-bezier(<number>, <number>, <number>, <number>)：
特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

说明：

检索或设置对象中过渡的动画类型。
  • 如果提供多个属性值，以逗号进行分隔。
  • 对应的脚本特性为transitionTimingFunction。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-9.0 | 4.0-9.0 | 5.1 | 13.0-16.0 | 11.50-11.60
版本 | 10.0

写法：

内核类型 | 写法
Webkit(Chrome/Safari) | -webkit-transition-timing-function
Gecko(Firefox) | -moz-transition-timing-function
Presto(Opera) | -o-transition-timing-function
Trident(IE) | -ms-transition-timing-function
W3C | transition-timing-function

示例：


transition-delay

  • 版本：CSS3
  • 继承性：无

语法：

transition-delay：<time>[ ,<time> ]*

默认值：0

取值：

<time>：
指定对象过渡的延迟时间

说明：

检索或设置对象延迟过渡的时间。
  • 如果提供多个属性值，以逗号进行分隔。
  • 对应的脚本特性为transitionDelay。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-9.0 | 4.0-9.0 | 5.1 | 13.0-16.0 | 11.50-11.60
版本 | 10.0

写法：

内核类型 | 写法
Webkit(Chrome/Safari) | -webkit-transition-delay
Gecko(Firefox) | -moz-transition-delay
Presto(Opera) | -o-transition-delay
Trident(IE) | -ms-transition-delay
W3C | transition-delay

示例：


Animation index

CSS参考手册 » 属性列表 » 动画属性
其它动画属性参考 选择其它项
  • animation
  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-play-state
  • animation-fill-mode

CSS Animation Properties

  • 动画属性

动画 Animation

Properties 属性 | CSS Version 版本 | Inherit From Parent 继承性 | Description 简介
animation | CSS3 | 无 | 复合属性。检索或设置对象所应用的动画特效
animation-name | CSS3 | 无 | 检索或设置对象所应用的动画名称
animation-duration | CSS3 | 无 | 检索或设置对象动画的持续时间
animation-timing-function | CSS3 | 无 | 检索或设置对象动画的过渡类型
animation-delay | CSS3 | 无 | 检索或设置对象动画延迟的时间
animation-iteration-count | CSS3 | 无 | 检索或设置对象动画的循环次数
animation-direction | CSS3 | 无 | 检索或设置对象动画在循环中是否反向运动
animation-play-state | CSS3 | 无 | 检索或设置对象动画的状态
animation-fill-mode | CSS3 | 无 | 检索或设置对象动画时间之外的状态

这种颜色 的链接表示是CSS3属性或原属性被CSS3修改并增加了新的属性值


animation

其它动画属性参考 选择其它项
  • animation
  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-play-state
  • animation-fill-mode

animation

  • 版本：CSS3
  • 继承性：无

语法：

animation：[[ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [ animation-iteration-count ] || [ animation-direction ]] [ , [ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [ animation-iteration-count ] || [ animation-direction ]]*

默认值：看每个独立属性

相关属性：[ animation-play-state ]

取值：

[ animation-name ]：
检索或设置对象所应用的动画名称
[ animation-duration ]：
检索或设置对象动画的持续时间
[ animation-timing-function ]：
检索或设置对象动画的过渡类型
[ animation-delay ]：
检索或设置对象动画延迟的时间
[ animation-iteration-count ]：
检索或设置对象动画的循环次数
[ animation-direction ]：
检索或设置对象动画在循环中是否反向运动
[ animation-play-state ]：
检索或设置对象动画的状态。w3c正考虑是否将该属性移除，因为动画的状态可以通过其它的方式实现，比如重设样式

说明：

复合属性。检索或设置对象所应用的动画特效。
  • 如果提供多组属性值，以逗号进行分隔。
  • 对应的脚本特性为animation。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-9.0 | 4.0 | 5.1 | 13.0-16.0 | 11.50-11.60
版本 | 10.0 | 5.0-9.0

写法：

内核类型 | 写法
Webkit(Chrome/Safari) | -webkit-animation
Gecko(Firefox) | -moz-animation
Presto(Opera) |
Trident(IE) | -ms-animation
W3C | animation

示例：


animation-name

其它动画属性参考 选择其它项
  • animation
  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-play-state
  • animation-fill-mode

animation-name

  • 版本：CSS3
  • 继承性：无

语法：

animation-name：none | <identifier> [ , none | <identifier> ]*

默认值：none

相关属性：[ @keyframes ]

取值：

none：
不引用任何动画名称
<identifier>：
定义一个或多个动画名称(identifier标识)

说明：

检索或设置对象所应用的动画名称，必须与规则@keyframes配合使用，因为动画名称由@keyframes定义
  • 如果提供多个属性值，以逗号进行分隔。
  • 对应的脚本特性为animationName。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-9.0 | 4.0 | 5.1 | 13.0-16.0 | 11.50-11.60
版本 | 10.0 | 5.0-9.0

写法：

内核类型 | 写法
Webkit(Chrome/Safari) | -webkit-animation-name
Gecko(Firefox) | -moz-animation-name
Presto(Opera) |
Trident(IE) | -ms-animation-name
W3C | animation-name

示例：


animation-duration

其它动画属性参考 选择其它项
  • animation
  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-play-state
  • animation-fill-mode

animation-duration

  • 版本：CSS3
  • 继承性：无

语法：

animation-duration：<time> [ , <time> ]*

默认值：0

取值：

<time>：
指定对象动画的持续时间

说明：

检索或设置对象动画的持续时间
  • 如果提供多个属性值，以逗号进行分隔。
  • 对应的脚本特性为animationDuration。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-9.0 | 4.0 | 5.1 | 13.0-16.0 | 11.50-11.60
版本 | 10.0 | 5.0-9.0

写法：

内核类型 | 写法
Webkit(Chrome/Safari) | -webkit-animation-duration
Gecko(Firefox) | -moz-animation-duration
Presto(Opera) |
Trident(IE) | -ms-animation-duration
W3C | animation-duration

示例：


animation-timing-function

其它动画属性参考 选择其它项
  • animation
  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-play-state
  • animation-fill-mode

animation-timing-function

  • 版本：CSS3
  • 继承性：无

语法：

animation-timing-function：linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [ , linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) ]*

默认值：ease

取值：

linear：
线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease：
平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in：
由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out：
由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out：
由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
cubic-bezier(<number>, <number>, <number>, <number>)：
特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

说明：

检索或设置对象动画的过渡类型
  • 如果提供多个属性值，以逗号进行分隔。
  • 对应的脚本特性为animationTimingFunction。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-9.0 | 4.0 | 5.1 | 13.0-16.0 | 11.50-11.60
版本 | 10.0 | 5.0-9.0

写法：

内核类型 | 写法
Webkit(Chrome/Safari) | -webkit-animation-timing-function
Gecko(Firefox) | -moz-animation-timing-function
Presto(Opera) |
Trident(IE) | -ms-animation-timing-function
W3C | animation-timing-function

示例：


animation-delay

其它动画属性参考 选择其它项
  • animation
  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-play-state
  • animation-fill-mode

animation-delay

  • 版本：CSS3
  • 继承性：无

语法：

animation-delay：<time> [ , <time> ]*

默认值：0

取值：

<time>：
指定对象动画延迟的时间

说明：

检索或设置对象动画的延迟时间
  • 如果提供多个属性值，以逗号进行分隔。
  • 对应的脚本特性为animationDelay。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-9.0 | 4.0 | 5.1 | 13.0-16.0 | 11.50-11.60
版本 | 10.0 | 5.0-9.0

写法：

内核类型 | 写法
Webkit(Chrome/Safari) | -webkit-animation-delay
Gecko(Firefox) | -moz-animation-delay
Presto(Opera) |
Trident(IE) | -ms-animation-delay
W3C | animation-delay

示例：


animation-iteration-count

其它动画属性参考 选择其它项
  • animation
  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-play-state
  • animation-fill-mode

animation-iteration-count

  • 版本：CSS3
  • 继承性：无

语法：

animation-iteration-count：infinite | <number> [ , infinite | <number> ]*

默认值：1

取值：

infinite：
无限循环
<number>：
指定对象动画的具体循环次数

说明：

检索或设置对象动画的循环次数
  • 如果提供多个属性值，以逗号进行分隔。
  • 对应的脚本特性为animationIterationCount。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-9.0 | 4.0 | 5.1 | 13.0-16.0 | 11.50-11.60
版本 | 10.0 | 5.0-9.0

写法：

内核类型 | 写法
Webkit(Chrome/Safari) | -webkit-animation-iteration-count
Gecko(Firefox) | -moz-animation-iteration-count
Presto(Opera) |
Trident(IE) | -ms-animation-iteration-count
W3C | animation-iteration-count

示例：


animation-direction

其它动画属性参考 选择其它项
  • animation
  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-play-state
  • animation-fill-mode

animation-direction

  • 版本：CSS3
  • 继承性：无

语法：

animation-direction：normal | alternate [ , normal | alternate ]*

默认值：normal

取值：

normal：
正常方向
alternate：
正常与反向交替

说明：

检索或设置对象动画在循环中是否反向运动
  • 如果提供多个属性值，以逗号进行分隔。
  • 对应的脚本特性为animationDirection。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-9.0 | 4.0 | 5.1 | 13.0-16.0 | 11.50-11.60
版本 | 10.0 | 5.0-9.0

写法：

内核类型 | 写法
Webkit(Chrome/Safari) | -webkit-animation-direction
Gecko(Firefox) | -moz-animation-direction
Presto(Opera) |
Trident(IE) | -ms-animation-direction
W3C | animation-direction

示例：


animation-play-state

其它动画属性参考 选择其它项
  • animation
  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-play-state
  • animation-fill-mode

animation-play-state

  • 版本：CSS3
  • 继承性：无

语法：

animation-play-state：running | paused [ , running | paused ]*

默认值：running

取值：

running：
运动
paused：
暂停

说明：

检索或设置对象动画的状态
  • 如果提供多个属性值，以逗号进行分隔。
  • 对应的脚本特性为animationPlayState。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-9.0 | 4.0 | 5.1 | 13.0-16.0 | 11.50-11.60
版本 | 10.0 | 5.0-9.0

写法：

内核类型 | 写法
Webkit(Chrome/Safari) | -webkit-animation-play-state
Gecko(Firefox) | -moz-animation-play-state
Presto(Opera) |
Trident(IE) | -ms-animation-play-state
W3C | animation-play-state

示例：


animation-fill-mode

其它动画属性参考 选择其它项
  • animation
  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-play-state
  • animation-fill-mode

animation-fill-mode

  • 版本：CSS3
  • 继承性：无

语法：

animation-fill-mode：none | forwards | backwards | both [ , none | forwards | backwards | both ]*

默认值：none

取值：

none：
默认值。不设置对象动画之外的状态
forwards：
设置对象状态为动画结束时的状态
backwards：
设置对象状态为动画开始时的状态
both：
设置对象状态为动画结束或开始的状态

说明：

检索或设置对象动画时间之外的状态
  • 如果提供多个属性值，以逗号进行分隔。
  • 对应的脚本特性为animationFillMode。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-9.0 | 4.0 | 5.1 | 13.0-16.0 | 11.50-11.60
版本 | 10.0 | 5.0-9.0

写法：

内核类型 | 写法
Webkit(Chrome/Safari) | -webkit-animation-fill-mode
Gecko(Firefox) | -moz-animation-fill-mode
Presto(Opera) |
Trident(IE) | -ms-animation-fill-mode
W3C | animation-fill-mode

示例：


Printing index

CSS参考手册 » 属性列表 » 打印属性
其它打印属性参考 选择其它项
  • page
  • page-break-before
  • page-break-after
  • page-break-inside

CSS Printing Properties

  • 打印属性

打印 Printing

Properties 属性 | CSS Version 版本 | Inherit From Parent 继承性 | Description 简介
page | CSS3 | 无 | 检索或指定显示对象容器时使用的页面类型。
page-break-before | CSS2 | 无 | 检索或设置对象之前出现的页分割符。
page-break-after | CSS2 | 无 | 检索或设置对象之后出现的页分割符。
page-break-inside | CSS2 | 无 | 检索或设置对象容器内部出现的页分割符。

这种颜色 的链接表示是CSS3属性或原属性被CSS3修改并增加了新的属性值


page

  • 版本：CSS2
  • 继承性：无

语法：

page：auto | <identifier>

默认值：auto

取值：

auto：
参照当前的默认页面
<identifier>：
指定@page规则下的页面类型定义

说明：

检索或指定显示对象容器时使用的页面类型。参阅@page

  • 示例代码：

    @page rotated{size:landscape;}
p{page:rotated;page-break-before:left;}
  • 对应的脚本特性为page。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0-7.0 | 4.0 | 5.1 | 13.0 | 11.50
较早版本 | 8.0


page-break-before

  • 版本：CSS2
  • 继承性：无

语法：

page-break-before：auto | always | avoid | left | right

默认值：auto

取值：

auto：
如果需要，在对象之前插入页分割符
always：
始终在对象之前插入页分割符
avoid：
避免在对象前面插入页分割符
left：
在对象前面插入页分割符直到它到达一个空白的左页边
right：
在对象前面插入页分割符直到它到达一个空白的右页边

说明：

检索或设置对象之前出现的页分割符。
  • 对应的脚本特性为pageBreakBefore。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


page-break-after

  • 版本：CSS2
  • 继承性：无

语法：

page-break-after：auto | always | avoid | left | right

默认值：auto

取值：

auto：
如果需要，在对象之后插入页分割符
always：
始终在对象之后插入页分割符
avoid：
避免在对象之后插入页分割符
left：
在对象之后插入页分割符直到它到达一个空白的左页边
right：
在对象之后插入页分割符直到它到达一个空白的右页边

说明：

检索或设置对象之后出现的页分割符。
  • 对应的脚本特性为pageBreakAfter。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


page-break-inside

  • 版本：CSS2
  • 继承性：无

语法：

page-break-inside：auto | avoid

默认值：auto

取值：

auto：
如果需要，在当前对象内部插入页分割符
avoid：
避免在当前对象内部插入页分割符

说明：

检索或设置对象容器内部出现的页分割符。
  • 对应的脚本特性为pageBreakInside。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


Media Queries Index

CSS参考手册 » 属性列表 » 媒体查询属性
其它媒体查询属性 选择其它项
  • width
  • height
  • device-width
  • device-height
  • orientation
  • aspect-ratio
  • device-aspect-ratio
  • color
  • color-index
  • monochrome
  • resolution
  • scan
  • grid

CSS Media Queries Properties

  • 版本：CSS3

语法：

<media_query_list>：[<media_query>[',' <media_query>]*]?

<media_query>：[only | not]? <media_type> [and <expression>]* | <expression> [and <expression>]*

<expression>：'('<media_feature>[:<value>]?')'

说明：

通过不同的媒体类型和条件定义样式表规则。
  • 媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。
  • 媒体查询的大部分媒体特性都接受min和max用于表达“大于或等于”和“小与或等于”。如：width会有min-width和max-width

  • 媒体查询可以被用在CSS中的@media和@import规则上，也可以被用在HTML和XML中。

    示例代码：

    @media screen and (width:800px){ … }
@import url(example.css) screen and (width:800px);
<link media="screen and (width:800px)" rel="stylesheet" href="example.css" />
<?xml-stylesheet media="screen and (width:800px)" rel="stylesheet" href="example.css" ?>

媒体特性 Media Features

Media Features 媒体特性 | Value 取值 | Accepts min/max 接受min/max | Description 简介
width | <length> | yes | 定义输出设备中的页面可见区域宽度
height | <length> | yes | 定义输出设备中的页面可见区域高度
device-width | <length> | yes | 定义输出设备的屏幕可见宽度
device-height | <length> | yes | 定义输出设备的屏幕可见高度
orientation | portrait | landscape | no | 定义'height'是否大于或等于'width'。值portrait代表是，landscape代表否
aspect-ratio | <ratio> | yes | 定义'width'与'height'的比率
device-aspect-ratio | <ratio> | yes | 定义'device-width'与'device-height'的比率。如常见的显示器比率：4/3, 16/9, 16/10
color | <integer> | yes | 定义每一组输出设备的彩色原件个数。如果不是彩色设备，则值等于0
color-index | <integer> | yes | 定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0
monochrome | <integer> | yes | 定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0
resolution | <resolution> | yes | 定义设备的分辨率。如：96dpi, 300dpi, 118dpcm
scan | progressive | interlace | no | 定义电视类设备的扫描工序
grid | <integer> | no | 用来查询输出设备是否使用栅格或点阵。只有1和0才是有效值，1代表是，0代表否

这种颜色 的链接表示是CSS3属性或原属性被CSS3修改并增加了新的属性值

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0-8.0 | 4.0-6.0 | 5.1 | 13.0 | 11.50-11.51
较近版本 | 9.0


width of media features

其它媒体查询属性 选择其它项
  • width
  • height
  • device-width
  • device-height
  • orientation
  • aspect-ratio
  • device-aspect-ratio
  • color
  • color-index
  • monochrome
  • resolution
  • scan
  • grid

media features width

  • 版本：CSS3
  • 是否接受min/max：是

语法：

width：<length>

取值：

<length>：
用长度值来定义宽度。不允许负值

说明：

定义输出设备中的页面可见区域宽度。
  • 与盒模型width不同，媒体特性width的取值只能是<length>。
  • 本特性接受min和max前缀，因此可以派生出min-width和max-width两个媒体特性。

  • 简单列举几个应用示例：

    @media screen and (width){ … }
@import url(example.css) screen and (width:800px);
<link media="screen and (min-width:400px) and (max-width:900px)" rel="stylesheet" href="example.css" />
<?xml-stylesheet media="not screen and (width:800px)" rel="stylesheet" href="example.css" ?>

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0-8.0 | 4.0-6.0 | 5.1 | 13.0 | 11.50-11.51
较近版本 | 9.0

示例：


height of media features

其它媒体查询属性 选择其它项
  • width
  • height
  • device-width
  • device-height
  • orientation
  • aspect-ratio
  • device-aspect-ratio
  • color
  • color-index
  • monochrome
  • resolution
  • scan
  • grid

media features height

  • 版本：CSS3
  • 是否接受min/max：是

语法：

height：<length>

取值：

<length>：
用长度值来定义高度。不允许负值

说明：

定义输出设备中的页面可见区域高度。
  • 与盒模型height不同，媒体特性height的取值只能是<length>。
  • 本特性接受min和max前缀，因此可以派生出min-height和max-height两个媒体特性。

  • 简单列举几个应用示例：

    @media (min-height:400px){ … }
@media screen and (height:600px){ … }
@import url(example.css) screen and (height:800px);

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0-8.0 | 4.0-6.0 | 5.1 | 13.0 | 11.50-11.51
较近版本 | 9.0

示例：


device-width of media features

其它媒体查询属性 选择其它项
  • width
  • height
  • device-width
  • device-height
  • orientation
  • aspect-ratio
  • device-aspect-ratio
  • color
  • color-index
  • monochrome
  • resolution
  • scan
  • grid

media features device-width

  • 版本：CSS3
  • 是否接受min/max：是

语法：

device-width：<length>

取值：

<length>：
用长度值来定义宽度。不允许负值

说明：

定义输出设备的屏幕可见宽度。
  • 本特性接受min和max前缀，因此可以派生出min-device-width和max-device-width两个媒体特性。

  • 简单列举几个应用示例：

    @media screen and (device-width:1024px){ … }
@import url(example.css) screen and (min-device-width:800px);
<link media="screen and (min-device-width:300px) and (max-device-width:900px)" rel="stylesheet" href="example.css" />

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0-8.0 | 4.0-6.0 | 5.1 | 13.0 | 11.50-11.51
较近版本 | 9.0

示例：


device-height of media features

其它媒体查询属性 选择其它项
  • width
  • height
  • device-width
  • device-height
  • orientation
  • aspect-ratio
  • device-aspect-ratio
  • color
  • color-index
  • monochrome
  • resolution
  • scan
  • grid

media features device-height

  • 版本：CSS3
  • 是否接受min/max：是

语法：

device-height：<length>

取值：

<length>：
用长度值来定义高度。不允许负值

说明：

定义输出设备的屏幕可见高度。
  • 本特性接受min和max前缀，因此可以派生出min-device-height和max-device-height两个媒体特性。

  • 简单列举几个应用示例：

    @media screen and (device-height:800px){ … }
@import url(example.css) screen and (min-device-height:800px);
<link media="screen and (min-device-height:300px) and (max-device-height:900px)" rel="stylesheet" href="example.css" />

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0-8.0 | 4.0-6.0 | 5.1 | 13.0 | 11.50-11.51
较近版本 | 9.0

示例：


orientation of media features

其它媒体查询属性 选择其它项
  • width
  • height
  • device-width
  • device-height
  • orientation
  • aspect-ratio
  • device-aspect-ratio
  • color
  • color-index
  • monochrome
  • resolution
  • scan
  • grid

media features orientation

  • 版本：CSS3
  • 是否接受min/max：否

语法：

orientation：portrait | landscape

取值：

portrait：
指定输出设备中的页面可见区域高度大于或等于宽度
landscape：
除portrait值情况外，都是landscape

说明：

定义输出设备中的页面可见区域高度是否大于或等于宽度。
  • 本特性不接受min和max前缀。

  • 简单列举几个应用示例：

    @media screen and (orientation:portrait){ … }
@import url(example.css) screen and (orientation:landscape);

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0-8.0 | 4.0-6.0 | 5.1 | 13.0 | 11.50-11.51
较近版本 | 9.0

示例：


aspect-ratio of media features

其它媒体查询属性 选择其它项
  • width
  • height
  • device-width
  • device-height
  • orientation
  • aspect-ratio
  • device-aspect-ratio
  • color
  • color-index
  • monochrome
  • resolution
  • scan
  • grid

media features aspect-ratio

  • 版本：CSS3
  • 是否接受min/max：是

语法：

aspect-ratio：<ratio>

取值：

<ratio>：
指定比率

说明：

定义输出设备中的页面可见区域宽度与高度的比率。
  • 本特性接受min和max前缀，因此可以派生出min-aspect-ratio和max-aspect-ratio两个媒体特性。

  • 简单列举几个应用示例：

    @media screen and (aspect-ratio:1680/957){ … }
@import url(example.css) screen and (max-aspect-ratio:20/11);

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0-8.0 | 4.0-6.0 | 5.1 | 13.0 | 11.50-11.51
较近版本 | 9.0

示例：


device-aspect-ratio of media features

其它媒体查询属性 选择其它项
  • width
  • height
  • device-width
  • device-height
  • orientation
  • aspect-ratio
  • device-aspect-ratio
  • color
  • color-index
  • monochrome
  • resolution
  • scan
  • grid

media features device-aspect-ratio

  • 版本：CSS3
  • 是否接受min/max：是

语法：

device-aspect-ratio：<ratio>

取值：

<ratio>：
指定比率

说明：

定义输出设备的屏幕可见宽度与高度的比率。
  • 如常讲的显示器屏幕比率：4/3, 16/9, 16/10
  • 本特性接受min和max前缀，因此可以派生出min-device-aspect-ratio和max-device-aspect-ratio两个媒体特性。

  • 简单列举几个应用示例：

    @media screen and (device-aspect-ratio:4/3){ … }
@import url(example.css) screen and (min-device-aspect-ratio:4/3);

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0-8.0 | 4.0-6.0 | 5.1 | 13.0 | 11.50-11.51
较近版本 | 9.0

示例：


color of media features

其它媒体查询属性 选择其它项
  • width
  • height
  • device-width
  • device-height
  • orientation
  • aspect-ratio
  • device-aspect-ratio
  • color
  • color-index
  • monochrome
  • resolution
  • scan
  • grid

media features color

  • 版本：CSS3
  • 是否接受min/max：是

语法：

color：<integer>

取值：

<integer>：
用用整数值来定义彩色原件数。不允许负值

说明：

定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0
  • 与色彩color不同，媒体特性color的取值只能是<integer>，用来表示色彩数。
  • 本特性接受min和max前缀，因此可以派生出min-color和max-color两个媒体特性。

  • 简单列举几个应用示例：

    @media screen and (color){ … }
@import url(example.css) screen and (color:0);
<link media="screen and (min-color:1)" rel="stylesheet" href="example.css" />

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0-8.0 | 4.0-6.0 | 5.1 | 13.0 | 11.50-11.51
较近版本 | 9.0

示例：


color-index of media features

其它媒体查询属性 选择其它项
  • width
  • height
  • device-width
  • device-height
  • orientation
  • aspect-ratio
  • device-aspect-ratio
  • color
  • color-index
  • monochrome
  • resolution
  • scan
  • grid

media features color-index

  • 版本：CSS3
  • 是否接受min/max：是

语法：

color-index：<integer>

取值：

<integer>：
用用整数值来定义彩色查询表中的条目数。不允许负值

说明：

定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0
  • 本特性接受min和max前缀，因此可以派生出min-color-index和max-color-index两个媒体特性。

  • 简单列举几个应用示例：

    @media screen and (color-index){ … }
@import url(example.css) screen and (min-color-index:1);
<link media="screen and (color-index:0)" rel="stylesheet" href="example.css" />

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0-8.0 | 4.0-6.0 | 5.1 | 13.0 | 11.50-11.51
较近版本 | 9.0

示例：


monochrome of media features

其它媒体查询属性 选择其它项
  • width
  • height
  • device-width
  • device-height
  • orientation
  • aspect-ratio
  • device-aspect-ratio
  • color
  • color-index
  • monochrome
  • resolution
  • scan
  • grid

media features monochrome

  • 版本：CSS3
  • 是否接受min/max：是

语法：

monochrome：<integer>

取值：

<integer>：
用整数值来定义宽度。不允许负值

说明：

定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0
  • 本特性接受min和max前缀，因此可以派生出min-monochrome和max-monochrome两个媒体特性。

  • 简单列举几个应用示例：

    @media screen and (monochrome){ … }
@import url(example.css) screen and (monochrome:0);
<link media="screen and (min-monochrome:0) and (max-monochrome:10)" rel="stylesheet" href="example.css" />
<?xml-stylesheet media="not screen and (monochrome)" rel="stylesheet" href="example.css" ?>

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0-8.0 | 4.0-6.0 | 5.1 | 13.0 | 11.50-11.51
较近版本 | 9.0

示例：


resolution of media features

其它媒体查询属性 选择其它项
  • width
  • height
  • device-width
  • device-height
  • orientation
  • aspect-ratio
  • device-aspect-ratio
  • color
  • color-index
  • monochrome
  • resolution
  • scan
  • grid

media features resolution

  • 版本：CSS3
  • 是否接受min/max：是

语法：

resolution：<resolution>

取值：

<resolution>：
用整数值来定义宽度。不允许负值

说明：

定义设备的分辨率。如：96dpi, 300dpi, 118dpcm
  • 本特性接受min和max前缀，因此可以派生出min-resolution和max-resolution两个媒体特性。

  • 简单列举几个应用示例：

    @media screen and (resolution){ … }
@import url(example.css) screen and (min-resolution:96dpi);
<link media="screen and (resolution:96dpi)" rel="stylesheet" href="example.css" />

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0-8.0 | 4.0-6.0 | 5.1 | 13.0 | 11.50-11.51
较近版本 | 9.0

示例：


scan of media features

其它媒体查询属性 选择其它项
  • width
  • height
  • device-width
  • device-height
  • orientation
  • aspect-ratio
  • device-aspect-ratio
  • color
  • color-index
  • monochrome
  • resolution
  • scan
  • grid

media features scan

  • 版本：CSS3
  • 是否接受min/max：否

语法：

scan：progressive | interlace

取值：

progressive：
连续扫描
interlace：
交织扫描

说明：

定义电视类设备的扫描工序。
  • 本特性不接受min和max前缀。

  • 简单列举几个应用示例：

    @media tv and (scan:progressive){ … }
@import url(example.css) tv and (scan:interlace);

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0-8.0 | 4.0-6.0 | 5.1 | 13.0 | 11.50-11.51
较近版本 | 9.0

示例：


grid of media features

其它媒体查询属性 选择其它项
  • width
  • height
  • device-width
  • device-height
  • orientation
  • aspect-ratio
  • device-aspect-ratio
  • color
  • color-index
  • monochrome
  • resolution
  • scan
  • grid

media features grid

  • 版本：CSS3
  • 是否接受min/max：否

语法：

grid：<integer>

取值：

<integer>：
用整数值来定义是否使用栅格或点阵。只有1和0才是有效值，1代表是，0代表否

说明：

用来查询输出设备是否使用栅格或点阵。
  • 本特性不接受min和max前缀。

  • 简单列举几个应用示例：

    @media all and (grid){ … }
@import url(example.css) all and (grid:0);

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0-8.0 | 4.0-6.0 | 5.1 | 13.0 | 11.50-11.51
较近版本 | 9.0

示例：


Only IE index

CSS参考手册 » 属性列表 » Only IE属性
其它Only IE属性 选择其它项
  • scrollbar-3dlight-color
  • scrollbar-darkshadow-color
  • scrollbar-highlight-color
  • scrollbar-shadow-color
  • scrollbar-arrow-color
  • scrollbar-face-color
  • scrollbar-track-color
  • scrollbar-base-color
  • filter
  • behavior

CSS Only IE Properties

  • IE私有属性

常用IE私有属性

Properties 属性 | CSS Version 版本 | Inherit From Parent 继承性 | Description 简介
scrollbar-3dlight-color | CSS1 | 有 | 检索或设置对象滚动条3d亮色阴影边框(threedlightshadow)的外观颜色。
scrollbar-darkshadow-color | CSS1 | 有 | 检索或设置对象滚动条3d暗色阴影边框(threeddarkshadow)的外观颜色。
scrollbar-highlight-color | CSS1 | 有 | 检索或设置对象滚动条3d高亮边框(threedhighlight)的外观颜色。
scrollbar-shadow-color | CSS1 | 有 | 检索或设置对象滚动条3d阴影边框(threedshadow)的外观颜色。
scrollbar-arrow-color | CSS1 | 有 | 检索或设置对象滚动条方向箭头的颜色。当滚动条出现但不可用时，此属性失效。
scrollbar-face-color | CSS1 | 有 | 检索或设置对象滚动条3D表面的(threedface)的外观颜色。
scrollbar-track-color | CSS1 | 有 | 检索或设置对象滚动条拖动区域的外观颜色。
scrollbar-base-color | CSS1 | 无 | 检索或设置对象滚动条基准颜色，其它界面颜色将据此自动调整。
filter | CSS1 | 无 | 设置或检索对象所应用的滤镜效果。
behavior | CSS1 | 无 | 设置或检索对象的DHTML行为。


scrollbar-3dlight-color

其它Only IE属性 选择其它项
  • scrollbar-3dlight-color
  • scrollbar-darkshadow-color
  • scrollbar-highlight-color
  • scrollbar-shadow-color
  • scrollbar-arrow-color
  • scrollbar-face-color
  • scrollbar-track-color
  • scrollbar-base-color
  • filter
  • behavior

scrollbar-3dlight-color

  • 版本：CSS1
  • 继承性：无

语法：

scrollbar-3dlight-color：<color>

默认值：threedlightshadow

取值：

<color>：
指定颜色。

说明：

检索或设置对象滚动条3d亮色阴影边框(threedlightshadow)的外观颜色。
  • 对应的脚本特性为scrollbar3dLightColor。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0-6.0 | 5.1 | 13.0 | 11.50-11.51

示例：


scrollbar-darkshadow-color

其它Only IE属性 选择其它项
  • scrollbar-3dlight-color
  • scrollbar-darkshadow-color
  • scrollbar-highlight-color
  • scrollbar-shadow-color
  • scrollbar-arrow-color
  • scrollbar-face-color
  • scrollbar-track-color
  • scrollbar-base-color
  • filter
  • behavior

scrollbar-darkshadow-color

  • 版本：CSS1
  • 继承性：无

语法：

scrollbar-darkshadow-color：<color>

默认值：threeddarkshadow

取值：

<color>：
指定颜色。

说明：

检索或设置对象滚动条3d暗色阴影边框(threeddarkshadow)的外观颜色。
  • 对应的脚本特性为scrollbarDarkShadowColor。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0-6.0 | 5.1 | 13.0 | 11.50-11.51

示例：


scrollbar-highlight-color

其它Only IE属性 选择其它项
  • scrollbar-3dlight-color
  • scrollbar-darkshadow-color
  • scrollbar-highlight-color
  • scrollbar-shadow-color
  • scrollbar-arrow-color
  • scrollbar-face-color
  • scrollbar-track-color
  • scrollbar-base-color
  • filter
  • behavior

scrollbar-highlight-color

  • 版本：CSS1
  • 继承性：无

语法：

scrollbar-highlight-color：<color>

默认值：threedhighlight

取值：

<color>：
指定颜色。

说明：

检索或设置对象滚动条3d高亮边框(threedhighlight)的外观颜色。
  • 对应的脚本特性为scrollbarHighlightColor。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0-6.0 | 5.1 | 13.0 | 11.50-11.51

示例：


scrollbar-shadow-color

其它Only IE属性 选择其它项
  • scrollbar-3dlight-color
  • scrollbar-darkshadow-color
  • scrollbar-highlight-color
  • scrollbar-shadow-color
  • scrollbar-arrow-color
  • scrollbar-face-color
  • scrollbar-track-color
  • scrollbar-base-color
  • filter
  • behavior

scrollbar-shadow-color

  • 版本：CSS1
  • 继承性：无

语法：

scrollbar-shadow-color：<color>

默认值：threedshadow

取值：

<color>：
指定颜色。

说明：

检索或设置对象滚动条3d阴影边框(threedshadow)的外观颜色。
  • 对应的脚本特性为scrollbarShadowColor。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0-6.0 | 5.1 | 13.0 | 11.50-11.51

示例：


scrollbar-arrow-color

其它Only IE属性 选择其它项
  • scrollbar-3dlight-color
  • scrollbar-darkshadow-color
  • scrollbar-highlight-color
  • scrollbar-shadow-color
  • scrollbar-arrow-color
  • scrollbar-face-color
  • scrollbar-track-color
  • scrollbar-base-color
  • filter
  • behavior

scrollbar-arrow-color

  • 版本：CSS1
  • 继承性：无

语法：

scrollbar-arrow-color：<color>

默认值：buttontext

取值：

<color>：
指定颜色。

说明：

检索或设置对象滚动条方向箭头的颜色。当滚动条出现但不可用时，此属性失效。
  • 对应的脚本特性为scrollbarArrowColor。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0-6.0 | 5.1 | 13.0 | 11.50-11.51

示例：


scrollbar-base-color

其它Only IE属性 选择其它项
  • scrollbar-3dlight-color
  • scrollbar-darkshadow-color
  • scrollbar-highlight-color
  • scrollbar-shadow-color
  • scrollbar-arrow-color
  • scrollbar-face-color
  • scrollbar-track-color
  • scrollbar-base-color
  • filter
  • behavior

scrollbar-base-color

  • 版本：CSS1
  • 继承性：无

语法：

scrollbar-base-color：<color>

默认值：transparent

取值：

<color>：
指定颜色。

说明：

检索或设置对象滚动条基准颜色。其它界面颜色将据此自动调整。
  • 对应的脚本特性为scrollbarBaseColor。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0-6.0 | 5.1 | 13.0 | 11.50-11.51

示例：


scrollbar-track-color

其它Only IE属性 选择其它项
  • scrollbar-3dlight-color
  • scrollbar-darkshadow-color
  • scrollbar-highlight-color
  • scrollbar-shadow-color
  • scrollbar-arrow-color
  • scrollbar-face-color
  • scrollbar-track-color
  • scrollbar-base-color
  • filter
  • behavior

scrollbar-track-color

  • 版本：CSS1
  • 继承性：无

语法：

scrollbar-track-color：<color>

默认值：transparent

取值：

<color>：
指定颜色。

说明：

检索或设置对象滚动条拖动区域的外观颜色。
  • 对应的脚本特性为scrollbarTrackColor。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0-6.0 | 5.1 | 13.0 | 11.50-11.51

示例：


scrollbar-face-color

其它Only IE属性 选择其它项
  • scrollbar-3dlight-color
  • scrollbar-darkshadow-color
  • scrollbar-highlight-color
  • scrollbar-shadow-color
  • scrollbar-arrow-color
  • scrollbar-face-color
  • scrollbar-track-color
  • scrollbar-base-color
  • filter
  • behavior

scrollbar-face-color

  • 版本：CSS1
  • 继承性：无

语法：

scrollbar-face-color：<color>

默认值：threedface

取值：

<color>：
指定颜色。

说明：

检索或设置对象滚动条3D表面的(threedface)的外观颜色。
  • 对应的脚本特性为scrollbarFaceColor。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0-6.0 | 5.1 | 13.0 | 11.50-11.51

示例：


filter

其它Only IE属性 选择其它项
  • scrollbar-3dlight-color
  • scrollbar-darkshadow-color
  • scrollbar-highlight-color
  • scrollbar-shadow-color
  • scrollbar-arrow-color
  • scrollbar-face-color
  • scrollbar-track-color
  • scrollbar-base-color
  • filter
  • behavior

filter

  • 版本：CSS1
  • 继承性：无

语法：

filter：<filter>+

取值：

<filter>：
要使用的滤镜效果。多个滤镜之间用空格隔开。

说明：

设置或检索对象所应用的滤镜效果。
  • 最常用的滤镜效果是不透明效果，如果要实现50%的不透明度（其它高级浏览器的实现参阅opacity）：

    示例代码：

    div{filter:alpha(opacity=50);} /* for IE8 and earlier */
div{opacity:.5;} /* for IE9 and other browsers */

    以上2段代码的效果相同

  • 对应的脚本特性为filter。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0-6.0 | 5.1 | 13.0 | 11.50-11.51

示例：


behavior

其它Only IE属性 选择其它项
  • scrollbar-3dlight-color
  • scrollbar-darkshadow-color
  • scrollbar-highlight-color
  • scrollbar-shadow-color
  • scrollbar-arrow-color
  • scrollbar-face-color
  • scrollbar-track-color
  • scrollbar-base-color
  • filter
  • behavior

behavior

  • 版本：CSS1
  • 继承性：无

语法：

behavior：<url> | url(#objID) | url(#default#behaviorName)

取值：

<url>：
使用绝对或相对地址指定DHTML行为组件（.htc）
url(#objID)：
用二进制实现DHTML行为，#objID为object对象指定的id特性
url(#default#behaviorName)：
IE的默认行为。由behaviorName指定

说明：

设置或检索对象的DHTML行为。
  • 多个行为之间用空格隔开。
  • 对应的脚本特性为behavior。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0-6.0 | 5.1 | 13.0 | 11.50-11.51

示例：

div{behavior:url(fly.htc) url(shy.htc);}


Only Firefox index

CSS参考手册 » 属性列表 » Only Firefox属性
Only Firefox属性 选择其它项
  • border-colors
  • border-top-colors
  • border-right-colors
  • border-bottom-colors
  • border-left-colors

CSS Only Firefox Properties

  • Firefox私有属性

常用Firefox私有属性 Only Firefox

Properties 属性 | CSS Version 版本 | Inherit From Parent 继承性 | Description 简介
border-colors | CSS3 | 无 | 设置或检索对象边框的多重颜色
border-top-colors | CSS3 | 无 | 设置或检索对象顶边的多重颜色
border-right-colors | CSS3 | 无 | 设置或检索对象右边的多重颜色
border-bottom-colors | CSS3 | 无 | 设置或检索对象底边的多重颜色
border-left-colors | CSS3 | 无 | 设置或检索对象左边的多重颜色

这种颜色 的链接表示是CSS3属性或原属性被CSS3修改并增加了新的属性值


border-colors

  • 版本：CSS3
  • 继承性：无

语法：

border-colors：<color>

相关属性：[ border-top-colors ] || [ border-right-colors ] || [ border-bottom-colors ] || [ border-left-colors ]

取值：

<color>：
指定颜色。

说明：

设置或检索对象边框的多重颜色。参阅border-color属性。
  • border的width为(n)px，那么最多可以设置n组边框色，每组边框色宽度为1px；如果border的width为10px，却只设置了6组边框色，那么最后一组边框色将自动渲染剩余的宽度
  • 本属性为伪属性，其分裂后的border-top-colors, border-right-colors, border-bottom-colors, border-left-colors才是有效属性。

示例：


border-top-colors

  • 版本：CSS3
  • 继承性：无

语法：

border-top-colors：<color> [, <color> ]*

相关属性：[ border-right-colors ] || [ border-bottom-colors ] || [ border-left-colors ]

取值：

<color>：
指定颜色。

说明：

设置或检索对象顶部边框的多重颜色。参阅border-top-color属性。
  • border的width为(n)px，那么最多可以设置n组边框色，每组边框色宽度为1px；如果border的width为10px，却只设置了6组边框色，那么最后一组边框色将自动渲染剩余的宽度
  • 对应的脚本特性为borderTopColors。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0 - 9.0 | 4.0-6.0 | 4.0 - 5.1 | 10.0 - 13.0 | 10.6 - 11.51

写法：

内核类型 | 写法(border-top-colors)
Webkit(Chrome/Safari) |
Gecko(Firefox) | -moz-border-top-colors
Presto(Opera) |
Trident(IE) |

示例：


border-right-colors

  • 版本：CSS3
  • 继承性：无

语法：

border-right-colors：<color> [, <color> ]*

相关属性：[ border-top-colors ] || [ border-bottom-colors ] || [ border-left-colors ]

取值：

<color>：
指定颜色。

说明：

设置或检索对象右边边框的多重颜色。参阅border-right-color属性。
  • border的width为(n)px，那么最多可以设置n组边框色，每组边框色宽度为1px；如果border的width为10px，却只设置了6组边框色，那么最后一组边框色将自动渲染剩余的宽度
  • 对应的脚本特性为borderRightColors。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0 - 9.0 | 4.0-6.0 | 4.0 - 5.1 | 10.0 - 13.0 | 10.6 - 11.51

写法：

内核类型 | 写法(border-right-colors)
Webkit(Chrome/Safari) |
Gecko(Firefox) | -moz-border-right-colors
Presto(Opera) |
Trident(IE) |

示例：


border-bottom-colors

  • 版本：CSS3
  • 继承性：无

语法：

border-bottom-colors：<color> [, <color> ]*

相关属性：[ border-top-colors ] || [ border-right-colors ] || [ border-left-colors ]

取值：

<color>：
指定颜色。

说明：

设置或检索对象底部边框的多重颜色。参阅border-bottom-color属性。
  • border的width为(n)px，那么最多可以设置n组边框色，每组边框色宽度为1px；如果border的width为10px，却只设置了6组边框色，那么最后一组边框色将自动渲染剩余的宽度
  • 对应的脚本特性为borderBottomColors。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0 - 9.0 | 4.0-6.0 | 4.0 - 5.1 | 10.0 - 13.0 | 10.6 - 11.51

写法：

内核类型 | 写法(border-bottom-colors)
Webkit(Chrome/Safari) |
Gecko(Firefox) | -moz-border-bottom-colors
Presto(Opera) |
Trident(IE) |

示例：


border-left-colors

  • 版本：CSS3
  • 继承性：无

语法：

border-left-colors：<color> [, <color> ]*

相关属性：[ border-top-colors ] || [ border-right-colors ] || [ border-bottom-colors ]

取值：

<color>：
指定颜色。

说明：

设置或检索对象左边边框的多重颜色。参阅border-left-color属性。
  • border的width为(n)px，那么最多可以设置n组边框色，每组边框色宽度为1px；如果border的width为10px，却只设置了6组边框色，那么最后一组边框色将自动渲染剩余的宽度
  • 对应的脚本特性为borderLeftColors。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0 - 9.0 | 4.0-6.0 | 4.0 - 5.1 | 10.0 - 13.0 | 10.6 - 11.51

写法：

内核类型 | 写法(border-left-colors)
Webkit(Chrome/Safari) |
Gecko(Firefox) | -moz-border-left-colors
Presto(Opera) |
Trident(IE) |

示例：


Selectors index

CSS参考手册 » 选择符列表
其它选择符参考 选择其它项
  • 元素选择符
  • 关系选择符
  • 属性选择符
  • 伪类选择符
  • 伪对象选择符

CSS Selectors Reference

  • CSS选择符集合

元素选择符 Element Selectors

  • *
  • E
  • E#id
  • E.class

关系选择符 Relationship Selectors

  • E F
  • E>F
  • E+F
  • E~F

属性选择符 Attribute Selectors

  • E[att]
  • E[att="val"]
  • E[att~="val"]
  • E[att^="val"]
  • E[att$="val"]
  • E[att*="val"]
  • E[att|="val"]

伪类选择符 Pseudo-Classes Selectors

  • E:link
  • E:visited
  • E:hover
  • E:active
  • E:focus
  • E:lang()
  • E:not()
  • E:root
  • E:first-child
  • E:last-child
  • E:only-child
  • E:nth-child(n)
  • E:nth-last-child(n)
  • E:first-of-type
  • E:last-of-type
  • E:only-of-type
  • E:nth-of-type(n)
  • E:nth-last-of-type(n)
  • E:empty
  • E:checked
  • E:enabled
  • E:disabled
  • E:target
  • @page:first
  • @page:left
  • @page:right

伪对象选择符 Pseudo-Element Selectors

  • E:first-letter/E::first-letter
  • E:first-line/E::first-line
  • E:before/E::before
  • E:after/E::after
  • E::selection

这种颜色 的链接表示是CSS3选择符或原选择符被CSS3修改并赋予了新的特性


Element Selectors index

CSS参考手册 » 选择符列表 » 元素选择符
其它元素选择符参考 选择其它项
  • 通配选择符(*)
  • 类型选择符(E)
  • ID选择符(E#id)
  • 类选择符(E.class)

CSS Element Selectors

  • 元素选择符

元素选择符 Element Selectors

Selectors 选择符 | Name 名称 | CSS Version 版本 | Description 简介
* | 通配选择符(Universal Selector) | CSS2 | 所有元素对象。
E | 类型选择符(Type Selector) | CSS1 | 以文档语言对象类型作为选择符。
E#myid | id选择符(ID Selector) | CSS1 | 以唯一标识符id属性等于myid的E对象作为选择符。
E.myclass | class选择符(Class Selector) | CSS1 | 以class属性包含myclass的E对象作为选择符。

这种颜色 的链接表示是CSS3选择符或原选择符被CSS3修改并赋予了新的特性


Universal Selector (*)

其它元素选择符参考 选择其它项
  • 通配选择符(*)
  • 类型选择符(E)
  • ID选择符(E#id)
  • 类选择符(E.class)

通配选择符 (*)

  • 版本：CSS2

语法：

*{ sRules }

说明：

选定所有对象。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0 #1 | 4.0 | 5.1 | 13.0 | 11.50
最近版本 | 7.0
  1. IE6及更早浏览器并不支持通配选择符(*)，而是将它忽略了，所以也变相的能看到效果。

示例：


Type Selector (E)

其它元素选择符参考 选择其它项
  • 通配选择符(*)
  • 类型选择符(E)
  • ID选择符(E#id)
  • 类选择符(E.class)

类型选择符 (E)

  • 版本：CSS1

语法：

E{ sRules }

说明：

以文档语言对象类型作为选择符。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


ID Selector (E#myid)

其它元素选择符参考 选择其它项
  • 通配选择符(*)
  • 类型选择符(E)
  • ID选择符(E#id)
  • 类选择符(E.class)

id选择符 (E#myid)

  • 版本：CSS1

语法：

E#myid{ sRules }

说明：

以唯一标识符id属性等于myid的E对象作为选择符。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


Class Selector (E.myclass)

其它元素选择符参考 选择其它项
  • 通配选择符(*)
  • 类型选择符(E)
  • ID选择符(E#id)
  • 类选择符(E.class)

class选择符 (E.myclass)

  • 版本：CSS1

语法：

E.myclass{ sRules }

说明：

以class属性包含myclass的E对象作为选择符。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


Relationship Selectors index

CSS参考手册 » 选择符列表 » 关系选择符
其它关系选择符参考 选择其它项
  • 包含选择符(E F)
  • 子选择符(E>F)
  • 相邻选择符(E+F)
  • 兄弟选择符(E~F)

CSS Relationship Selectors

  • 关系选择符

关系选择符 Relationship Selectors

Selectors 选择符 | Name 名称 | CSS Version 版本 | Description 简介
E F | 包含选择符(Descendant combinator) | CSS1 | 选择所有被E元素包含的F元素。
E>F | 子选择符(Child combinator) | CSS2 | 选择所有作为E元素的子元素F。
E+F | 相邻选择符(Adjacent sibling combinator) | CSS2 | 选择紧贴在E元素之后F元素。
E~F | 兄弟选择符(General sibling combinator) | CSS3 | 选择E元素所有兄弟元素F。

这种颜色 的链接表示是CSS3选择符或原选择符被CSS3修改并赋予了新的特性


Descendant combinator (E F)

其它关系选择符参考 选择其它项
  • 包含选择符(E F)
  • 子选择符(E>F)
  • 相邻选择符(E+F)
  • 兄弟选择符(E~F)

包含选择符 (E F)

  • 版本：CSS1

语法：

E F{ sRules }

说明：

选择所有被E元素包含的F元素。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


Child combinator (E>F)

其它关系选择符参考 选择其它项
  • 包含选择符(E F)
  • 子选择符(E>F)
  • 相邻选择符(E+F)
  • 兄弟选择符(E~F)

子选择符 (E>F)

  • 版本：CSS2

语法：

E>F{ sRules }

说明：

选择所有作为E元素的子元素F。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50
最近版本 | 7.0

示例：


Adjacent sibling combinator (E+F)

其它关系选择符参考 选择其它项
  • 包含选择符(E F)
  • 子选择符(E>F)
  • 相邻选择符(E+F)
  • 兄弟选择符(E~F)

相邻选择符 (E+F)

  • 版本：CSS2

语法：

E+F{ sRules }

说明：

选择紧贴在E元素之后F元素。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50
最近版本 | 7.0

示例：


General sibling combinator (E~F)

其它关系选择符参考 选择其它项
  • 包含选择符(E F)
  • 子选择符(E>F)
  • 相邻选择符(E+F)
  • 兄弟选择符(E~F)

兄弟选择符 (E~F)

  • 版本：CSS3

语法：

E~F{ sRules }

说明：

选择E元素后面的所有兄弟元素F。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50
最近版本 | 7.0

示例：


Attribute Selectors index

CSS参考手册 » 选择符列表 » 属性选择符
其它选择符参考 选择其它项
  • E[att]
  • E[att="val"]
  • E[att~="val"]
  • E[att^="val"]
  • E[att$="val"]
  • E[att*="val"]
  • E[att|="val"]

CSS Attribute Selectors

  • 属性选择符

属性选择符 Attribute Selectors

Selectors 选择符 | CSS Version 版本 | Description 简介
E[att] | CSS2 | 选择具有att属性的E元素。
E[att="val"] | CSS2 | 选择具有att属性且属性值等于val的E元素。
E[att~="val"] | CSS2 | 选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素。
E[att^="val"] | CSS3 | 选择具有att属性且属性值为以val开头的字符串的E元素。
E[att$="val"] | CSS3 | 选择具有att属性且属性值为以val结尾的字符串的E元素。
E[att*="val"] | CSS3 | 选择具有att属性且属性值为包含val的字符串的E元素。
E[att|="val"] | CSS2 | 选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。

这种颜色 的链接表示是CSS3选择符或原选择符被CSS3修改并赋予了新的特性


E[att]

其它属性选择符参考 选择其它项
  • E[att]
  • E[att="val"]
  • E[att~="val"]
  • E[att^="val"]
  • E[att$="val"]
  • E[att*="val"]
  • E[att|="val"]

属性选择符 E[att]

  • 版本：CSS2

语法：

E[att]{ sRules }

说明：

选择具有att属性的E元素。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50
较新版本 | 7.0

示例：


E[att="val"]

其它属性选择符参考 选择其它项
  • E[att]
  • E[att="val"]
  • E[att~="val"]
  • E[att^="val"]
  • E[att$="val"]
  • E[att*="val"]
  • E[att|="val"]

属性选择符 E[att="val"]

  • 版本：CSS2

语法：

E[att="val"]{ sRules }

说明：

选择具有att属性且属性值等于val的E元素。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50
最近版本 | 7.0

示例：


E[att~="val"]

其它属性选择符参考 选择其它项
  • E[att]
  • E[att="val"]
  • E[att~="val"]
  • E[att^="val"]
  • E[att$="val"]
  • E[att*="val"]
  • E[att|="val"]

属性选择符 E[att~="val"]

  • 版本：CSS2

语法：

E[att~="val"]{ sRules }

说明：

选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50
最近版本 | 7.0

示例：


E[att^="val"]

其它属性选择符参考 选择其它项
  • E[att]
  • E[att="val"]
  • E[att~="val"]
  • E[att^="val"]
  • E[att$="val"]
  • E[att*="val"]
  • E[att|="val"]

属性选择符 E[att^="val"]

  • 版本：CSS3

语法：

E[att^="val"]{ sRules }

说明：

选择具有att属性且属性值为以val开头的字符串的E元素。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50
最近版本 | 7.0

示例：


E[att$="val"]

其它属性选择符参考 选择其它项
  • E[att]
  • E[att="val"]
  • E[att~="val"]
  • E[att^="val"]
  • E[att$="val"]
  • E[att*="val"]
  • E[att|="val"]

属性选择符 E[att$="val"]

  • 版本：CSS3

语法：

E[att$="val"]{ sRules }

说明：

选择具有att属性且属性值为以val结尾的字符串的E元素。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50
最近版本 | 7.0

示例：


E[att*="val"]

其它属性选择符参考 选择其它项
  • E[att]
  • E[att="val"]
  • E[att~="val"]
  • E[att^="val"]
  • E[att$="val"]
  • E[att*="val"]
  • E[att|="val"]

属性选择符 E[att*="val"]

  • 版本：CSS3

语法：

E[att*="val"]{ sRules }

说明：

选择具有att属性且属性值为包含val的字符串的E元素。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50
最近版本 | 7.0

示例：


E[att|="val"]

其它属性选择符参考 选择其它项
  • E[att]
  • E[att="val"]
  • E[att~="val"]
  • E[att^="val"]
  • E[att$="val"]
  • E[att*="val"]
  • E[att|="val"]

属性选择符 E[att|="val"]

  • 版本：CSS2

语法：

E[att|="val"]{ sRules }

说明：

选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50
最近版本 | 7.0

示例：


Pseudo-Classes Selectors index

CSS参考手册 » 选择符列表 » 伪类选择符
其它伪类选择符参考 选择其它项
  • E:link
  • E:visited
  • E:hover
  • E:active
  • E:focus
  • E:lang()
  • E:not()
  • E:root
  • E:first-child
  • E:last-child
  • E:only-child
  • E:nth-child(n)
  • E:nth-last-child(n)
  • E:first-of-type
  • E:last-of-type
  • E:only-of-type
  • E:nth-of-type(n)
  • E:nth-last-of-type(n)
  • E:empty
  • E:checked
  • E:enabled
  • E:disabled
  • E:target
  • @page:first
  • @page:left
  • @page:right

CSS Pseudo-Classes Selectors

  • 伪类选择符

伪类选择符 Pseudo-Classes Selectors

Selectors 选择符 | CSS Version 版本 | Description 简介
E:link | CSS1 | 设置超链接a在未被访问前的样式。
E:visited | CSS1 | 设置超链接a在其链接地址已被访问过时的样式。
E:hover | CSS1/CSS2 | 设置元素在其鼠标悬停时的样式。
E:active | CSS1/CSS2 | 设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。
E:focus | CSS1/CSS2 | 设置元素在成为输入焦点（该元素的onfocus事件发生）时的样式。
E:lang() | CSS2 | 匹配使用特殊语言的E元素。
E:not() | CSS3 | 匹配不含有s选择符的元素E。
E:root | CSS3 | 匹配E元素在文档的根元素。
E:first-child | CSS2 | 匹配父元素的第一个子元素E。
E:last-child | CSS3 | 匹配父元素的最后一个子元素E。
E:only-child | CSS3 | 匹配父元素仅有的一个子元素E。
E:nth-child(n) | CSS3 | 匹配父元素的第n个子元素E。
E:nth-last-child(n) | CSS3 | 匹配父元素的倒数第n个子元素E。
E:first-of-type | CSS3 | 匹配同类型中的第一个同级兄弟元素E。
E:last-of-type | CSS3 | 匹配同类型中的最后一个同级兄弟元素E。
E:only-of-type | CSS3 | 匹配同类型中的唯一的一个同级兄弟元素E。
E:nth-of-type(n) | CSS3 | 匹配同类型中的第n个同级兄弟元素E。
E:nth-last-of-type(n) | CSS3 | 匹配同类型中的倒数第n个同级兄弟元素E。
E:empty | CSS3 | 匹配没有任何子元素（包括text节点）的元素E。
E:checked | CSS3 | 匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)
E:enabled | CSS3 | 匹配用户界面上处于可用状态的元素E。
E:disabled | CSS3 | 匹配用户界面上处于禁用状态的元素E。
E:target | CSS3 | 匹配相关URL指向的E元素。
@page:first | CSS2 | 设置页面容器第一页使用的样式。仅用于@page规则
@page:left | CSS2 | 设置页面容器位于装订线左边的所有页面使用的样式。仅用于@page规则
@page:right | CSS2 | 设置页面容器位于装订线右边的所有页面使用的样式。仅用于@page规则

这种颜色 的链接表示是CSS3选择符或原选择符被CSS3修改并赋予了新的特性


E:link

其它伪类选择符参考 选择其它项
  • E:link
  • E:visited
  • E:hover
  • E:active
  • E:focus
  • E:lang()
  • E:not()
  • E:root
  • E:first-child
  • E:last-child
  • E:only-child
  • E:nth-child(n)
  • E:nth-last-child(n)
  • E:first-of-type
  • E:last-of-type
  • E:only-of-type
  • E:nth-of-type(n)
  • E:nth-last-of-type(n)
  • E:empty
  • E:checked
  • E:enabled
  • E:disabled
  • E:target
  • @page:first
  • @page:left
  • @page:right

链接伪类选择符 E:link

  • 版本：CSS1

语法：

E:link{ sRules }

说明：

设置超链接a在未被访问前的样式。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


E:visited

其它伪类选择符参考 选择其它项
  • E:link
  • E:visited
  • E:hover
  • E:active
  • E:focus
  • E:lang()
  • E:not()
  • E:root
  • E:first-child
  • E:last-child
  • E:only-child
  • E:nth-child(n)
  • E:nth-last-child(n)
  • E:first-of-type
  • E:last-of-type
  • E:only-of-type
  • E:nth-of-type(n)
  • E:nth-last-of-type(n)
  • E:empty
  • E:checked
  • E:enabled
  • E:disabled
  • E:target
  • @page:first
  • @page:left
  • @page:right

链接伪类选择符 E:visited

  • 版本：CSS1

语法：

E:visited{ sRules }

说明：

设置超链接a在其链接地址已被访问过时的样式。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


E:hover

其它伪类选择符参考 选择其它项
  • E:link
  • E:visited
  • E:hover
  • E:active
  • E:focus
  • E:lang()
  • E:not()
  • E:root
  • E:first-child
  • E:last-child
  • E:only-child
  • E:nth-child(n)
  • E:nth-last-child(n)
  • E:first-of-type
  • E:last-of-type
  • E:only-of-type
  • E:nth-of-type(n)
  • E:nth-last-of-type(n)
  • E:empty
  • E:checked
  • E:enabled
  • E:disabled
  • E:target
  • @page:first
  • @page:left
  • @page:right

用户行为伪类选择符 E:hover

  • 版本：CSS1/CSS2

语法：

E:hover{ sRules }

说明：

设置元素在其鼠标悬停时的样式。
  • IE6只支持a元素的:hover，从IE7开始支持其它元素的:hover。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0 #1 | 4.0 | 5.1 | 13.0 | 11.50
最近版本 | 7.0
  1. IE6及更早浏览器只支持a元素的:hover，从IE7开始支持其它元素的:hover。

示例：


E:active

其它伪类选择符参考 选择其它项
  • E:link
  • E:visited
  • E:hover
  • E:active
  • E:focus
  • E:lang()
  • E:not()
  • E:root
  • E:first-child
  • E:last-child
  • E:only-child
  • E:nth-child(n)
  • E:nth-last-child(n)
  • E:first-of-type
  • E:last-of-type
  • E:only-of-type
  • E:nth-of-type(n)
  • E:nth-last-of-type(n)
  • E:empty
  • E:checked
  • E:enabled
  • E:disabled
  • E:target
  • @page:first
  • @page:left
  • @page:right

用户行为伪类选择符 E:active

  • 版本：CSS1/CSS2

语法：

E:active{ sRules }

说明：

设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。
  • IE6,7只支持a元素的:active，从IE8开始支持其它元素的:active。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0-7.0 #1 | 4.0 | 5.1 | 13.0 | 11.50
最近版本 | 8.0
  1. IE7及更早浏览器只支持a元素的:active，从IE8开始支持其它元素的:active。

示例：


E:focus

其它伪类选择符参考 选择其它项
  • E:link
  • E:visited
  • E:hover
  • E:active
  • E:focus
  • E:lang()
  • E:not()
  • E:root
  • E:first-child
  • E:last-child
  • E:only-child
  • E:nth-child(n)
  • E:nth-last-child(n)
  • E:first-of-type
  • E:last-of-type
  • E:only-of-type
  • E:nth-of-type(n)
  • E:nth-last-of-type(n)
  • E:empty
  • E:checked
  • E:enabled
  • E:disabled
  • E:target
  • @page:first
  • @page:left
  • @page:right

用户行为伪类选择符 E:focus

  • 版本：CSS1/CSS2

语法：

E:focus{ sRules }

说明：

设置对象在成为输入焦点（该对象的onfocus事件发生）时的样式。
  • webkit内核浏览器会默认给:focus状态的元素加上outline的样式。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0-7.0 | 4.0 | 5.1 | 13.0 | 11.50
最近版本 | 8.0

示例：


E:lang()

其它伪类选择符参考 选择其它项
  • E:link
  • E:visited
  • E:hover
  • E:active
  • E:focus
  • E:lang()
  • E:not()
  • E:root
  • E:first-child
  • E:last-child
  • E:only-child
  • E:nth-child(n)
  • E:nth-last-child(n)
  • E:first-of-type
  • E:last-of-type
  • E:only-of-type
  • E:nth-of-type(n)
  • E:nth-last-of-type(n)
  • E:empty
  • E:checked
  • E:enabled
  • E:disabled
  • E:target
  • @page:first
  • @page:left
  • @page:right

语言伪类选择符 E:lang()

  • 版本：CSS2

语法：

E:lang(){ sRules }

说明：

匹配使用特殊语言的E元素。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0-7.0 | 4.0 | 5.1 | 13.0 | 11.50
最近版本 | 8.0

示例：


E:not()

其它伪类选择符参考 选择其它项
  • E:link
  • E:visited
  • E:hover
  • E:active
  • E:focus
  • E:lang()
  • E:not()
  • E:root
  • E:first-child
  • E:last-child
  • E:only-child
  • E:nth-child(n)
  • E:nth-last-child(n)
  • E:first-of-type
  • E:last-of-type
  • E:only-of-type
  • E:nth-of-type(n)
  • E:nth-last-of-type(n)
  • E:empty
  • E:checked
  • E:enabled
  • E:disabled
  • E:target
  • @page:first
  • @page:left
  • @page:right

否定伪类选择符 E:not()

  • 版本：CSS3

语法：

E:not(){ sRules }

说明：

匹配不含有s选择符的元素E。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0-8.0 | 4.0 | 5.1 | 13.0 | 11.50
最近版本 | 9.0

示例：


E:root

其它伪类选择符参考 选择其它项
  • E:link
  • E:visited
  • E:hover
  • E:active
  • E:focus
  • E:lang()
  • E:not()
  • E:root
  • E:first-child
  • E:last-child
  • E:only-child
  • E:nth-child(n)
  • E:nth-last-child(n)
  • E:first-of-type
  • E:last-of-type
  • E:only-of-type
  • E:nth-of-type(n)
  • E:nth-last-of-type(n)
  • E:empty
  • E:checked
  • E:enabled
  • E:disabled
  • E:target
  • @page:first
  • @page:left
  • @page:right

结构性伪类选择符 E:root

  • 版本：CSS3

语法：

E:root{ sRules }

说明：

匹配E元素在文档的根元素。在HTML中，根元素永远是HTML

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0-8.0 | 4.0 | 5.1 | 13.0 | 11.50
最近版本 | 9.0

示例：


E:first-child

其它伪类选择符参考 选择其它项
  • E:link
  • E:visited
  • E:hover
  • E:active
  • E:focus
  • E:lang()
  • E:not()
  • E:root
  • E:first-child
  • E:last-child
  • E:only-child
  • E:nth-child(n)
  • E:nth-last-child(n)
  • E:first-of-type
  • E:last-of-type
  • E:only-of-type
  • E:nth-of-type(n)
  • E:nth-last-of-type(n)
  • E:empty
  • E:checked
  • E:enabled
  • E:disabled
  • E:target
  • @page:first
  • @page:left
  • @page:right

结构性伪类选择符 E:first-child

  • 版本：CSS2

语法：

E:first-child{ sRules }

说明：

匹配父元素的第一个子元素E。
  • 要使该属性生效，E对象必须是某个对象的子元素。
  • 这里可能存在误解：

    示例代码：

    <ul>
    <li>列表项一</li>
    <li>列表项二</li>
    <li>列表项三</li>
    <li>列表项四</li>
</ul>

    在上述代码中，如果我们要设置第一个li的样式，那么代码应该写成li:first-child{sRules}，而不是ul:first-child{sRules}。其它相关的伪类都如此。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50
较新版本 | 7.0

示例：


E:last-child

其它伪类选择符参考 选择其它项
  • E:link
  • E:visited
  • E:hover
  • E:active
  • E:focus
  • E:lang()
  • E:not()
  • E:root
  • E:first-child
  • E:last-child
  • E:only-child
  • E:nth-child(n)
  • E:nth-last-child(n)
  • E:first-of-type
  • E:last-of-type
  • E:only-of-type
  • E:nth-of-type(n)
  • E:nth-last-of-type(n)
  • E:empty
  • E:checked
  • E:enabled
  • E:disabled
  • E:target
  • @page:first
  • @page:left
  • @page:right

结构性伪类选择符 E:last-child

  • 版本：CSS3

语法：

E:last-child{ sRules }

说明：

匹配父元素的最后一个子元素E。
  • 要使该属性生效，E对象必须是某个对象的子元素。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0-8.0 | 4.0 | 5.1 | 13.0 | 11.50
较新版本 | 9.0

示例：


E:only-child

其它伪类选择符参考 选择其它项
  • E:link
  • E:visited
  • E:hover
  • E:active
  • E:focus
  • E:lang()
  • E:not()
  • E:root
  • E:first-child
  • E:last-child
  • E:only-child
  • E:nth-child(n)
  • E:nth-last-child(n)
  • E:first-of-type
  • E:last-of-type
  • E:only-of-type
  • E:nth-of-type(n)
  • E:nth-last-of-type(n)
  • E:empty
  • E:checked
  • E:enabled
  • E:disabled
  • E:target
  • @page:first
  • @page:left
  • @page:right

结构性伪类选择符 E:only-child

  • 版本：CSS3

语法：

E:only-child{ sRules }

说明：

匹配父元素仅有的一个子元素E。
  • 要使该属性生效，E对象必须是某个对象的子元素。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0-8.0 | 4.0 | 5.1 | 13.0 | 11.50
较新版本 | 9.0

示例：


E:nth-child(n)

其它伪类选择符参考 选择其它项
  • E:link
  • E:visited
  • E:hover
  • E:active
  • E:focus
  • E:lang()
  • E:not()
  • E:root
  • E:first-child
  • E:last-child
  • E:only-child
  • E:nth-child(n)
  • E:nth-last-child(n)
  • E:first-of-type
  • E:last-of-type
  • E:only-of-type
  • E:nth-of-type(n)
  • E:nth-last-of-type(n)
  • E:empty
  • E:checked
  • E:enabled
  • E:disabled
  • E:target
  • @page:first
  • @page:left
  • @page:right

结构性伪类选择符 E:nth-child(n)

  • 版本：CSS3

语法：

E:nth-child(n){ sRules }

说明：

匹配父元素的第n个子元素E。
  • 要使该属性生效，E对象必须是某个对象的子元素。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0-8.0 | 4.0 | 5.1 | 13.0 | 11.50
较新版本 | 9.0

示例：


E:nth-last-child(n)

其它伪类选择符参考 选择其它项
  • E:link
  • E:visited
  • E:hover
  • E:active
  • E:focus
  • E:lang()
  • E:not()
  • E:root
  • E:first-child
  • E:last-child
  • E:only-child
  • E:nth-child(n)
  • E:nth-last-child(n)
  • E:first-of-type
  • E:last-of-type
  • E:only-of-type
  • E:nth-of-type(n)
  • E:nth-last-of-type(n)
  • E:empty
  • E:checked
  • E:enabled
  • E:disabled
  • E:target
  • @page:first
  • @page:left
  • @page:right

结构性伪类选择符 E:nth-last-child(n)

  • 版本：CSS3

语法：

E:nth-last-child(n){ sRules }

说明：

匹配父元素的倒数第n个子元素E。
  • 要使该属性生效，E对象必须是某个对象的子元素。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0-8.0 | 4.0 | 5.1 | 13.0 | 11.50
较新版本 | 9.0

示例：


E:first-of-type

其它伪类选择符参考 选择其它项
  • E:link
  • E:visited
  • E:hover
  • E:active
  • E:focus
  • E:lang()
  • E:not()
  • E:root
  • E:first-child
  • E:last-child
  • E:only-child
  • E:nth-child(n)
  • E:nth-last-child(n)
  • E:first-of-type
  • E:last-of-type
  • E:only-of-type
  • E:nth-of-type(n)
  • E:nth-last-of-type(n)
  • E:empty
  • E:checked
  • E:enabled
  • E:disabled
  • E:target
  • @page:first
  • @page:left
  • @page:right

结构性伪类选择符 E:first-of-type

  • 版本：CSS3

语法：

E:first-of-type{ sRules }

说明：

匹配同类型中的第一个同级兄弟元素E。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0-8.0 | 4.0 | 5.1 | 13.0 | 11.50
较新版本 | 9.0

示例：


E:last-of-type

其它伪类选择符参考 选择其它项
  • E:link
  • E:visited
  • E:hover
  • E:active
  • E:focus
  • E:lang()
  • E:not()
  • E:root
  • E:first-child
  • E:last-child
  • E:only-child
  • E:nth-child(n)
  • E:nth-last-child(n)
  • E:first-of-type
  • E:last-of-type
  • E:only-of-type
  • E:nth-of-type(n)
  • E:nth-last-of-type(n)
  • E:empty
  • E:checked
  • E:enabled
  • E:disabled
  • E:target
  • @page:first
  • @page:left
  • @page:right

结构性伪类选择符 E:last-of-type

  • 版本：CSS3

语法：

E:last-of-type{ sRules }

说明：

匹配同类型中的最后一个同级兄弟元素E。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0-8.0 | 4.0 | 5.1 | 13.0 | 11.50
较新版本 | 9.0

示例：


E:only-of-type

其它伪类选择符参考 选择其它项
  • E:link
  • E:visited
  • E:hover
  • E:active
  • E:focus
  • E:lang()
  • E:not()
  • E:root
  • E:first-child
  • E:last-child
  • E:only-child
  • E:nth-child(n)
  • E:nth-last-child(n)
  • E:first-of-type
  • E:last-of-type
  • E:only-of-type
  • E:nth-of-type(n)
  • E:nth-last-of-type(n)
  • E:empty
  • E:checked
  • E:enabled
  • E:disabled
  • E:target
  • @page:first
  • @page:left
  • @page:right

结构性伪类选择符 E:only-of-type

  • 版本：CSS3

语法：

E:only-of-type{ sRules }

说明：

匹配同类型中的唯一的一个同级兄弟元素E。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0-8.0 | 4.0 | 5.1 | 13.0 | 11.50
较新版本 | 9.0

示例：


E:nth-of-type(n)

其它伪类选择符参考 选择其它项
  • E:link
  • E:visited
  • E:hover
  • E:active
  • E:focus
  • E:lang()
  • E:not()
  • E:root
  • E:first-child
  • E:last-child
  • E:only-child
  • E:nth-child(n)
  • E:nth-last-child(n)
  • E:first-of-type
  • E:last-of-type
  • E:only-of-type
  • E:nth-of-type(n)
  • E:nth-last-of-type(n)
  • E:empty
  • E:checked
  • E:enabled
  • E:disabled
  • E:target
  • @page:first
  • @page:left
  • @page:right

结构性伪类选择符 E:nth-of-type(n)

  • 版本：CSS3

语法：

E:nth-of-type(n){ sRules }

说明：

匹配同类型中的第n个同级兄弟元素E。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0-8.0 | 4.0 | 5.1 | 13.0 | 11.50
较新版本 | 9.0

示例：


E:nth-last-of-type(n)

其它伪类选择符参考 选择其它项
  • E:link
  • E:visited
  • E:hover
  • E:active
  • E:focus
  • E:lang()
  • E:not()
  • E:root
  • E:first-child
  • E:last-child
  • E:only-child
  • E:nth-child(n)
  • E:nth-last-child(n)
  • E:first-of-type
  • E:last-of-type
  • E:only-of-type
  • E:nth-of-type(n)
  • E:nth-last-of-type(n)
  • E:empty
  • E:checked
  • E:enabled
  • E:disabled
  • E:target
  • @page:first
  • @page:left
  • @page:right

结构性伪类选择符 E:nth-last-of-type(n)

  • 版本：CSS3

语法：

E:nth-last-of-type(n){ sRules }

说明：

匹配同类型中的倒数第n个同级兄弟元素E。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0-8.0 | 4.0 | 5.1 | 13.0 | 11.50
较新版本 | 9.0

示例：


E:empty

其它伪类选择符参考 选择其它项
  • E:link
  • E:visited
  • E:hover
  • E:active
  • E:focus
  • E:lang()
  • E:not()
  • E:root
  • E:first-child
  • E:last-child
  • E:only-child
  • E:nth-child(n)
  • E:nth-last-child(n)
  • E:first-of-type
  • E:last-of-type
  • E:only-of-type
  • E:nth-of-type(n)
  • E:nth-last-of-type(n)
  • E:empty
  • E:checked
  • E:enabled
  • E:disabled
  • E:target
  • @page:first
  • @page:left
  • @page:right

结构性伪类选择符 E:empty

  • 版本：CSS3

语法：

E:empty{ sRules }

说明：

匹配没有任何子元素（包括text节点）的元素E。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0-8.0 | 4.0 | 5.1 | 13.0 | 11.50
较新版本 | 9.0

示例：


E:checked

其它伪类选择符参考 选择其它项
  • E:link
  • E:visited
  • E:hover
  • E:active
  • E:focus
  • E:lang()
  • E:not()
  • E:root
  • E:first-child
  • E:last-child
  • E:only-child
  • E:nth-child(n)
  • E:nth-last-child(n)
  • E:first-of-type
  • E:last-of-type
  • E:only-of-type
  • E:nth-of-type(n)
  • E:nth-last-of-type(n)
  • E:empty
  • E:checked
  • E:enabled
  • E:disabled
  • E:target
  • @page:first
  • @page:left
  • @page:right

用户界面(UI)元素状态伪类选择符 E:checked

  • 版本：CSS3

语法：

E:checked{ sRules }

说明：

匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0-8.0 | 4.0 | 5.1 | 13.0 | 11.50
较新版本 | 9.0

示例：


E:enabled

其它伪类选择符参考 选择其它项
  • E:link
  • E:visited
  • E:hover
  • E:active
  • E:focus
  • E:lang()
  • E:not()
  • E:root
  • E:first-child
  • E:last-child
  • E:only-child
  • E:nth-child(n)
  • E:nth-last-child(n)
  • E:first-of-type
  • E:last-of-type
  • E:only-of-type
  • E:nth-of-type(n)
  • E:nth-last-of-type(n)
  • E:empty
  • E:checked
  • E:enabled
  • E:disabled
  • E:target
  • @page:first
  • @page:left
  • @page:right

用户界面(UI)元素状态伪类选择符 E:enabled

  • 版本：CSS3

语法：

E:enabled{ sRules }

说明：

匹配用户界面上处于可用状态的元素E。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0-8.0 | 4.0 | 5.1 | 13.0 | 11.50
较新版本 | 9.0

示例：


E:disabled

其它伪类选择符参考 选择其它项
  • E:link
  • E:visited
  • E:hover
  • E:active
  • E:focus
  • E:lang()
  • E:not()
  • E:root
  • E:first-child
  • E:last-child
  • E:only-child
  • E:nth-child(n)
  • E:nth-last-child(n)
  • E:first-of-type
  • E:last-of-type
  • E:only-of-type
  • E:nth-of-type(n)
  • E:nth-last-of-type(n)
  • E:empty
  • E:checked
  • E:enabled
  • E:disabled
  • E:target
  • @page:first
  • @page:left
  • @page:right

用户界面(UI)元素状态伪类选择符 E:disabled

  • 版本：CSS3

语法：

E:disabled{ sRules }

说明：

匹配用户界面上处于禁用状态的元素E。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0-8.0 | 4.0 | 5.1 | 13.0 | 11.50
较新版本 | 9.0

示例：


E:target

其它伪类选择符参考 选择其它项
  • E:link
  • E:visited
  • E:hover
  • E:active
  • E:focus
  • E:lang()
  • E:not()
  • E:root
  • E:first-child
  • E:last-child
  • E:only-child
  • E:nth-child(n)
  • E:nth-last-child(n)
  • E:first-of-type
  • E:last-of-type
  • E:only-of-type
  • E:nth-of-type(n)
  • E:nth-last-of-type(n)
  • E:empty
  • E:checked
  • E:enabled
  • E:disabled
  • E:target
  • @page:first
  • @page:left
  • @page:right

目标伪类选择符 E:target

  • 版本：CSS3

语法：

E:target{ sRules }

说明：

匹配相关URL指向的E元素。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0-8.0 | 4.0 | 5.1 | 13.0 | 11.50
较新版本 | 9.0

示例：


@page:first

其它伪类选择符参考 选择其它项
  • E:link
  • E:visited
  • E:hover
  • E:active
  • E:focus
  • E:lang()
  • E:not()
  • E:root
  • E:first-child
  • E:last-child
  • E:only-child
  • E:nth-child(n)
  • E:nth-last-child(n)
  • E:first-of-type
  • E:last-of-type
  • E:only-of-type
  • E:nth-of-type(n)
  • E:nth-last-of-type(n)
  • E:empty
  • E:checked
  • E:enabled
  • E:disabled
  • E:target
  • @page:first
  • @page:left
  • @page:right

打印伪类选择符 @page:first

  • 版本：CSS2

语法：

@page:first{ sRules }

说明：

设置页面容器第一页使用的样式。仅用于@page规则。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0-7.0 | 4.0-6.0 | 5.1 | 13.0 | 11.50
较早版本 | 8.0

示例：


@page:left

其它伪类选择符参考 选择其它项
  • E:link
  • E:visited
  • E:hover
  • E:active
  • E:focus
  • E:lang()
  • E:not()
  • E:root
  • E:first-child
  • E:last-child
  • E:only-child
  • E:nth-child(n)
  • E:nth-last-child(n)
  • E:first-of-type
  • E:last-of-type
  • E:only-of-type
  • E:nth-of-type(n)
  • E:nth-last-of-type(n)
  • E:empty
  • E:checked
  • E:enabled
  • E:disabled
  • E:target
  • @page:first
  • @page:left
  • @page:right

打印伪类选择符 @page:left

  • 版本：CSS2

语法：

@page:left{ sRules }

说明：

设置页面容器位于装订线左边的所有页面使用的样式。仅用于@page规则。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0-7.0 | 4.0-6.0 | 5.1 | 13.0 | 11.50
较早版本 | 8.0

示例：


@page:right

其它伪类选择符参考 选择其它项
  • E:link
  • E:visited
  • E:hover
  • E:active
  • E:focus
  • E:lang()
  • E:not()
  • E:root
  • E:first-child
  • E:last-child
  • E:only-child
  • E:nth-child(n)
  • E:nth-last-child(n)
  • E:first-of-type
  • E:last-of-type
  • E:only-of-type
  • E:nth-of-type(n)
  • E:nth-last-of-type(n)
  • E:empty
  • E:checked
  • E:enabled
  • E:disabled
  • E:target
  • @page:first
  • @page:left
  • @page:right

打印伪类选择符 @page:right

  • 版本：CSS2

语法：

@page:right{ sRules }

说明：

设置页面容器位于装订线右边的所有页面使用的样式。仅用于@page规则。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0-7.0 | 4.0-6.0 | 5.1 | 13.0 | 11.50
较早版本 | 8.0

示例：


Pseudo-Element Selectors index

CSS参考手册 » 选择符列表 » 伪对象选择符
其它伪对象选择符 选择其它项
  • E::first-letter
  • E::first-line
  • E::before
  • E::after
  • E::selection

CSS Pseudo-Element Selectors

  • 伪对象选择符

伪对象选择符 Pseudo-Element Selectors

Selectors 选择符 | CSS Version 版本 | Description 简介
E:first-letter/E::first-letter | CSS1/CSS3 | 设置对象内的第一个字符的样式。
E:first-line/E::first-line | CSS1/CSS3 | 设置对象内的第一行的样式。
E:before/E::before | CSS2/CSS3 | 设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用
E:after/E::after | CSS2/CSS3 | 设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用
E::selection | CSS3 | 设置对象被选择时的颜色。

* CSS3将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes Selectors)，但以前的写法仍然有效。

这种颜色 的链接表示是CSS3选择符或原选择符被CSS3修改并赋予了新的特性


E:first-letter/E::first-letter

  • 版本：CSS1/CSS3

语法：

E:first-letter/E::first-letter{ sRules }

说明：

设置对象内的第一个字符的样式。
  • 此伪对象仅作用于块对象。内联对象要使用该伪对象，必须先将其设置为块级对象。
  • 该伪类常被用来配合font-size属性和float属性制作首字下沉效果。
  • IE6在使用该选择符时有个显式的BUG：选择符与包含规则的花括号之间不能紧挨着，需留有空格或换行。同时还存在该BUG的选择符包括：E:first-line

  • CSS3将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes Selectors)，但以前的写法仍然有效。

    即E:first-letter可转化为E::first-letter

兼容性(E:first-letter)：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0 #1 | 4.0 | 5.1 | 13.0 | 11.50
最近版本 | 7.0
  1. IE6及更早浏览器下，E:first-letter选择符与包含规则的花括号之间不能紧挨着，需留有空格或换行。

兼容性(E::first-letter)：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 5.5-6.0 #1 | 4.0 | 5.1 | 13.0 | 11.50
较新版本 | 7.0-8.0
最近版本 | 9.0
  1. IE5.5及IE6本质上并不支持E::first-letter的写法，而是忽略掉了E::first-letter中的一个冒号，仍以E:first-letter来解释，所以它们也变相的支持了E::first-letter。

示例：


E:first-line/E::first-line

  • 版本：CSS1/CSS3

语法：

E:first-line/E::first-line{ sRules }

说明：

设置对象内的第一行的样式。
  • 此伪对象仅作用于块对象。内联对象要使用该伪对象，必须先将其设置为块级对象。
  • IE6在使用该选择符时有个显式的BUG：选择符与包含规则的花括号之间不能紧挨着，需留有空格或换行。同时还存在该BUG的选择符包括：E:first-letter

  • CSS3将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes Selectors)，但以前的写法仍然有效。

    即E:first-line可转化为E::first-line

兼容性(E:first-line)：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0 #1 | 4.0 | 5.1 | 13.0 | 11.50
最近版本 | 7.0
  1. IE6及更早浏览器下，E:first-line选择符与包含规则的花括号之间不能紧挨着，需留有空格或换行。

兼容性(E::first-line)：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 5.5-6.0 #1 | 4.0 | 5.1 | 13.0 | 11.50
较新版本 | 7.0-8.0
最近版本 | 9.0
  1. IE5.5及IE6本质上并不支持E::first-line的写法，而是忽略掉了E::first-line中的一个冒号，仍以E:first-line来解释，所以它们也变相的支持了E::first-line。

示例：


E:before/E::before

  • 版本：CSS2/CSS3

语法：

E:before/E::before{ sRules }

说明：

设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用

  • CSS3将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes Selectors)，但以前的写法仍然有效。

    即E:before可转化为E::before

兼容性(E:before)：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0-7.0 | 4.0 | 5.1 | 13.0 | 11.50
最近版本 | 8.0

兼容性(E::bofore)：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0-8.0 | 4.0 | 5.1 | 13.0 | 11.50
较新版本 | 9.0

示例：


E:after/E::after

  • 版本：CSS2/CSS3

语法：

E:after/E::after{ sRules }

说明：

设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用

  • CSS3将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes Selectors)，但以前的写法仍然有效。

    即E:after可转化为E::after

兼容性(E:after)：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0-7.0 | 4.0 | 5.1 | 13.0 | 11.50
最近版本 | 8.0

兼容性(E::after)：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0-8.0 | 4.0 | 5.1 | 13.0 | 11.50
较新版本 | 9.0

示例：


E::selection

  • 版本：CSS3

语法：

E::selection{ sRules }

说明：

设置对象被选择时的样式。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0-8.0 | 4.0 | 5.1 | 13.0 | 11.50
较新版本 | 9.0

写法：

内核类型 | 写法(E::selection)
Webkit(Chrome/Safari) | E::selection
Gecko(Firefox) | E::-moz-selection
Presto(Opera) | E::selection
Trident(IE) | E::selection

示例(Firefox需将以下的代码复制到本地测试)：


Rules and Syntax index

CSS参考手册 » 语法与规则列表
其它语法与规则参考 选择其它项
  • !important
  • comment
  • @import
  • @charset
  • @media
  • @font-face
  • @page
  • @keyframes

CSS Rules and Syntax

  • 语法与规则

语法与规则 Rules and Syntax

Name 名称 | CSS Version 版本 | Description 简介
!important | CSS1 | 提升指定样式条目的应用优先权。
/*comment*/ | CSS1 | CSS中的注释 /* 这里是注释内容 */
@import | CSS1/CSS3 | 指定导入的外部样式表及目标媒体。该规则必须在样式表头部最先声明
@charset | CSS2 | 在外部样式表文件内使用。指定该样式表使用的字符编码。
@media | CSS2/CSS3 | 指定样式表规则用于指定的媒体类型和条件。
@font-face | CSS3 | 设置嵌入HTML文档的OpenType字体。
@page | CSS2 | 设置页面容器的版式，方向，边空等。
@keyframes | CSS3 | 指定动画名称和动画效果。

这种颜色 的链接表示是CSS3语法规则或语法规则被CSS3修改并增加了新的特性


!important

其它语法与规则参考 选择其它项
  • !important
  • comment
  • @import
  • @charset
  • @media
  • @font-face
  • @page
  • @keyframes

!important

  • 版本：CSS1
  • 继承性：无

语法：

Selector{sRule!important;}

说明：

提升指定样式规则的应用优先权。
  • IE6及以下浏览器有个比较显式的支持问题存在，!important并不覆盖掉在同一条样式的后面的规则。请看下述代码：

    示例代码：

    div{color:#f00!important;color:#000;}

    在上述代码中，IE6及以下浏览器div的文本颜色为#000，!important并没有覆盖后面的规则；其它浏览器下div的文本颜色为#f00

  • IE6及以下浏览器要使!important生效，可用以下代码：

    示例代码：

    div{color:#f00!important;}
div{color:#000;}

    在上述代码中，IE6及以下浏览器中div的文本颜色表现与其它浏览器一致，都为#f00

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 #1 | 4.0 | 5.1 | 13.0 | 11.50
版本 | 7.0
  1. IE6及更早浏览器下，!important在同一条样式内不生效。

示例：


comment

其它语法与规则参考 选择其它项
  • !important
  • comment
  • @import
  • @charset
  • @media
  • @font-face
  • @page
  • @keyframes

comment

  • 版本：CSS1

语法：

/* 这里是注释内容 */

说明：

用于注释CSS中的某些内容。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


@import

其它语法与规则参考 选择其它项
  • !important
  • comment
  • @import
  • @charset
  • @media
  • @font-face
  • @page
  • @keyframes

@import

  • 版本：CSS1/CSS3

语法：

@import <url> <media_query_list>

<media_query_list>：[<media_query>[',' <media_query>]*]?

<media_query>：[only | not]? <media_type> [and <expression>]* | <expression> [and <expression>]*

<expression>：'('<media_feature>[:<value>]?')'

取值：

<url>：
使用绝对或相对地址指定导入的外部样式表文件。可以是url(url)或者直接是一个url
<media_query_list>：
指定媒体类型和查询条件。

说明：

指定导入的外部样式表及目标媒体。
  • 该规则必须在样式表头部最先声明。并且其后的分号是必需的，如果省略了此分号，外部样式表将无法正确导入，并会生成错误信息。
  • IE使用@import无法引入超过35条的样式表。
  • 使用url(url)和直接使用url需要注意的地方：

    示例代码：

    @import url("global.css");
@import url(global.css);
@import "global.css";

    以上3种方式都有效。当使用url(url)的方式时，包住路径的引号可有可无；当直接使用url时，包住路径的引号必须保留。

  • 指定媒体查询：

    示例代码：

    @import url(example.css) screen and (min-width:800px);
@import url(example.css) screen and (width:800px),(color);
@import url(example.css) screen and (min-device-width:500px) and (max-device-width:1024px);

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-7.0 #1 | 4.0 | 5.1 | 13.0 | 11.50
版本 | 8.0 #2
版本 | 9.0
  1. IE7及更早浏览器不支持@import指定媒体类型和媒体查询。
  2. IE8不支持@import指定媒体查询。

示例：


@charset

其它语法与规则参考 选择其它项
  • !important
  • comment
  • @import
  • @charset
  • @media
  • @font-face
  • @page
  • @keyframes

@charset

  • 版本：CSS2

语法：

@charset <charset>;

取值：

<charset>：
字符编码。如：@charset "utf-8";

说明：

在外部样式表文件内使用。指定该样式表使用的字符编码。
  • 该规则后面的分号是必需的，如果省略了此分号，会生成错误信息。
  • 在外部css文件中写法如下：

    示例代码：

    @charset "utf-8";
body{sRules}
div{sRules}
...

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50


@media

其它语法与规则参考 选择其它项
  • !important
  • comment
  • @import
  • @charset
  • @media
  • @font-face
  • @page
  • @keyframes

@media

  • 版本：CSS2/CSS3

语法：

@media：<media_query_list>

<media_query_list>：[<media_query>[',' <media_query>]*]?

<media_query>：[only | not]? <media_type> [and <expression>]* | <expression> [and <expression>]*

<expression>：'('<media_feature>[:<value>]?')'

取值：

<media_type>：
指定设备类型。媒体类型包括：参阅媒体类型。(CSS2)
<expression>：
指定媒体查询使用的媒体特性。这类似于CSS属性，如：max-width:960px。(CSS3)

说明：

指定样式表规则用于指定的媒体类型和查询条件。
  • IE8及以下只能实现CSS2中的部分，即只可以设置媒体类型。

  • 媒体查询可以被用在CSS中的@media和@import规则上，也可以被用在HTML和XML中。

    示例代码：

    @media screen and (width:800px){ … }
@import url(example.css) screen and (width:800px);
<link media="screen and (width:800px)" rel="stylesheet" href="example.css" />
<?xml-stylesheet media="screen and (width:800px)" rel="stylesheet" href="example.css" ?>

  • 列举几种使用方式：

    @media all and (width:1024px){
    body{color:#f00;}
}
@media all and (device-height:800px){ … }
@media all and (orientation:landscape){ … }
@media all and (device-aspect-ratio:16/10){ … }
@media all and (min-color:1){ … }
@media all and (monochrome:0){ … }
@media all and (grid:0){ … }

兼容性(指定媒体类型)：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-8.0 #1 | 4.0 | 5.1 | 13.0 | 11.50
版本 | 9.0
  1. IE8及更早浏览器不支持媒体查询。

示例：


@font-face

其它语法与规则参考 选择其它项
  • !important
  • comment
  • @import
  • @charset
  • @media
  • @font-face
  • @page
  • @keyframes

@font-face

  • 版本：CSS3

语法：

@font-face{font-family:name;src:<url>;sRules;}

取值：

<name>：
字体名称
<url>：
使用绝对或相对地址指定OpenType字体
<sRules>：
样式表定义

说明：

设置嵌入HTML文档的字体。
  • 通常使用.ttf(TrueType)和.otf(OpenType)两种字体格式。
  • 嵌入HTML文档的字体是指将OpenType字体（压缩的TrueType字体）文件映射到客户端系统，用来提供HTML文档使用该字体，或取代客户端系统已有的同名字体。即让客户端显示客户端所没有安装的字体。
  • 微软的IE5已经是开始支持这个属性，但是只支持微软自有的.eot(Embedded Open Type)格式，而其他浏览器直到现在都没有支持这一字体格式。Safari从3.1开始已经可以设置.ttf(TrueType)和.otf(OpenType)两种字体做为自定义字体了。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-8.0 #1 | 4.0 | 5.1 | 13.0 | 11.50
版本 | 9.0-10.0 #2
  1. IE8及更早浏览器只支持微软自有的.eot(Embedded Open Type)格式。
  2. IE9.0-10.0部分支持ttf和otf字体格式。

示例：


@page

其它语法与规则参考 选择其它项
  • !important
  • comment
  • @import
  • @charset
  • @media
  • @font-face
  • @page
  • @keyframes

@page

  • 版本：CSS2

语法：

@page <label> <pseudo-classes>{ sRules }

取值：

<label>：
页面标识符
<pseudo-class>：
打印伪类:first, :left, :right

说明：

设置页面容器的版式，方向，边空等。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-7.0 | 4.0-6.0 | 5.1 | 13.0 | 11.50
版本 | 8.0

示例：


@keyframes

其它语法与规则参考 选择其它项
  • !important
  • comment
  • @import
  • @charset
  • @media
  • @font-face
  • @page
  • @keyframes

@keyframes

  • 版本：CSS3

语法：

@keyframes <identifier> '{' <keyframes-blocks> '}';

<keyframes-blocks>：[ [ from | to | <percentage> ]{ sRules } ] [ [ , from | to | <percentage> ]{ sRules } ]*

取值：

<identifier>：
identifier定义一个动画名称
<keyframes-blocks>：
定义动画在每个阶段的样式，即帧动画。

说明：

指定动画名称和动画效果。
  • @keyframes定义的动画名称用来被animation-name所使用。
  • 定义动画时，简单的动画可以直接使用关键字from和to，即从一种状态过渡到另一种状态：

    示例代码：

    @keyframes testanimations{
    from{opacity:1;}
    to{opacity:0;}
}

    其中testanimations是该动画的名字，该动画表示某个东西将逐渐消失。

  • 如果复杂的动画，可以混合<percentage>去设置某个时间段内的任意时间点的样式：

    示例代码：

    @keyframes testanimations{
    from{transform:translate(0,0);}
    20%{transform:translate(20,20);}
    40%{transform:translate(40,0);}
    60%{transform:translate(60,20);}
    80%{transform:translate(80,0);}
    to{transform:translate(100,20);}
}
  • 当然，也可以不适用关键字from和to，而都使用<percentage>：

    示例代码：

    @keyframes testanimations{
    0%{transform:translate(0,0);}
    20%{transform:translate(20,20);}
    40%{transform:translate(40,0);}
    60%{transform:translate(60,20);}
    80%{transform:translate(80,0);}
    100%{transform:translate(100,20);}
}

    注意，这里的0%不能简写成0。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-9.0 | 4.0 | 5.1 | 13.0-16.0 | 11.50-11.60
版本 | 10.0 | 5.0-9.0

写法：

内核类型 | 写法
Webkit(Chrome/Safari) | @-webkit-keyframes
Gecko(Firefox) | @-moz-keyframes
Presto(Opera) |
Trident(IE) | @-ms-keyframes
W3C | @keyframes

示例：


Values index

CSS参考手册 » 取值列表
其它取值参考 选择其它项
  • 颜色值
  • 文本值
  • 函数值
  • 图像值
  • 数值
  • 其它值

CSS Values Reference

  • CSS取值

颜色类型 Color Type

  • Color Name
  • HEX
  • RGB
  • RGBA
  • HSL
  • HSLA
  • transparent

文本类型 Textual Data Type

  • <string>
  • <url>
  • <identifier>

函数类型 Functional Notations Type

  • counter()
  • attr()
  • calc()
  • min()
  • max()
  • cycle()

图像类型 Image Type

  • linear-gradient()
  • radial-gradient()
  • repeating-linear-gradient()
  • repeating-radial-gradient()

数字类型 Numeric Data Type

  • <number>
  • <integer>

其它数据类型 Other Data Types

  • <length>
  • <percentage>
  • <angle>
  • <time>
  • <frequency>
  • <fraction>
  • <grid>

这种颜色 的链接表示是CSS3取值或取值被CSS3修改并赋予了新的特性


Color Values Type index

CSS参考手册 » 取值列表 » 颜色值
其它颜色值参考 选择其它项
  • Color Name
  • HEX
  • RGB
  • RGBA
  • HSL
  • HSLA
  • transparent

CSS Color Type Values

  • 颜色值

颜色值 Color Type Values

Name 名称 | CSS Version 版本 | Description 简介
Color Name | CSS1 | 用颜色名称来指定颜色。包括基本颜色关键字、系统颜色、SVG颜色关键字等
HEX | CSS1 | 十六进制记法。语法如：#rrggbb或#rgb
RGB | CSS2 | rgb记法
RGBA | CSS3 | rgba记法
HSL | CSS3 | hsl记法
HSLA | CSS3 | hsla记法
transparent | CSS1/CSS3 | 全透明

这种颜色 的链接表示是CSS3取值或取值被CSS3修改并赋予了新的特性


Color Name

其它颜色值参考 选择其它项
  • Color Name
  • HEX
  • RGB
  • RGBA
  • HSL
  • HSLA
  • transparent

Color Name

  • 版本：CSS1/CSS3

说明：

用颜色名称来指定颜色。参阅：颜色关键字

示例：


HEX

其它颜色值参考 选择其它项
  • Color Name
  • HEX
  • RGB
  • RGBA
  • HSL
  • HSLA
  • transparent

HEX

  • 版本：CSS1

语法：

#RRGGBB 或 #RGB

取值：

RR：
红色值。十六进制正整数
GG：
绿色值。十六进制正整数
BB：
蓝色值。十六进制正整数

说明：

十六进制记法
  • 以上三个参数，取值范围为：00 - FF。
  • 参数必须是两位数。对于只有一位的，应在前面补零。
  • 如果每个参数各自在两位上的数字都相同，那么本单位也可缩写为 #RGB 的方式。例如：#FF8800 可以缩写为 #F80。
  • 此色彩模式与RGB色彩模式不同。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


RGB

其它颜色值参考 选择其它项
  • Color Name
  • HEX
  • RGB
  • RGBA
  • HSL
  • HSLA
  • transparent

RGB

  • 版本：CSS2

语法：

RGB(R,G,B)

取值：

R：
红色值。正整数 | 百分数
G：
绿色值。正整数 | 百分数
B：
蓝色值。正整数 | 百分数

说明：

RGB记法。
  • 以上三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%。
  • 超出范围的数值将被截至其最接近的取值极限。如：rgb(300,0,0)会被解析为rgb(255,0,0)
  • 正整数值255对应百分比数值100%，如：rgb(255,255,255) = rgb(100%,100%,100%) = #FFFFFF = #FFF
  • RGB色彩是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化和它们相互之间的叠加来得到各式各样的颜色的。
  • 此RGB色彩模式与#RRGGBB/#RGB(HEX)不同。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


RGBA

其它颜色值参考 选择其它项
  • Color Name
  • HEX
  • RGB
  • RGBA
  • HSL
  • HSLA
  • transparent

RGBA

  • 版本：CSS3

语法：

RGBA(R,G,B,A)

取值：

R：
红色值。正整数 | 百分数
G：
绿色值。正整数 | 百分数
B：
蓝色值。正整数 | 百分数
A：
Alpha透明度。取值0~1之间。

说明：

RGBA记法。
  • 此色彩模式与RGB相同，只是在RGB模式上新增了Alpha透明度。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-8.0 | 4.0 | 5.1 | 13.0 | 11.50
版本 | 9.0

示例：


HSL

其它颜色值参考 选择其它项
  • Color Name
  • HEX
  • RGB
  • RGBA
  • HSL
  • HSLA
  • transparent

HSL

  • 版本：CSS3

语法：

HSL(H,S,L)

取值：

H：
Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
S：
Saturation(饱和度)。取值为：0.0% - 100.0%
L：
Lightness(亮度)。取值为：0.0% - 100.0%

说明：

HSL记法。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-8.0 | 4.0 | 5.1 | 13.0 | 11.50
版本 | 9.0

示例：


HSLA

其它颜色值参考 选择其它项
  • Color Name
  • HEX
  • RGB
  • RGBA
  • HSL
  • HSLA
  • transparent

HSLA

  • 版本：CSS3

语法：

HSLA(H,S,L,A)

取值：

H：
Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
S：
Saturation(饱和度)。取值为：0.0% - 100.0%
L：
Lightness(亮度)。取值为：0.0% - 100.0%
A：
Alpha透明度。取值0~1之间。

说明：

HSL记法。
  • 此色彩模式与HSL相同，只是在HSL模式上新增了Alpha透明度。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-8.0 | 4.0 | 5.1 | 13.0 | 11.50
版本 | 9.0

示例：


transparent

其它颜色值参考 选择其它项
  • Color Name
  • HEX
  • RGB
  • RGBA
  • HSL
  • HSLA
  • transparent

transparent

  • 版本：CSS1/CSS3

说明：

用来指定全透明色彩。
  • transparent是全透明黑色(black)的速记法，即一个类似rgba(0,0,0,0)这样的值。
  • 在CSS1中，transparent被用来作为background-color的一个参数值，用于表示背景透明。
  • 在CSS2中，border-color也开始接受transparent作为参数值，《Open eBook(tm) Publication Structure 1.0.1》[OEB101]延伸到color也接受transparent作为参数值。IE6不支持border的颜色为transparent，边框色会显示为黑色。
  • 在CSS3中，transparent被延伸到任何一个有color值的属性上。IE8及以下，color属性值为transparent时，文本显示为黑色。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 #1 | 4.0 | 5.1 | 13.0 | 11.50
版本 | 7.0-8.0 #2
版本 | 9.0
  1. IE6及更早浏览器只有background-color接受transparent取值。
  2. IE7及IE8除了background-color，还有border-color也开始接受transparent取值。

示例：


Textual Data Type Values index

CSS参考手册 » 取值列表 » 文本值
其它文本值参考 选择其它项
  • <string>
  • <url>
  • <identifier>

CSS Textual Data Type Values

  • 文本值

文本值 CSS Textual Data Type Values

Name 名称 | CSS Version 版本 | Description 简介
<string> | CSS2 | 字符串(含转义字符串)。
<url> | CSS2 | 在网页上提供一个资源地址。（图像，声频，视频或浏览器支持的其他任何资源）
<identifier> | CSS2 | 使用用户自定义标识名作为组件取值。

这种颜色 的链接表示是CSS3取值或取值被CSS3修改并赋予了新的特性


<string>

  • 版本：CSS2

说明：

字符串(含转义字符串)。
  • 字符串可以由双引号或单引号包起来。
  • 转义字符串由 反斜杠(\) 开始，如：\', \"
  • 2个常规字符串例子。请看下述代码：

    示例代码：

    div:after{content:'任意字符串';}
a[title="external"] {/*...*/}
  • 2个转义字符串例子。请看下述代码：

    示例代码：

    div:after{content:'任意字符串\'String\'';}
div{font-family:'\5b8b\4f53';} /* \5b8b\4f53 = 宋体 */

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50


<url>

  • 版本：CSS2

说明：

在网页上提供一个资源地址。（图像，声频，视频或浏览器支持的其他任何资源）
  • <url>中的资源地址可以由单引号或双引号包起来，也可以不用任何引号。

    示例代码：

    div{background:url("1.gif");}
div{background:url(1.gif);}

    以上2个定义是等价的。

  • 使用在@import上时，甚至url()都可以省略，而直接是一个资源地址。

    示例代码：

    @import url("global.css");
@import url(global.css);
@import "global.css";

    以上3种方式都有效。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50


<identifier>

  • 版本：CSS2

说明：

使用用户自定义标识名作为组件取值。
  • 自定义标识区分大小写，例如test与TEST是2个不同的值
  • 自定义标识不能使用与CSS属性及属性值相同的名字
  • 正常工作的例子：

    示例代码：

    li{counter-increment:testname;}
li{counter-reset:testname2;}
@keyframes testanimations{
    from{opacity:1;}
    to{opacity:0;}
}
  • 无法工作的例子：

    示例代码：

    li{counter-increment:border;}
li{counter-reset:background;}
@keyframes auto{
    from{opacity:1;}
    to{opacity:0;}
}

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-7.0 | 4.0 | 5.1 | 13.0 | 11.50
版本 | 8.0


Functional Notations Type Values index

CSS参考手册 » 取值列表 » 函数值
其它函数值参考 选择其它项
  • counter()
  • attr()
  • calc()
  • min()
  • max()
  • cycle()

CSS Functional Notations Type Values

  • 函数值

函数值 CSS Functional Notations Type Values

Name 名称 | CSS Version 版本 | Description 简介
counter() | CSS2 | 插入计数器。
attr() | CSS3 | 插入元素的属性值。
calc() | CSS3 | 用于动态计算长度值。
min() | CSS3 | 用于比较数值的大小并取出最小的那个。
max() | CSS3 | 用于比较数值的大小并取出最大的那个。
cycle() | CSS3 | 允许子孙元素使用取值序列中的值循环替换继承而来的值。

这种颜色 的链接表示是CSS3取值或取值被CSS3修改并赋予了新的特性


counter()

其它函数值参考 选择其它项
  • counter()
  • attr()
  • calc()
  • min()
  • max()
  • cycle()

counter()

  • 版本：CSS2

说明：

插入计数器。
  • 在CSS2.1中counter()只能被使用在content属性上。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-7.0 | 4.0 | 5.1 | 13.0 | 11.50
版本 | 8.0

示例：


attr()

其它函数值参考 选择其它项
  • counter()
  • attr()
  • calc()
  • min()
  • max()
  • cycle()

attr()

  • 版本：CSS2/CSS3

说明：

插入元素的属性值。
  • 在CSS2.1中attr()总是返回一个字符串。在CSS3中attr()可以返回多种不同的类型。
  • 写本文档时尚无浏览器支持该CSS3定义的attr()。
  • 在CSS2.1中可以这样使用：

    示例代码：

    div:after{content:attr(title);}
  • 在CSS3中甚至可以这样：

    示例代码：

    div{width:attr(width, px, auto);}

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-7.0 | 4.0 | 5.1 | 13.0 | 11.50
版本 | 8.0

示例：


calc()

其它函数值参考 选择其它项
  • counter()
  • attr()
  • calc()
  • min()
  • max()
  • cycle()

calc()

  • 版本：CSS3

说明：

用于动态计算长度值。
  • 任何长度值都可以使用calc()函数进行计算。
  • calc()函数支持+, -, *, /, mod运算，以后还可能加入对min()/max()等运算。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-8.0 | 4.0 | 5.1 | 13.0-16.0 | 11.50-11.60
版本 | 9.0

写法：

内核类型 | 写法
Webkit(Chrome/Safari) |
Gecko(Firefox) | -moz-calc()
Presto(Opera) |
Trident(IE) | calc()
W3C | calc()

示例：


min()

其它函数值参考 选择其它项
  • counter()
  • attr()
  • calc()
  • min()
  • max()
  • cycle()

min()

  • 版本：CSS3

说明：

用于比较数值的大小并取出最小的那个。
  • 写本文档时尚无浏览器支持该min()。
  • 如何使用：

    示例代码：

    div{font-size:min(30px, 3em);}
div{width:min(10% + 20px, 300px);}

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-9.0 | 4.0-9.0 | 5.1 | 13.0-16.0 | 11.50-11.60


max()

其它函数值参考 选择其它项
  • counter()
  • attr()
  • calc()
  • min()
  • max()
  • cycle()

max()

  • 版本：CSS3

说明：

用于比较数值的大小并取出最大的那个。
  • 写本文档时尚无浏览器支持该max()。
  • 如何使用：

    示例代码：

    div{font-size:max(30px, 3em);}
div{width:max(10% + 20px, 300px);}

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-9.0 | 4.0-9.0 | 5.1 | 13.0-16.0 | 11.50-11.60


cycle()

其它函数值参考 选择其它项
  • counter()
  • attr()
  • calc()
  • min()
  • max()
  • cycle()

cycle()

  • 版本：CSS3

说明：

允许子孙元素使用取值序列中的值循环替换继承而来的值。
  • 如何使用：

    示例代码：

    ul{list-style-type:disk;}
li > ul{list-style-type:cycle(disk,circle,square,box);}

    在上述代码中，定义一个多级的ul，第一级使用disk markers，子孙级依次使用circle,square,box。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-9.0 | 4.0-9.0 | 5.1 | 13.0-16.0 | 11.50-11.60


Image Type Values index

CSS参考手册 » 取值列表 » 图像值
其它图像值参考 选择其它项
  • linear-gradient()
  • radial-gradient()
  • repeating-linear-gradient()
  • repeating-radial-gradient()

CSS Image Type Type Values

  • 图像值

图像值 CSS Image Type Values

Name 名称 | CSS Version 版本 | Description 简介
linear-gradient() | CSS3 | 用线性渐变创建图像。
radial-gradient() | CSS3 | 用径向渐变创建图像。
repeating-linear-gradient() | CSS3 | 用重复的线性渐变创建图像。
repeating-radial-gradient() | CSS3 | 用重复的径向渐变创建图像。

这种颜色 的链接表示是CSS3取值或取值被CSS3修改并赋予了新的特性


linear-gradient()

  • 版本：CSS3

语法：

<linear-gradient>：linear-gradient([ <point>,]? <color-stop>[, <color-stop>]+);

<point>：[ left | right ]? [ top | bottom ]? || <angle>?

<color-stop>：<color> [ <length> | <percentage> ]?

取值：

<point>

left：
设置左边为渐变起点的横坐标值。
right：
设置右边为渐变起点的横坐标值。
top：
设置顶部为渐变起点的纵坐标值。
bottom：
设置底部为渐变起点的纵坐标值。
<angle>：
用角度值指定渐变的方向（或角度）。
<color-stop>：
指定渐变的起止颜色。

<color-stop>

<color>：
指定颜色。请参阅颜色值
<length>：
用长度值指定起止色位置。不允许负值
<percentage>：
用百分比指定起止色位置。

说明：

用线性渐变创建图像。
  • 写本文档时Firefox,Chrome,Opera已经在实验性质阶段支持了该属性，Safari对该属性的支持仍停留在以私有方式实现的阶段（可参阅页面底部的示例代码）。
  • Firefox还支持使用<percentage>、<length>和center特殊值定义渐变起点，并支持起点与角度一起使用。

  • 示例代码：

    （图一）

    linear-gradient(#fff,#333);
linear-gradient(top,#fff,#333);
linear-gradient(bottom,#333,#fff);
linear-gradient(-90deg,#fff,#333);

    以上几句代码都可以实现如（图一）的渐变效果

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-9.0 | 4.0 | 5.1 | 13.0 | 11.50
版本 | 10.0

写法：

内核类型 | 写法
Webkit(Chrome/Safari) | -webkit-linear-gradient()/-webkit-gradient()
Gecko(Firefox) | -moz-linear-gradient()
Presto(Opera) | -o-linear-gradient()
Trident(IE) | -ms-linear-gradient()
W3C | linear-gradient()

示例：


radial-gradient()

  • 版本：CSS3

语法：

<radial-gradient>：radial-gradient([ <position>,]? [ [ <shape> || <size> ] | <shape-size>{2},]? <color-stop>[, <color-stop>]+);

<position>：[ <length>① | <percentage>① | left | center① | right ]? [ <length>② | <percentage>② | top | center② | bottom ]?

<shape>：circle | ellipse

<size>：closest-side | closest-corner | farthest-side | farthest-corner | contain | cover

<shape-size>：<length> | <percentage>

<color-stop>：<color> [ <length> | <percentage> ]?

取值：

<position>

<percentage>①：
用百分比指定径向渐变圆心的横坐标值。可以为负值。
<length>①：
用长度值指定径向渐变圆心的横坐标值。可以为负值。
left：
设置左边为径向渐变圆心的横坐标值。
center①：
设置中间为径向渐变圆心的横坐标值。
right：
设置右边为径向渐变圆心的横坐标值。
<percentage>②：
用百分比指定径向渐变圆心的纵坐标值。可以为负值。
<length>②：
用长度值指定径向渐变圆心的纵坐标值。可以为负值。
top：
设置顶部为径向渐变圆心的纵坐标值。
center②：
设置中间为径向渐变圆心的纵坐标值。
bottom：
设置底部为径向渐变圆心的纵坐标值。
<color-stop>：
指定渐变的起止颜色。

<shape>

circle：
指定圆形的径向渐变
ellipse：
指定椭圆形的径向渐变。写本文档时Chrome,Safari尚不支持该参数值

<size>

closest-side：
指定径向渐变的半径长度为从圆心到离圆心最近的边
closest-corner：
指定径向渐变的半径长度为从圆心到离圆心最近的角
farthest-side：
指定径向渐变的半径长度为从圆心到离圆心最远的边
farthest-corner：
指定径向渐变的半径长度为从圆心到离圆心最远的角
contain：
包含，指定径向渐变的半径长度为从圆心到离圆心最近的点。类同于closest-side
cover：
覆盖，指定径向渐变的半径长度为从圆心到离圆心最远的点。类同于farthest-corner

<shape-size>

写本文档时Firefox尚不支持<shape-size>
<percentage>：
用百分比指定径向渐变的横向或纵向直径长度，并根据横向和纵向的直径来确定是圆或椭圆。不允许负值。
<length>：
用长度值指定径向渐变的横向或纵向直径长度，并根据横向和纵向的直径来确定是圆或椭圆。不允许负值。

<color-stop>

<color>：
指定颜色。请参阅颜色值
<length>：
用长度值指定起止色位置。不允许负值
<percentage>：
用百分比指定起止色位置。

说明：

用径向渐变创建图像。
  • 写本文档时Firefox和Chrome已经在实验性质阶段支持了该属性，Safari对该属性的支持仍停留在以私有方式实现的阶段。

  • 示例代码：

    （图一）

    radial-gradient(circle,#f00,#ff0,#080);
radial-gradient(center,circle,#f00,#ff0,#080);
radial-gradient(50%,circle,#f00,#ff0,#080);
radial-gradient(circle,#f00 0%,#ff0 50%,#080 100%);
radial-gradient(circle cover,#f00,#ff0,#080);

    以上几句代码都可以实现如（图一）的渐变效果

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-9.0 | 4.0 | 5.1 | 13.0 | 11.50-11.51
版本 | 10.0 |  |  |  | 11.60

写法：

内核类型 | 写法
Webkit(Chrome/Safari) | -webkit-radial-gradient()/-webkit-gradient()
Gecko(Firefox) | -moz-radial-gradient()
Presto(Opera) | -o-radial-gradient()
Trident(IE) | -ms-radial-gradient()
W3C | radial-gradient()

示例：


repeating-linear-gradient()

  • 版本：CSS3

语法：

<repeating-linear-gradient>：repeating-linear-gradient([ <point>,]? <color-stop>[, <color-stop>]+);

<point>：[ left | right ]? [ top | bottom ]? || <angle>?

<color-stop>：<color> [ <length> | <percentage> ]?

取值：

<point>

left：
设置左边为渐变起点的横坐标值。
right：
设置右边为渐变起点的横坐标值。
top：
设置顶部为渐变起点的纵坐标值。
bottom：
设置底部为渐变起点的纵坐标值。
<angle>：
用角度值指定渐变的方向（或角度）。
<color-stop>：
指定渐变的起止颜色。

<color-stop>

<color>：
指定颜色。请参阅颜色值
<length>：
用长度值指定起止色位置。不允许负值
<percentage>：
用百分比指定起止色位置。

说明：

用重复的线性渐变创建图像。
  • repeating-linear-gradient()的语法与linear-gradient()相同。
  • 写本文档时Firefox,Chrome,Opera已经在实验性质阶段支持了该属性，Safari对该属性的支持仍停留在以私有方式实现的阶段。
  • Firefox还支持使用<percentage>、<length>和center特殊值定义渐变起点，并支持起点与角度一起使用。

  • 示例代码：

    （图一）

    repeating-linear-gradient(#f00,#ff0 10%,#f00 15%);
repeating-linear-gradient(top,#f00,#ff0 10%,#f00 15%);
repeating-linear-gradient(-90deg,#f00,#ff0 10%,#f00 15%);
repeating-linear-gradient(270deg,#f00,#ff0 10%,#f00 15%);

    以上几句代码都可以实现如（图一）的渐变效果

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-9.0 | 4.0 | 5.1 | 13.0 | 11.50
版本 | 10.0

写法：

内核类型 | 写法
Webkit(Chrome/Safari) | -webkit-repeating-linear-gradient()
Gecko(Firefox) | -moz-repeating-linear-gradient()
Presto(Opera) | -o-repeating-linear-gradient()
Trident(IE) | -ms-repeating-linear-gradient()
W3C | repeating-linear-gradient()

示例：


repeating-radial-gradient()

  • 版本：CSS3

语法：

<repeating-radial-gradient>：repeating-radial-gradient([ <position>,]? [ [ <shape> || <size> ] | <shape-size>{2},]? <color-stop>[, <color-stop>]+);

<position>：[ <length>① | <percentage>① | left | center① | right ]? [ <length>② | <percentage>② | top | center② | bottom ]?

<shape>：circle | ellipse

<size>：closest-side | closest-corner | farthest-side | farthest-corner | contain | cover

<shape-size>：<length> | <percentage>

<color-stop>：<color> [ <length> | <percentage> ]?

取值：

<position>

<percentage>①：
用百分比指定径向渐变圆心的横坐标值。可以为负值。
<length>①：
用长度值指定径向渐变圆心的横坐标值。可以为负值。
left：
设置左边为径向渐变圆心的横坐标值。
center①：
设置中间为径向渐变圆心的横坐标值。
right：
设置右边为径向渐变圆心的横坐标值。
<percentage>②：
用百分比指定径向渐变圆心的纵坐标值。可以为负值。
<length>②：
用长度值指定径向渐变圆心的纵坐标值。可以为负值。
top：
设置顶部为径向渐变圆心的纵坐标值。
center②：
设置中间为径向渐变圆心的纵坐标值。
bottom：
设置底部为径向渐变圆心的纵坐标值。
<color-stop>：
指定渐变的起止颜色。

<shape>

circle：
指定圆形的径向渐变
ellipse：
指定椭圆形的径向渐变。写本文档时Chrome,Safari尚不支持该参数值

<size>

closest-side：
指定径向渐变的半径长度为从圆心到离圆心最近的边
closest-corner：
指定径向渐变的半径长度为从圆心到离圆心最近的角
farthest-side：
指定径向渐变的半径长度为从圆心到离圆心最远的边
farthest-corner：
指定径向渐变的半径长度为从圆心到离圆心最远的角
contain：
包含，指定径向渐变的半径长度为从圆心到离圆心最近的点。类同于closest-side
cover：
覆盖，指定径向渐变的半径长度为从圆心到离圆心最远的点。类同于farthest-corner

<shape-size>

写本文档时Firefox尚不支持<shape-size>
<percentage>：
用百分比指定径向渐变的横向或纵向直径长度，并根据横向和纵向的直径来确定是圆或椭圆。不允许负值。
<length>：
用长度值指定径向渐变的横向或纵向直径长度，并根据横向和纵向的直径来确定是圆或椭圆。不允许负值。

<color-stop>

<color>：
指定颜色。请参阅颜色值
<length>：
用长度值指定起止色位置。不允许负值
<percentage>：
用百分比指定起止色位置。

说明：

用重复的径向渐变创建图像。
  • repeating-radial-gradient()的语法与radial-gradient()相同。
  • 写本文档时Firefox和Chrome已经在实验性质阶段支持了该属性，Safari对该属性的支持仍停留在以私有方式实现的阶段。

  • 示例代码：

    （图一）

    repeating-radial-gradient(circle contain,#f00,#ff0 10%,#f00 15%);

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-9.0 | 4.0 | 5.1 | 13.0 | 11.50-11.51
版本 | 10.0 |  |  |  | 11.60

写法：

内核类型 | 写法
Webkit(Chrome/Safari) | -webkit-repeating-radial-gradient()
Gecko(Firefox) | -moz-repeating-radial-gradient()
Presto(Opera) | -o-repeating-radial-gradient()
Trident(IE) | -ms-repeating-radial-gradient()
W3C | repeating-radial-gradient()

示例：


Numeric Data Type Values index

CSS参考手册 » 取值列表 » 数字值
其它数字值参考 选择其它项
  • <number>
  • <integer>

CSS Numeric Data Type Values

  • 数字值

数字值 CSS Numeric Data Type Values

Name 名称 | CSS Version 版本 | Description 简介
<number> | CSS2 | 浮点数。
<integer> | CSS2 | 整数。

这种颜色 的链接表示是CSS3取值或取值被CSS3修改并赋予了新的特性


<number>

  • 版本：CSS1

说明：

浮点数。
  • Number值可能是约束在一定范围内的，如果超过了这个范围，申明将被忽略。
  • 列举几个使用场景。请看下述代码：

    示例代码：

    div{line-height:1.5;}
div{opacity:0.5;}

    在上述代码中，opacity属性的值就是被约束在[0.0-1.0]这个范围内的，如果超过了这个范围，其计算结果将截取到与之最相近的值。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50


<integer>

  • 版本：CSS1

说明：

整数。
  • Integer值可能是约束在一定范围内的，如果超过了这个范围，申明将被忽略。
  • 列举几个使用场景。请看下述代码：

    示例代码：

    div{z-index:10;}

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50


Other Data Types Values index

CSS参考手册 » 取值列表 » 其它值
其它取值参考 选择其它项
  • <length>
  • <percentage>
  • <angle>
  • <time>
  • <frequency>
  • <fraction>
  • <grid>

CSS Other Data Types Values

  • 其它类型值

其它类型值 CSS Other Data Types Values

Name 名称 | CSS Version 版本 | Description 简介
<length> | CSS2 | <number>接长度单位。
<percentage> | CSS2 | <number>接%
<angle> | CSS3 | <number>接角度单位。
<time> | CSS3 | <number>接时间单位。
<frequency> | CSS3 | <number>接频率单位。
<fraction> | CSS3 | <number>接剩余空间数单位。
<grid> | CSS3 | <number>接网格数单位。

这种颜色 的链接表示是CSS3取值或取值被CSS3修改并赋予了新的特性


<length>

其它取值参考 选择其它项
  • <length>
  • <percentage>
  • <angle>
  • <time>
  • <frequency>
  • <fraction>
  • <grid>

<length>

  • 版本：CSS1

说明：

<number>接长度单位。
  • 特殊值0可以省略单位。例如：margin:0px可以写成margin:0
  • 一些属性可能允许有负长度值，或者有一定的范围限制。如果不支持负长度值，那应该变换到能够被支持的最近的一个长度值。
  • 长度单位包括包括：相对单位和绝对单位。
  • 相对长度单位包括有：em, ex, ch, rem, vw, vh, vm, %
  • 绝对长度单位包括有：cm, mm, in, pt, pc, px

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50


<percentage>

其它取值参考 选择其它项
  • <length>
  • <percentage>
  • <angle>
  • <time>
  • <frequency>
  • <fraction>
  • <grid>

<percentage>

  • 版本：CSS1

说明：

<number>接%
  • 百分比总是相对于另外一个值才存在的。

    示例代码：

    div{font-size:12px;}
div.test{font-size:200%;}
  • 百分比的单位是：%

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50


<angle>

其它取值参考 选择其它项
  • <length>
  • <percentage>
  • <angle>
  • <time>
  • <frequency>
  • <fraction>
  • <grid>

<angle>

  • 版本：CSS3

说明：

<number>接角度单位。
  • 角度值的正常范围应在[0-360deg]内，例如：-10deg与350deg是等价的
  • 角度单位包括有：deg, grad, rad, turn

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
较早版本 | 6.0-8.0 | 4.0 | 5.1 | 13.0 | 11.50
较新版本 | 9.0


<time>

其它取值参考 选择其它项
  • <length>
  • <percentage>
  • <angle>
  • <time>
  • <frequency>
  • <fraction>
  • <grid>

<time>

  • 版本：CSS3

说明：

<number>接时间单位。
  • 时间值不允许有负值。
  • 时间单位包括有：ms, s
  • 单位换算：1s = 1000ms

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-8.0 | 4.0 | 5.1 | 13.0 | 11.50
版本 | 9.0


<frequency>

其它取值参考 选择其它项
  • <length>
  • <percentage>
  • <angle>
  • <time>
  • <frequency>
  • <fraction>
  • <grid>

<frequency>

  • 版本：CSS3

说明：

<number>接频率单位。
  • 频率值不允许有负值。
  • 频率单位包括有：Hz, kHz
  • 举例说明：200Hz(或200hz)表示一个低音，6kHz(或6khz)表示一个高音。
  • 单位换算：1kHz = 1000 Hz

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-9.0 | 4.0-6.0 | 5.1 | 13.0 | 11.50


<fraction>

其它取值参考 选择其它项
  • <length>
  • <percentage>
  • <angle>
  • <time>
  • <frequency>
  • <fraction>
  • <grid>

<fraction>

  • 版本：CSS3

说明：

<number>接剩余空间数单位。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-9.0 | 4.0-6.0 | 5.1 | 13.0 | 11.50-11.51


<grid>

其它取值参考 选择其它项
  • <length>
  • <percentage>
  • <angle>
  • <time>
  • <frequency>
  • <fraction>
  • <grid>

<grid>

  • 版本：CSS3

说明：

<number>接网格数单位。
  • 网格由不可见的横向和纵向线条组成用来对齐内容。在CSS3中，网格可以被隐式或显式的创建。网格线间的距离由fr来设定。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-9.0 | 4.0-6.0 | 5.1 | 13.0 | 11.50-11.51


Units index

CSS参考手册 » 单位列表
其它单位参考 选择其它项
  • 长度单位
  • 角度单位
  • 时间单位
  • 频率单位
  • 特殊布局单位

CSS Units Reference

  • CSS单位

长度单位 Length Units

  • em
  • ex
  • ch
  • rem
  • vw
  • vh
  • vm
  • cm
  • mm
  • in
  • pt
  • pc
  • px

角度单位 Angle Units

  • deg
  • grad
  • rad
  • turn

时间单位 Time Units

  • s
  • ms

频率单位 Frequency Units

  • Hz
  • kHz

特殊布局单位 Layout-specific Units

  • fr
  • gr

这种颜色 的链接表示是CSS3单位


Length Units index

CSS参考手册 » 单位列表 » 长度单位
其它长度单位参考 选择其它项
  • em
  • ex
  • ch
  • rem
  • vw
  • vh
  • vm
  • cm
  • mm
  • in
  • pt
  • pc
  • px

CSS Length Units

  • 长度单位

长度单位 Length Units

Length Units 长度单位 | CSS Version 版本 | Description 简介
文本相对长度单位 Font-relative Length Units
em | CSS1 | 相对于当前对象内文本的字体尺寸
ex | CSS1 | 相对于字符“x”的高度。通常为字体高度的一半
ch | CSS3 | 数字“0”的宽度
rem | CSS3 | 相对于根元素(即html元素)font-size计算值的倍数
视口相对长度单位 Viewport-relative Length Units
vw | CSS3 | 相对于视口的宽度。视口被均分为100单位的vw
vh | CSS3 | 相对于视口的高度。视口被均分为100单位的vh
vm | CSS3 | 相对于视口的宽度或高度，总是相对于小的那个。视口的宽度或高度被均分为100单位的vm
绝对长度单位 Absolute Length Units
cm | CSS1 | 厘米
mm | CSS1 | 毫米
in | CSS1 | 英寸（inches）; 1in = 2.54cm
pt | CSS1 | 点（points）; 1pt = 1/72in
pc | CSS1 | 派卡（picas）; 1pc = 12pt
px | CSS1 | 像素（pixels）; 1px = 1/96in

这种颜色 的链接表示是CSS3单位


em

其它长度单位参考 选择其它项
  • em
  • ex
  • ch
  • rem
  • vw
  • vh
  • vm
  • cm
  • mm
  • in
  • pt
  • pc
  • px

em

  • 版本：CSS1

说明：

相对长度单位。相对于当前对象内文本的字体尺寸。
  • 如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


ex

其它长度单位参考 选择其它项
  • em
  • ex
  • ch
  • rem
  • vw
  • vh
  • vm
  • cm
  • mm
  • in
  • pt
  • pc
  • px

ex

  • 版本：CSS1

说明：

相对长度单位。相对于字符“x”的高度。通常为字体高度的一半。
  • 如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


ch

其它长度单位参考 选择其它项
  • em
  • ex
  • ch
  • rem
  • vw
  • vh
  • vm
  • cm
  • mm
  • in
  • pt
  • pc
  • px

ch

  • 版本：CSS3

说明：

数字“0”的宽度

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-8.0 | 4.0 | 5.1 | 13.0-16.0 | 11.50-11.60
版本 | 9.0

示例：


rem

其它长度单位参考 选择其它项
  • em
  • ex
  • ch
  • rem
  • vw
  • vh
  • vm
  • cm
  • mm
  • in
  • pt
  • pc
  • px

rem

  • 版本：CSS3

说明：

相对长度单位。相对于根元素(即html元素)font-size计算值的倍数

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-8.0 | 4.0 | 5.1 | 13.0 | 11.50-11.51
版本 | 9.0 |  |  |  | 11.60

示例：


vw

其它长度单位参考 选择其它项
  • em
  • ex
  • ch
  • rem
  • vw
  • vh
  • vm
  • cm
  • mm
  • in
  • pt
  • pc
  • px

vw

  • 版本：CSS3

说明：

相对于视口的宽度。视口被均分为100单位的vw

示例代码：

h1{font-size:8vw;}

如果视口的宽度是200mm，那么上述代码中h1元素的字号将为16mm，即(8x200)/100

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-8.0 | 4.0-9.0 | 5.1 | 13.0-16.0 | 11.50-11.60
版本 | 9.0

示例：


vh

其它长度单位参考 选择其它项
  • em
  • ex
  • ch
  • rem
  • vw
  • vh
  • vm
  • cm
  • mm
  • in
  • pt
  • pc
  • px

vh

  • 版本：CSS3

说明：

相对于视口的高度。视口被均分为100单位的vh

示例代码：

h1{font-size:8vh;}

如果视口的高度是200mm，那么上述代码中h1元素的字号将为16mm，即(8x200)/100

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-8.0 | 4.0-9.0 | 5.1 | 13.0-16.0 | 11.50-11.60
版本 | 9.0

示例：


vm

其它长度单位参考 选择其它项
  • em
  • ex
  • ch
  • rem
  • vw
  • vh
  • vm
  • cm
  • mm
  • in
  • pt
  • pc
  • px

vm

  • 版本：CSS3

说明：

相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vm
  • CSS3中已经定义了min()函数，所以vm最终是否会纳入W3C标准还不确定。

  • 示例代码：

    h1{font-size:8vm;}

    如果视口的宽度是300mm，高度是200mm，那么上述代码中h1元素的字号将为16mm，即(8x200)/100，因为高度比宽度要小，所以计算的时候相对于高度。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-8.0 | 4.0-9.0 | 5.1 | 13.0-16.0 | 11.50-11.60
版本 | 9.0

示例：


cm

其它长度单位参考 选择其它项
  • em
  • ex
  • ch
  • rem
  • vw
  • vh
  • vm
  • cm
  • mm
  • in
  • pt
  • pc
  • px

cm

  • 版本：CSS1

说明：

厘米（Centimeters）。绝对长度单位。
  • 1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px

示例代码：

div{font-size:1cm;}
p{height:10cm;}

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


mm

其它长度单位参考 选择其它项
  • em
  • ex
  • ch
  • rem
  • vw
  • vh
  • vm
  • cm
  • mm
  • in
  • pt
  • pc
  • px

mm

  • 版本：CSS1

说明：

毫米（Millimeters）。绝对长度单位。
  • 1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px

示例代码：

div{font-size:10mm;}
p{height:100mm;}

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


in

其它长度单位参考 选择其它项
  • em
  • ex
  • ch
  • rem
  • vw
  • vh
  • vm
  • cm
  • mm
  • in
  • pt
  • pc
  • px

in

  • 版本：CSS1

说明：

英寸（Inches）。绝对长度单位。
  • 1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px

示例代码：

div{font-size:1in;}
p{height:10in;}

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


pt

其它长度单位参考 选择其它项
  • em
  • ex
  • ch
  • rem
  • vw
  • vh
  • vm
  • cm
  • mm
  • in
  • pt
  • pc
  • px

pt

  • 版本：CSS1

说明：

点（Points）。绝对长度单位。
  • 1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px

示例代码：

div{font-size:10pt;}
p{height:100pt;}

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


pc

其它长度单位参考 选择其它项
  • em
  • ex
  • ch
  • rem
  • vw
  • vh
  • vm
  • cm
  • mm
  • in
  • pt
  • pc
  • px

pc

  • 版本：CSS1

说明：

派卡（Picas）。绝对长度单位。相当于我国新四号铅字的尺寸。
  • 1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px

示例代码：

div{font-size:1pc;}
p{height:10pc;}

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


px

其它长度单位参考 选择其它项
  • em
  • ex
  • ch
  • rem
  • vw
  • vh
  • vm
  • cm
  • mm
  • in
  • pt
  • pc
  • px

px

  • 版本：CSS1

说明：

相对长度单位。像素（Pixels）。
  • 1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px

示例代码：

div{font-size:12px;}
p{text-indent:24px;}

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0 | 4.0 | 5.1 | 13.0 | 11.50

示例：


Angle Units index

CSS参考手册 » 单位列表 » 角度单位
其它角度单位参考 选择其它项
  • deg
  • grad
  • rad
  • turn

CSS Angle Units

  • 角度单位

角度单位 Angle Units

Angle Units 角度单位 | CSS Version 版本 | Description 简介
deg | CSS3 | 度（Degrees）
grad | CSS3 | 梯度（Gradians）
rad | CSS3 | 弧度（Radians）
turn | CSS3 | 转、圈（Turns）

这种颜色 的链接表示是CSS3单位


deg

  • 版本：CSS3

说明：

度（Degress）。一个圆共360度

90deg = 100grad = 0.25turn ≈ 1.570796326794897rad

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-8.0 | 4.0 | 5.1 | 13.0 | 11.50
版本 | 9.0

示例：


grad

  • 版本：CSS3

说明：

梯度（Gradians）。一个圆共400梯度

90deg = 100grad = 0.25turn ≈ 1.570796326794897rad

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-8.0 | 4.0 | 5.1 | 13.0 | 11.50
版本 | 9.0

示例：


rad

  • 版本：CSS3

说明：

弧度（Radians）。一个圆共2π弧度

90deg = 100grad = 0.25turn ≈ 1.570796326794897rad

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-8.0 | 4.0 | 5.1 | 13.0 | 11.50
版本 | 9.0

示例：


turn

  • 版本：CSS3

说明：

转、圈（Turns）。一个圆共1圈

90deg = 100grad = 0.25turn ≈ 1.570796326794897rad

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-8.0 | 4.0-9.0 | 5.1 | 13.0 | 11.50
版本 | 9.0

示例：


Time Units index

CSS参考手册 » 单位列表 » 时间单位
其它时间单位参考 选择其它项
  • s
  • ms

CSS Time Units

  • 时间单位

时间单位 Time Units

Time Units 时间单位 | CSS Version 版本 | Description 简介
s | CSS3 | 秒
ms | CSS3 | 毫秒

这种颜色 的链接表示是CSS3单位


s

  • 版本：CSS3

说明：

秒
  • 1s = 1000ms

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-8.0 | 4.0 | 5.1 | 13.0 | 11.50
版本 | 9.0

示例：


ms

  • 版本：CSS3

说明：

毫秒
  • 1s = 1000ms

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-8.0 | 4.0 | 5.1 | 13.0 | 11.50
版本 | 9.0

示例：


Frequency Units index

CSS参考手册 » 单位列表 » 频率单位
其它频率单位参考 选择其它项
  • hz
  • khz

CSS Frequency Units

  • 频率单位

频率单位 Frequency Units

Frequency Units 频率单位 | CSS Version 版本 | Description 简介
Hz | CSS3 | 赫兹
kHz | CSS3 | 千赫兹

这种颜色 的链接表示是CSS3单位


Hz

  • 版本：CSS3

说明：

赫兹
  • 1kHz = 1000Hz

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-9.0 | 4.0-6.0 | 5.1 | 13.0 | 11.50

示例：

strong{voice-pitch:75Hz;}


kHz

  • 版本：CSS3

说明：

千赫兹
  • 1kHz = 1000Hz

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-9.0 | 4.0-6.0 | 5.1 | 13.0 | 11.50

示例：

strong{voice-pitch:1kHz;}


Layout-specific Units index

CSS参考手册 » 单位列表 » 布局单位
其它布局单位参考 选择其它项
  • fr
  • gr

CSS Layout-specific Units

  • 特殊布局单位

特殊布局单位 Layout-specific Units

Layout-specific Units 特殊布局单位 | CSS Version 版本 | Description 简介
fr | CSS3 | 剩余空间分配数
gr | CSS3 | 网格数

这种颜色 的链接表示是CSS3单位


fr

  • 版本：CSS3

说明：

剩余空间分配数
  • fr单位被用于在一系列长度值中分配剩余空间，如果多个已指定了多个部分，则剩下的空间根据各自的数字按比例分配。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-9.0 | 4.0-6.0 | 5.1 | 13.0 | 11.50-11.51

示例：

border-parts:10px 1fr 10px;
border-parts:10px 1fr 10px 1fr 10px;
border-parts:10px 2fr 10px 2fr 10px;


gr

  • 版本：CSS3

说明：

网格数

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-9.0 | 4.0-6.0 | 5.1 | 13.0 | 11.50-11.51

示例：

img{
float:top left multicol;
float-offset:2gr;
width:1gr;}
}


Appendix index

CSS参考手册 » 附录列表
其它附录参考 选择其它项
  • 颜色关键字
  • 媒体类型

Appendix Reference

  • 附录

附录 Appendix

  • 颜色关键字(Color Keywords)
  • 媒体类型(Media Types)


Color Keywods

  • 颜色关键字

16个基本颜色关键字 Basic color keywords

Color | Color Name | HEX | RGB
 | black | #000000 | 0,0,0
 | silver | #C0C0C0 | 192,192,192
 | gray | #808080 | 128,128,128
 | white | #FFFFFF | 255,255,255
 | maroon | #800000 | 128,0,0
 | red | #FF0000 | 255,0,0
 | purple | #800080 | 128,0,128
 | fuchsia | #FF00FF | 255,0,255
 | green | #008000 | 0,128,0
 | lime | #00FF00 | 0,255,0
 | olive | #808000 | 128,128,0
 | yellow | #FFFF00 | 255,255,0
 | navy | #000080 | 0,0,128
 | blue | #0000FF | 0,0,255
 | teal | #008080 | 0,128,128
 | aqua | #00FFFF | 0,255,255

示例代码：

body{color:black;background:white;}
h1{color:maroon;}
h2{color:olive;}

28个系统颜色 CSS system colors

Color | Color Name
 | activeborder
 | activecaption
 | appworkspace
 | background
 | buttonface
 | buttonhighlight
 | buttonshadow
 | buttontext
 | captiontext
 | graytext
 | highlight
 | highlighttext
 | inactiveborder
 | inactivecaption
 | inactivecaptiontext
 | infobackground
 | infotext
 | menu
 | menutext
 | scrollbar
 | threeddarkshadow
 | threedface
 | threedhighlight
 | threedlightshadow
 | threedshadow
 | window
 | windowframe
 | windowtext

示例代码：

body{color:windowtext;background:background;}
h1,h2{color:highlight;}

CSS系统颜色在CSS3中已经不被建议使用了。尽可能的使用其它的方式来模拟系统色的色彩。

拓展颜色关键字 Extended color keywords

Color | Color Name | HEX | RGB
 | aliceblue | #f0f8ff | 240,248,255
 | antiquewhite | #faebd7 | 250,235,215
 | aqua | #00ffff | 0,255,255
 | aquamarine | #7fffd4 | 127,255,212
 | azure | #f0ffff | 240,255,255
 | beige | #f5f5dc | 245,245,220
 | bisque | #ffe4c4 | 255,228,196
 | black | #000000 | 0,0,0
 | blanchedalmond | #ffebcd | 255,235,205
 | blue | #0000ff | 0,0,255
 | blueviolet | #8a2be2 | 138,43,226
 | brown | #a52a2a | 165,42,42
 | burlywood | #deb887 | 222,184,135
 | cadetblue | #5f9ea0 | 95,158,160
 | chartreuse | #7fff00 | 127,255,0
 | chocolate | #d2691e | 210,105,30
 | coral | #ff7f50 | 255,127,80
 | cornflowerblue | #6495ed | 100,149,237
 | cornsilk | #fff8dc | 255,248,220
 | crimson | #dc143c | 220,20,60
 | cyan | #00ffff | 0,255,255
 | darkblue | #00008b | 0,0,139
 | darkcyan | #008b8b | 0,139,139
 | darkgoldenrod | #b8860b | 184,134,11
 | darkgray | #a9a9a9 | 169,169,169
 | darkgreen | #006400 | 0,100,0
 | darkgrey | #a9a9a9 | 169,169,169
 | darkkhaki | #bdb76b | 189,183,107
 | darkmagenta | #8b008b | 139,0,139
 | darkolivegreen | #556b2f | 85,107,47
 | darkorange | #ff8c00 | 255,140,0
 | darkorchid | #9932cc | 153,50,204
 | darkred | #8b0000 | 139,0,0
 | darksalmon | #e9967a | 233,150,122
 | darkseagreen | #8fbc8f | 143,188,143
 | darkslateblue | #483d8b | 72,61,139
 | darkslategray | #2f4f4f | 47,79,79
 | darkslategrey | #2f4f4f | 47,79,79
 | darkturquoise | #00ced1 | 0,206,209
 | darkviolet | #9400d3 | 148,0,211
 | deeppink | #ff1493 | 255,20,147
 | deepskyblue | #00bfff | 0,191,255
 | dimgray | #696969 | 105,105,105
 | dimgrey | #696969 | 105,105,105
 | dodgerblue | #1e90ff | 30,144,255
 | firebrick | #b22222 | 178,34,34
 | floralwhite | #fffaf0 | 255,250,240
 | forestgreen | #228b22 | 34,139,34
 | fuchsia | #ff00ff | 255,0,255
 | gainsboro | #dcdcdc | 220,220,220
 | ghostwhite | #f8f8ff | 248,248,255
 | gold | #ffd700 | 255,215,0
 | goldenrod | #daa520 | 218,165,32
 | gray | #808080 | 128,128,128
 | green | #008000 | 0,128,0
 | greenyellow | #adff2f | 173,255,47
 | grey | #808080 | 128,128,128
 | honeydew | #f0fff0 | 240,255,240
 | hotpink | #ff69b4 | 255,105,180
 | indianred | #cd5c5c | 205,92,92
 | indigo | #4b0082 | 75,0,130
 | ivory | #fffff0 | 255,255,240
 | khaki | #f0e68c | 240,230,140
 | lavender | #e6e6fa | 230,230,250
 | lavenderblush | #fff0f5 | 255,240,245
 | lawngreen | #7cfc00 | 124,252,0
 | lemonchiffon | #fffacd | 255,250,205
 | lightblue | #add8e6 | 173,216,230
 | lightcoral | #f08080 | 240,128,128
 | lightcyan | #e0ffff | 224,255,255
 | lightgoldenrodyellow | #fafad2 | 250,250,210
 | lightgray | #d3d3d3 | 211,211,211
 | lightgreen | #90ee90 | 144,238,144
 | lightgrey | #d3d3d3 | 211,211,211
 | lightpink | #ffb6c1 | 255,182,193
 | lightsalmon | #ffa07a | 255,160,122
 | lightseagreen | #20b2aa | 32,178,170
 | lightskyblue | #87cefa | 135,206,250
 | lightslategray | #778899 | 119,136,153
 | lightslategrey | #778899 | 119,136,153
 | lightsteelblue | #b0c4de | 176,196,222
 | lightyellow | #ffffe0 | 255,255,224
 | lime | #00ff00 | 0,255,0
 | limegreen | #32cd32 | 50,205,50
 | linen | #faf0e6 | 250,240,230
 | magenta | #ff00ff | 255,0,255
 | maroon | #800000 | 128,0,0
 | mediumaquamarine | #66cdaa | 102,205,170
 | mediumblue | #0000cd | 0,0,205
 | mediumorchid | #ba55d3 | 186,85,211
 | mediumpurple | #9370db | 147,112,219
 | mediumseagreen | #3cb371 | 60,179,113
 | mediumslateblue | #7b68ee | 123,104,238
 | mediumspringgreen | #00fa9a | 0,250,154
 | mediumturquoise | #48d1cc | 72,209,204
 | mediumvioletred | #c71585 | 199,21,133
 | midnightblue | #191970 | 25,25,112
 | mintcream | #f5fffa | 245,255,250
 | mistyrose | #ffe4e1 | 255,228,225
 | moccasin | #ffe4b5 | 255,228,181
 | navajowhite | #ffdead | 255,222,173
 | navy | #000080 | 0,0,128
 | oldlace | #fdf5e6 | 253,245,230
 | olive | #808000 | 128,128,0
 | olivedrab | #6b8e23 | 107,142,35
 | orange | #ffa500 | 255,165,0
 | orangered | #ff4500 | 255,69,0
 | orchid | #da70d6 | 218,112,214
 | palegoldenrod | #eee8aa | 238,232,170
 | palegreen | #98fb98 | 152,251,152
 | paleturquoise | #afeeee | 175,238,238
 | palevioletred | #db7093 | 219,112,147
 | papayawhip | #ffefd5 | 255,239,213
 | peachpuff | #ffdab9 | 255,218,185
 | peru | #cd853f | 205,133,63
 | pink | #ffc0cb | 255,192,203
 | plum | #dda0dd | 221,160,221
 | powderblue | #b0e0e6 | 176,224,230
 | purple | #800080 | 128,0,128
 | red | #ff0000 | 255,0,0
 | rosybrown | #bc8f8f | 188,143,143
 | royalblue | #4169e1 | 65,105,225
 | saddlebrown | #8b4513 | 139,69,19
 | salmon | #fa8072 | 250,128,114
 | sandybrown | #f4a460 | 244,164,96
 | seagreen | #2e8b57 | 46,139,87
 | seashell | #fff5ee | 255,245,238
 | sienna | #a0522d | 160,82,45
 | silver | #c0c0c0 | 192,192,192
 | skyblue | #87ceeb | 135,206,235
 | slateblue | #6a5acd | 106,90,205
 | slategray | #708090 | 112,128,144
 | slategrey | #708090 | 112,128,144
 | snow | #fffafa | 255,250,250
 | springgreen | #00ff7f | 0,255,127
 | steelblue | #4682b4 | 70,130,180
 | tan | #d2b48c | 210,180,140
 | teal | #008080 | 0,128,128
 | thistle | #d8bfd8 | 216,191,216
 | tomato | #ff6347 | 255,99,71
 | turquoise | #40e0d0 | 64,224,208
 | violet | #ee82ee | 238,130,238
 | wheat | #f5deb3 | 245,222,179
 | white | #ffffff | 255,255,255
 | whitesmoke | #f5f5f5 | 245,245,245
 | yellow | #ffff00 | 255,255,0
 | yellowgreen | #9acd32 | 154,205,50

示例代码：

body{color:black;background:white;}
h1{color:violet;}
h2{color:yellowgreen;}


Media Types

其它附录参考 选择其它项
  • 颜色关键字
  • 媒体类型

CSS Media Types

  • 媒体类型

媒体类型 Media Types

Media Types 媒体类型 | CSS Version 版本 | Compatibility 兼容性 | Description 简介
all | CSS2 | 所有浏览器 | 用于所有媒体设备类型
aural | CSS2 | Opera | 用于语音和音乐合成器
braille | CSS2 | Opera | 用于触觉反馈设备
handheld | CSS2 | Chrome,Safari,Opera | 用于小型或手持设备
print | CSS2 | 所有浏览器 | 用于打印机
projection | CSS2 | Opera | 用于投影图像，如幻灯片
screen | CSS2 | 所有浏览器 | 用于计算机显示器
tty | CSS2 | Opera | 用于使用固定间距字符格的设备。如电传打字机和终端
tv | CSS2 | Opera | 用于电视类设备
embossed | CSS2 | Opera | 用于凸点字符（盲文）印刷设备


CSS Hack Index

CSS参考手册 » CSS Hack列表
其它CSS Hack参考 选择其它项
  • 条件Hack
  • 属性级Hack
  • 选择符级Hack

CSS Hack

  • 常用CSS Hack

常用CSS Hack

  • 条件Hack
  • 属性级Hack
  • 选择符级Hack

* 这里只列举一些使用比率较高的常用CSS Hack，且不考虑IE6以下的版本。若对其它更多Hack有兴趣，可Google或Baidu。

* CSS Hack一般都是利用各浏览器的支持CSS的能力和BUG来进行的。所以对浏览器的选择大致可以分为能力选择和怪癖选择(BUG)。能力通常是指浏览器对CSS特性的支持程度，而怪癖是指浏览器特有的一些BUG。

* 友情提示：尽量找到通用方法而减少对CSS Hack的使用，大规模使用CSS Hack会带来维护成本的提高以及浏览器版本变化而带来类似Hack失效等系列问题。


If Hack

其它CSS Hack参考 选择其它项
  • 条件Hack
  • 属性级Hack
  • 选择符级Hack

条件Hack

  • （CSS外部）HTML级Hack

语法：

<!--[if <keywords>? IE <version>?]>
HTML代码块
<![endif]-->

取值：

<keywords>

if条件共包含6种选择方式：是否、大于、大于或等于、小于、小于或等于、非指定版本

是否：
指定是否IE或IE某个版本。关键字：空
大于：
选择大于指定版本的IE版本。关键字：gt（greater than）
大于或等于：
选择大于或等于指定版本的IE版本。关键字：gte（greater than or equal）
小于：
选择小于指定版本的IE版本。关键字：lt（less than）
小于或等于：
选择小于或等于指定版本的IE版本。关键字：lte（less than or equal）
非指定版本：
选择除指定版本外的所有IE版本。关键字：!
<version>

目前的常用IE版本为6.0及以上，推荐酌情忽略低版本，把精力花在为使用高级浏览器的用户提供更好的体验上

说明：

用于选择IE浏览器及IE的不同版本
  • if条件Hack是HTML级别的（包含但不仅是CSS的Hack，可以选择任何HTML代码块）

  • 如不想在非IE中看到某区域，可这样写：

    <!--[if IE]>
<p>你在非IE中将看不到我的身影</p>
<![endif]-->

    上述p代码块，将只在IE中可见。

  • if条件6种选择方式的使用示例（下述代码中被条件注释包含的HTML代码块也可以是link标记）：

  • 是否，示例代码：

    <!--[if IE]>
<style>
.test{color:red;}
</style>
<![endif]-->

    在上述代码中，只有IE浏览，才能看到应用了test类的元素是红色文本。

  • 大于，示例代码：

    <!--[if gt IE 6]>
<style>
.test{color:red;}
</style>
<![endif]-->

    在上述代码中，只有IE6以上，才能看到应用了test类的元素是红色文本。

  • 大于或等于，示例代码：

    <!--[if gte IE 6]>
<style>
.test{color:red;}
</style>
<![endif]-->

    在上述代码中，只有IE6以上（含IE6），才能看到应用了test类的元素是红色文本。

  • 小于，示例代码：

    <!--[if lt IE 7]>
<style>
.test{color:red;}
</style>
<![endif]-->

    在上述代码中，只有IE7以下，才能看到应用了test类的元素是红色文本。

  • 小于或等于，示例代码：

    <!--[if lte IE 7]>
<style>
.test{color:red;}
</style>
<![endif]-->

    在上述代码中，只有IE7以下（含IE7），才能看到应用了test类的元素是红色文本。

  • 非指定版本，示例代码：

    <!--[if ! IE 7]>
<style>
.test{color:red;}
</style>
<![endif]-->

    在上述代码中，除IE7以外的IE版本，都能看到应用了test类的元素是红色文本。

示例：


Properties Level Hack

其它CSS Hack参考 选择其它项
  • 条件Hack
  • 属性级Hack
  • 选择符级Hack

属性Hack

  • CSS内部属性级Hack

语法：

selector{<hack>?property:value<hack>?;}

取值：

_：
选择IE6及以下。连接线（中划线）（-）亦可使用，为了避免与某些带中划线的属性混淆，所以使用下划线（_）更为合适。
*：
选择IE7及以下。诸如：（+）与（#）之类的均可使用，不过业界对（*）的认知度更高
\9：
选择IE6+
\0：
选择IE8+和Opera
[;property:value;];：
选择webkit核心浏览器（Chrome,Safari）。IE7及以下也能识别。中括号内外的3个分号必须保留，第一个分号前可以是任意规则或任意多个规则
[;color:#f00;]; 与 [color:#f00;color:#f00;]; 与 [margin:0;padding:0;color:#f00;]; 是等价的。生效的始终是中括号内的最后一条规则，所以通常选用第一种写法最为简洁。

说明：

选择不同的浏览器及版本
  • 尽可能减少对CSS Hack的使用。Hack有风险，使用需谨慎
  • 通常如未作特别说明，本文档所有的代码和示例的默认运行环境都为标准模式。

  • 一些CSS Hack由于浏览器存在交叉认识，所以需要通过层层覆盖的方式来实现对不同浏览器进行Hack的。如下面这个例子：

    如想同一段文字在IE6,7,8显示为不同颜色，可这样写：

    .test{
    color:#090\9; /* For IE8+ */
    *color:#f00;  /* For IE7 and earlier */
    _color:#ff0;  /* For IE6 and earlier */
}

    * 上述Hack均需运行在标准模式下，若在怪异模式下运行，这些Hack将会被不同版本的IE相互识别，导致失效。

示例：


Selectors Level Hack

其它CSS Hack参考 选择其它项
  • 条件Hack
  • 属性级Hack
  • 选择符级Hack

选择符级Hack

  • CSS内部选择符级Hack

语法：

<hack> selector{ sRules }

说明：

选择不同的浏览器及版本
  • 尽可能减少对CSS Hack的使用。Hack有风险，使用需谨慎
  • 通常如未作特别说明，本文档所有的代码和示例的默认运行环境都为标准模式。
  • 一些CSS Hack由于浏览器存在交叉认识，所以需要通过层层覆盖的方式来实现对不同浏览器进行Hack的。

  • 简单列举几个：

    * html .test{color:#090;}       /* For IE6 and earlier */
* + html .test{color:#ff0;}     /* For IE7 */
.test:lang(zh-cn){color:#f00;}  /* For IE8+ and not IE */
.test:nth-child(1){color:#0ff;} /* For IE9+ and not IE */

    * 上述代码中的3,4两行就是典型的利用能力来进行选择的CSS Hack。

示例：


Question And Experience Index

CSS参考手册 » 问题和经验列表
其它问题和经验参考 选择其它项
  • Bugs和解决方案
  • 技巧和经验
  • 其它技巧和经验

Question And Experience

  • 问题和经验

Bugs和解决方案

  1. 如何在IE6及更早浏览器中定义小高度的容器？
  2. 如何解决IE6及更早浏览器浮动时产生双倍边距的BUG？
  3. 如何在IE6及更早浏览器下模拟min-height效果？
  4. 如何解决按钮在IE7及更早浏览器下随着value增多两边留白也随着增加的问题？
  5. 如何解决IE7及更早浏览器下当li中出现2个或以上的浮动时，li之间产生的空白间隙的BUG？
  6. 如何解决IE6及更早浏览器下的3像素BUG？
  7. 如何解决IE6下的文本溢出BUG（江湖匪号：“谍影重重”或“一只猪的故事”）？
  8. 如何解决IE6使用滤镜PNG图片透明后，容器内链接失效的问题？
  9. 如何解决IE6无法识别伪对象:first-letter/:first-line的问题？
  10. 如何解决IE8会忽略伪对象:first-letter/:first-line里的!important规则的问题？
  11. 如何解决IE6会忽略同一条样式体内的!important规则的问题？
  12. 如何解决IE6及更早浏览器下当li内部元素是定义了display:block的内联元素时底部产生空白的问题？
  13. 如何解决IE6及更早浏览器下未定义宽度的浮动或绝对定位元素会被内部设置了zoom:1的块元素撑开的问题？
  14. 如何解决IE7及更早浏览器下子元素相对定位时父元素overflow属性的auto|hidden失效的问题？
  15. 如何解决Chrome在应用transition时页面闪动的问题？

技巧和经验

  1. 如何清除图片下方出现几像素的空白间隙？
  2. 如何让文本垂直对齐文本输入框？
  3. 如何让单行文本在容器内垂直居中？
  4. 如何让超链接访问后和访问前的颜色不同且访问后仍保留hover和active效果？
  5. 为什么Standard mode下IE无法设置滚动条的颜色？
  6. 如何使文本溢出边界不换行强制在一行内显示？
  7. 如何使文本溢出边界显示为省略号？
  8. 如何使连续的长字符串自动换行？
  9. 如何清除浮动？
  10. 如何定义鼠标指针的光标形状为手型并兼容所有浏览器？
  11. 如何让已知高度的容器在页面中水平垂直居中？
  12. 如何让未知尺寸的图片在已知宽高的容器内水平垂直居中？
  13. 如何设置span的宽度和高度（即如何设置内联元素的宽高）？
  14. 如何给一个元素定义多个不同的css规则？
  15. 如何让某个元素充满整个页面？
  16. 如何让某个元素距离窗口上右下左4边各10像素？
  17. 如何去掉超链接的虚线框？
  18. 如何容器透明，内容不透明？
  19. 如何让整个页面水平居中？
  20. 为什么容器的背景色没显示出来？为什么容器无法自适应内容高度？
  21. 如何做1像素细边框的table？
  22. 如何使页面文本行距始终保持为n倍字体大小的基调？
  23. 标准模式Standard mode和怪异模式Quirks mode下的盒模型区别？
  24. 以图换字的几种方法及优劣分析
  25. 为什么2个相邻div的margin只有1个生效？
  26. 如何在文本框中禁用中文输入法？
  27. 如何解决列表中list-style-image不能精准定位的问题？
  28. 如何解决伪对象:before和:after在input标签上的怪异表现的问题？
  29. 如何解决伪对象:before和:after无法在Chrome,Safari,Opera上定义过渡和动画的问题？

其它技巧和经验

  1. 如何让层在falsh上显示？
  2. 如何使用标准的方法在页面上插入flash？
  3. 如何在点文字时也选中复选框或单选框？
  4. IE下如何对Standard Mode与Quirks Mode进行切换？
  5. 如何区别display:none与visibility:hidden？
  6. 如何设置IE下的iframe背景透明？


Bugs And Fixed

  • Bugs和解决方案

Bugs及解决方案列表（以下实例默认运行环境都为Standard mode）：

  1. 如何在IE6及更早浏览器中定义小高度的容器？

    方法：

    #test{overflow:hidden;height:1px;font-size:0;line-height:0;}

    IE6及更早浏览器之所以无法直接定义较小高度的容器是因为默认会有行高

  2. 如何解决IE6及更早浏览器浮动时产生双倍边距的BUG？

    方法：

    #test{display:inline;}

    当在IE6及更早浏览器中出现浮动后margin值解析为双倍的情况，设置该元素的display属性为inline即可。

  3. 如何在IE6及更早浏览器下模拟min-height效果？

    方法：

    #test{min-height:100px;_height:100px;}

    注意此时#test不能再设置overflow的值为hidden，否则模拟min-height效果将失效

  4. 如何解决按钮在IE7及更早浏览器下随着value增多两边留白也随着增加的问题？

    方法：

    input,button{overflow:visible;}

  5. 如何解决IE7及更早浏览器下当li中出现2个或以上的浮动时，li之间产生的空白间隙的BUG？

    方法：

    li{vertical-align:top;}

    除了top值，还可以设置为text-top | middle | bottom | text-bottom，甚至特定的<length>和<percentage>值都可以

  6. 如何解决IE6及更早浏览器下的3像素BUG？

    方法：

    .a{color:#f00;}
.main{width:950px;background:#eee;}
.content{float:left;width:750px;height:100px;background:#ccc;_margin-right:-3px;}
.aside{height:100px;background:#aaa;}

<div class="main">
    <div class="content">content</div>
    <div class="aside">aside</div>
</div>

    在IE6及更早浏览器下为.content设置margin-right:-3px；也可以设置.aside为浮动

  7. 如何解决IE6下的文本溢出BUG（江湖匪号：“谍影重重”或“一只猪的故事”）？

    BUG重现：

    .test{zoom:1;overflow:hidden;width:500px;}
.box1{float:left;width:100px;}
.box2{float:right;width:400px;}

<div class="test">
    <div class="box1"></div>
    <!-- 注释 -->
    <div class="box2">↓这就是多出来的那只猪</div>
</div>

    运行如上代码，你会发现文字发生了溢出，在IE6下会多出一只“猪”。造成此BUG的原因可能是多重混合的，如浮动，注释，宽高定义等等。并且注释条数越多，溢出的文本也会随之增多。

    列举几个解决方法：
      删除box1和box2之间所有的注释；
      不设置浮动；
      调整box1或box2的宽度，比如将box的宽度调整为90px

  8. 如何解决IE6使用滤镜PNG图片透明后，容器内链接失效的问题？

    方法：

    div{width:300px;height:100px;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='*.png');}
a{_position:relative;}

    解决方法是为容器内的链接定义相对定位属性position的值为relative

  9. 如何解决IE6无法识别伪对象:first-letter/:first-line的问题？

    方法1：

    p:first-letter {float:left;font-size:40px;font-weight:bold;}
p:first-line {color:#090;}

    增加空格：在伪对象选择符:first-letter/:first-line与包含规则的花括号"{"间增加空格。

    方法2：

    p:first-letter
{float:left;font-size:40px;font-weight:bold;}
p:first-line
{color:#090;}

    换行：将整个花括号"{"规则区域换行。细节参见E:first-letter和E:first-line选择符

  10. 如何解决IE8会忽略伪对象:first-letter/:first-line里的!important规则的问题？

    BUG重现：

    p:first-letter {float:left;font-size:40px;font-weight:bold;color:#f00!important;color:#090;}

    如上代码，在IE8下color定义都会失效，原因就是因为有color使用了!important规则。鉴于此，请尽量不要在:first-letter/:first-line里使用!important规则。

  11. 如何解决IE6会忽略同一条样式体内的!important规则的问题？

    BUG重现：

    div{color:#f00!important;color:#000;}

    如上代码，IE6及以下浏览器div的文本颜色为#000，!important并没有覆盖后面的规则，也就是说!important被忽略了。解决方案是将该样式拆分为2条，细节参见!important规则

  12. 如何解决IE6及更早浏览器下当li内部元素是定义了display:block的内联元素时底部产生空白的问题？

    BUG重现：

    a,span{display:block;background:#ddd;}

<ul>
    <li><a href="http://css.doyoe.com/">CSS参考手册</a></li>
    <li><a href="http://blog.doyoe.com/">CSS探索之旅</a></li>
    <li><a href="http://demo.doyoe.com/">web前端实验室</a></li>
    <li><span>测试li内部元素为设置了display:block的内联元素时底部产生空白</span></li>
</ul>

    如上代码，IE6及更早浏览器每个li内部的内联元素底部都会产生空白。解决方案是给li内部的内联元素再加上zoom:1

  13. 如何解决IE6及更早浏览器下未定义宽度的浮动或绝对定位元素会被内部设置了zoom:1的块元素撑开的问题？

    BUG重现：

    #test{zoom:1;overflow:hidden;border:1px solid #ddd;background:#eee;}
#test h1{float:left;}
#test .nav{float:right;background:#aaa;}
#test .nav ul{zoom:1;overflow:hidden;margin:0;padding:0;list-style:none;}
#test .nav li{float:left;margin:0 5px;}

<div id="test">
    <h1>Doyoe</h1>
    <div class="nav">
        <ul>
            <li><a href="http://css.doyoe.com/">CSS参考手册</a></li>
            <li><a href="http://blog.doyoe.com/">CSS探索之旅</a></li>
            <li><a href="http://demo.doyoe.com/">web前端实验室</a></li>
        </ul>
    </div>
</div>

    如上代码，IE6及更早浏览器div.nav会被设置了zoom:1的ul给撑开。

    列举几个解决方法：
      设置ul为浮动元素；
      设置ul为inline元素；
      设置ul的width

  14. 如何解决IE7及更早浏览器下子元素相对定位时父元素overflow属性的auto|hidden失效的问题？

    BUG重现：

    div{overflow:auto;width:260px;height:80px;border:1px solid #ddd;}
p{position:relative;margin:0;}

<div>
    <p>如果我是相对定位，我的父元素overflow属性设置为auto|hidden将失效。如果你使用的是IE及更早浏览器，你将可以看到这个BUG</p>
    <p>如果我是相对定位，我的父元素overflow属性设置为auto|hidden将失效。如果你使用的是IE及更早浏览器，你将可以看到这个BUG</p>
</div>

    如上代码，在IE7及更早浏览器下你会看到div的滚动条将无法工作。解决方案是给div也设置相对定位position:relative

  15. 如何解决Chrome在应用transition时页面闪动的问题？

    方法：

    -webkit-transform-style:preserve-3d;或-webkit-backface-visibility:hidden;

    在Chrome下，使用过渡效果transition时有时会出现页面闪动

待续及修订。。。


Skill And Experience

  • CSS技巧和经验集合

CSS技巧和经验列表（以下实例默认运行环境都为Standard mode）：

  1. 如何清除图片下方出现几像素的空白间隙？

    方法1：

    img{display:block;}

    方法2：

    img{vertical-align:top;}

    除了top值，还可以设置为text-top | middle | bottom | text-bottom，甚至特定的<length>和<percentage>值都可以

    方法3：

    #test{font-size:0;line-height:0;}

    #test为img的父元素

  2. 如何让文本垂直对齐文本输入框？

    方法：

    input{vertical-align:middle;}

  3. 如何让单行文本在容器内垂直居中？

    方法：

    #test{height:25px;line-height:25px;}

    只需设置文本的行高等于容器的高度即可

  4. 如何让超链接访问后和访问前的颜色不同且访问后仍保留hover和active效果？

    方法：

    a:link{color:#03c;}
a:visited{color:#666;}
a:hover{color:#f30;}
a:active{color:#c30;}

    按L-V-H-A的顺序设置超链接样式即可，可速记为LoVe（喜欢）HAte（讨厌）

  5. 为什么Standard mode下IE无法设置滚动条的颜色？

    方法：

    html{
    scrollbar-3dlight-color:#999;
    scrollbar-darkshadow-color:#999;
    scrollbar-highlight-color:#fff;
    scrollbar-shadow-color:#eee;
    scrollbar-arrow-color:#000;
    scrollbar-face-color:#ddd;
    scrollbar-track-color:#eee;
    scrollbar-base-color:#ddd;
}

    将原来设置在body上的滚动条颜色样式定义到html标签选择符上即可

  6. 如何使文本溢出边界不换行强制在一行内显示？

    方法：

    #test{width:150px;white-space:nowrap;}

    设置容器的宽度和white-space为nowrap即可，其效果类似<nobr>标签

  7. 如何使文本溢出边界显示为省略号？

    方法（此方法Firefox5.0尚不支持）：

    #test{width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

    首先需设置将文本强制在一行内显示，然后将溢出的文本通过overflow:hidden截断，并以text-overflow:ellipsis方式将截断的文本显示为省略号。

  8. 如何使连续的长字符串自动换行？

    方法：

    #test{width:150px;word-wrap:break-word;}

    word-wrap的break-word值允许单词内换行

  9. 如何清除浮动？

    方法1：

    #test{clear:both;}

    #test为浮动元素的下一个兄弟元素

    方法2：

    #test{display:block;zoom:1;overflow:hidden;}

    #test为浮动元素的父元素。zoom:1也可以替换为固定的width或height

    方法3：

    #test{zoom:1;}
#test:after{display:block;clear:both;visibility:hidden;height:0;content:'';}

    #test为浮动元素的父元素

  10. 如何定义鼠标指针的光标形状为手型并兼容所有浏览器？

    方法：

    #test{cursor:pointer;}

    若将cursor设置为hand，将只有IE和Opera支持，且hand为非标准属性值

  11. 如何让已知高度的容器在页面中水平垂直居中？

    方法：

    #test{position:absolute;top:50%;left:50%;width:200px;height:200px;margin:-100px 0 0 -100px;}

    Know More：已知高度的容器如何在页面中水平垂直居中

  12. 如何让未知尺寸的图片在已知宽高的容器内水平垂直居中？

    方法：

    #test{display:table-cell;*display:block;*position:relative;width:200px;height:200px;text-align:center;vertical-align:middle;}
#test p{*position:absolute;*top:50%;*left:50%;margin:0;}
#test p img{*position:relative;*top:-50%;*left:-50%;vertical-align:middle;}

    #test是img的祖父节点，p是img的父节点。Know More：未知尺寸的图片如何水平垂直居中

  13. 如何设置span的宽度和高度（即如何设置内联元素的宽高）？

    方法：

    span{display:block;width:200px;height:100px;}

    要使内联元素可以设置宽高，只需将其定义为块级或者内联块级元素即可。所以方法非常多样，既可以设置display属性，也可以设置float属性，或者position属性等等。

  14. 如何给一个元素定义多个不同的css规则？

    方法：

    .a{color:#f00;}
.b{background:#eee;}
.c{background:#ccc;}

<div class="a b">测试1</div>
<div class="a c">测试2</div>

    多个规则之间使用空格分开，并且只有class能同时使用多个规则，id不可以

  15. 如何让某个元素充满整个页面？

    方法：

    html,body{height:100%;margin:0;}
#test{height:100%;}

  16. 如何让某个元素距离窗口上右下左4边各10像素？

    方法：

    html,body{height:100%;margin:0;}
html{_padding:10px;}
#test{position:absolute;top:10px;right:10px;bottom:10px;left:10px;_position:static;_height:100%;}

  17. 如何去掉超链接的虚线框？

    方法：

    a{outline:none;}

    IE7及更早浏览器由于不支持outline属性，需要通过js的blur()方法来实现，如<a onfocus="this.blur();"...

  18. 如何容器透明，内容不透明？

    方法1：

    .outer{width:200px;height:200px;background:#000;filter:alpha(opacity=20);opacity:.2;}
.inner{width:200px;height:200px;margin-top:-200px;}

<div class="outer"><!--我是透明的容器--></div>
<div class="inner">我是不透明的内容</div>

    原理是容器层与内容层并级，容器层设置透明度，内容层通过负margin或者position绝对定位等方式覆盖到容器层上

    方法2：

    .outer{width:200px;height:200px;background:rgba(0,0,0,.2);background:#000\9;filter:alpha(opacity=20)\9;}
.outer .inner{position:relative\9;}

<div class="outer">
    <div class="inner">我是不透明的内容</div>
</div>

    高级浏览器直接使用rgba颜色值实现；IE浏览器在定义容器透明的同时，让子节点相对定位，也可达到效果

  19. 如何让整个页面水平居中？

    方法：

    body{text-align:center;}
#test2{width:960px;margin:0 auto;text-align:left;}

    定义body的text-align值为center将使得IE5.5也能实现居中

  20. 为什么容器的背景色没显示出来？为什么容器无法自适应内容高度？

    方法：

    清除浮动，方法请参考本页第9条

    通常出现这样的情况都是由于没有清除浮动而引起的，所以Debug时应第一时间想到是否有未清除浮动的地方

  21. 如何做1像素细边框的table？

    方法1：

    #test{border-collapse:collapse;border:1px solid #ddd;}
#test th,#test td{border:1px solid #ddd;}

<table id="test">
    <tr><th>姓名</th><td>Joy Du</td></tr>
    <tr><th>年龄</th><td>26</td></tr>
</table>

    方法2：

    #test{border-spacing:1px;background:#ddd;}
#test tr{background:#fff;}

<table id="test" cellspacing="1">
    <tr><th>姓名</th><td>Joy Du</td></tr>
    <tr><th>年龄</th><td>26</td></tr>
</table>

    IE7及更早浏览器不支持border-spacing属性，但是可以通过table的标签属性cellspacing来替代。

  22. 如何使页面文本行距始终保持为n倍字体大小的基调？

    方法：

    body{line-height:n;}

    注意，不要给n加单位。Know More：如何使页面文本行距始终保持为n倍字体大小的基调

  23. 标准模式Standard mode和怪异模式Quirks mode下的盒模型区别？

    方法：

    标准模式下：Element width = width + padding + border
怪异模式下：Element width = width

    相关资料请参阅CSS3属性box-sizing

  24. 以图换字的几种方法及优劣分析

    思路1：使用text-indent的负值，将内容移出容器

    .test1{width:200px;height:50px;text-indent:-9999px;background:#eee url(*.png) no-repeat;}

<div class="test">以图换字之内容负缩进法</div>

    该方法优点在于结构简洁，不理想的地方：1.由于使用场景不同，负缩进的值可能会不一样，不易抽象成公用样式；2.当该元素为链接时，在非IE下虚线框将变得不完整；3.如果该元素被定义为内联级或者内联块级，不同浏览器下会有较多的差异

    思路2：使用display:none或visibility:hidden将内容隐藏；

    .test{width:200px;height:50px;background:#eee url(*.png) no-repeat;}
.test span{visibility:hidden;/* 或者display:none */}

<div class="test"><span>以图换字之内容隐藏法</span></div>

    该方法优点在于兼容性强并且容易抽象成公用样式，缺点在于结构较复杂

    思路3：使用padding或者line-height将内容挤出容器之外；

    .test{overflow:hidden;width:200px;height:0;padding-top:50px;background:#eee url(*.png) no-repeat;}
.test{overflow:hidden;width:200px;height:50px;line-height:50;background:#eee url(*.jpg) no-repeat;}

<div class="test">以图换字之内容排挤法</div>

    该方法优点在于结构简洁，缺点在于：1.由于使用场景不同，padding或line-height的值可能会不一样，不易抽象成公用样式；2.要兼容IE5.5及更早浏览器还得hack

    思路4：使用超小字体和文本全透明法；

    .test{overflow:hidden;width:200px;height:50px;font-size:0;line-height:0;color:rgba(0,0,0,0);background:#eee url(*.png) no-repeat;}

<div class="test">以图换字之超小字体+文本全透明法</div>

    该方法结构简单易用，推荐使用

  25. 为什么2个相邻div的margin只有1个生效？

    方法：

    .box1{margin:10px 0;}
.box2{margin:20px 0;}

<div class="box1">box1</div>
<div class="box2">box2</div>

    本例中box1的底部margin为10px，box2的顶部margin为20px，但表现在页面上2者之间的间隔为20px，而不是预想中的10+20px=30px，结果是选择2者之间最大的那个margin，我们把这种机制称之为“外边距合并”；外边距合并不仅仅出现在相邻的元素间，父子间同样会出现。

    简单列举几点注意事项:
      外边距合并只出现在块级元素上；
      浮动元素不会和相邻的元素产生外边距合并；
      绝对定位元素不会和相邻的元素产生外边距合并；
      内联块级元素间不会产生外边距合并；
      根元素间不会不会产生外边距合并（如html与body间）；
      设置了属性overflow且值不为visible的块级元素不会与它的子元素发生外边距合并；

  26. 如何在文本框中禁用中文输入法？

    方法：

    input,textarea{ime-mode:disabled;}

    ime-mode为非标准属性，写该文档时只有IE和Firefox支持

  27. 如何解决列表中list-style-image不能精准定位的问题？

    方法：

    不使用list-style-image来定义列表项目标记符号，而用background-image来代替，并通过background-position来进行定位

  28. 如何解决伪对象:before和:after在input标签上的怪异表现的问题？

    现象：

    在编写本条目时，除了Opera，在所有浏览器下input标签使用伪对象:before和:after都没有效果，即使Opera的表现也同样令人诧异。大家可以试玩一下。浏览器版本：IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51

  29. 如何解决伪对象:before和:after无法在Chrome,Safari,Opera上定义过渡和动画的问题？

    现象：

    在编写本条目时，除了Firefox，在所有浏览器下伪对象:before和:after无法定义过渡和动画效果。浏览器版本：IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51。如果这个过渡或动画效果是必须，可以考虑使用真实对象。

待续及修订。。。


Other Skill And Experience

  • 其它技巧和经验集合

其它技巧和经验列表（以下实例默认运行环境都为Standard mode）：

  1. 如何让层在falsh上显示？

    方法：

    <param name="wmode" value="transparent" />

    设置flash的wmode值为transparent或opaque

  2. 如何使用标准的方法在页面上插入flash？

    方法：

    <object id="flash-show" type="application/x-shockwave-flash" data="*.swf">
    <param name="movie" value="*.swf" />
    <param name="wmode" value="transparent" />
    <img src="*.jpg" alt="用于不支持flash或屏蔽flash时显示" />
</object>

    至于flash的宽高可以在css里设置

  3. 如何在点文字时也选中复选框或单选框？

    方法1：

    <input type="checkbox" id="chk1" name="chk" /><label for="chk1">选项一</label>
<input type="checkbox" id="chk2" name="chk" /><label for="chk2">选项二</label>

<input type="radio" id="rad1" name="rad" /><label for="rad1">选项一</label>
<input type="radio" id="rad2" name="rad" /><label for="rad2">选项二</label>

    该方式所有主流浏览器都支持

    方法2：

    <label><input type="checkbox" name="chk" />选项一</label>
<label><input type="checkbox" name="chk" />选项二</label>

<label><input type="radio" name="rad" />选项一</label>
<label><input type="radio" name="rad" />选项二</label>

    该方式相比方法1更简洁，但IE6及更早浏览器不支持

  4. IE下如何对Standard Mode与Quirks Mode进行切换？

    IE6的触发（在DTD申明前加上XML申明）：

    <?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>

    IE5.5及更早浏览器版本直接以Quirks Mode解析。

    所有IE版本的触发（在DTD申明前加上HTML注释）：

    <!-- Let IE into quirks mode -->
<!DOCTYPE html>

    当没有DTD声明时，所有IE版本也会进入Quirks Mode。

  5. 如何区别display:none与visibility:hidden？

    方法：

    相同的是display:none与visibility:hidden都可以用来隐藏某个元素； 不同的是display:none在隐藏元素的时候，将其占位空间也去掉；而visibility:hidden只是隐藏了内容而已，其占位空间仍然保留。

  6. 如何设置IE下的iframe背景透明？

    方法：

    设置iframe元素的标签属性allowtransparency="allowtransparency"然后设置iframe内部页面的body背景色为transparent。 不过由此会引发IE下一些其它问题，如：设置透明后的iframe将不能遮住select

待续及修订。。。


404

你懂的


1.:focus + selector {} 选择器失效，影响版本ie8，http://haslayout.net/css/Ignored--focus-Bug，
解决方法：在失效选择器后面添加一个空选择器 :focus{}

3.ie7的坏的:hover 绝对定位bug，影响版本ie7, 当子元素设置了absolute并且通过设置left top 等来通过:hover时改变其显示位置时将会不起作用，如果他们不在父元素的可视范围内，http://haslayout.net/css/ie7-broken-hover-absolute-bug
解决方法是给其加上margin-left:0%;

4.当:active时Button背景偏移，影响版本ie8，给button设置:active时背景会做偏移，可以通过设置:active时的 -ms-background-position-x和-ms-background-position-y来改变这个偏移。

5.:hover边框消失bug，影响版本ie8, 当设置了outline的元素后，再设置:hover的时候，如果设置边框的话，将会不显示

8.position:absolute元素中，a{ display:block}, 在非:hover时只有文本可点击

A:http://haslayout.net/css/Partial-Click-Bug，影响版本ie6，解决方法：设置layout

B:http://haslayout.net/css/Partial-Click-Bug-v2，影响版本ie6/7，解决方法：给a添加background, 如果背景透明，使用background:url('任何页面中已经缓存的文件链接')；不推荐backgroundurl(#)[官方的解决方法]，因为会增加一下HTTP请求

9.文档滚动bug，影响版本ie6/ie7，不在html标签上设置overflow或许会影响到body上面的overflow
具体请看  http://haslayout.net/css/Document-Scrollbars-Overflow-Inconsistency
解决方法：html{ overflow:visible;} body{ overflow:hidden;}

10.* html bug，影响版本ie6，* html [selector]在ie6下通常不会被忽略，这个bug通常被用来作ie6的hack使用。

12.给两个浮动元素的某中一个的文字设定为斜体，另一个元素下拉在有斜体文字元素的下面，影响版本ie6，http://haslayout.net/css/Italics-Float-Bug
解决方法：给有斜体文字的元素添加overflow:hidden

13.不正确的浮动伸展布局，影响版本ie6/ie7，连续浮动的元素并且设置clear属性没法自动伸展
demo http://haslayout.net/demos/Incorrect-Float-Shrink-Wrap-Bug-Demo.html
fix demo  http://haslayout.net/demos/Incorrect-Float-Shrink-Wrap-Bug-Fixed-Demo.html
解决方法：给连续浮动元素加一个span然后设置display:inline-block和display:block

14.连续浮动元素bug，影响版本ie6/ie7，http://haslayout.net/css/Float-Squeeze-Weird-Gap-Bug

15.连续浮动字符出现重复字符，影响版本ie6/ie7, http://haslayout.net/css/Float-Squeeze-Duplicate-Last-Character-Bug
这个和14的解决方案都差不多，14是通过加一个宽度，而这个是通过给浮动字符加一个position:relative;

16.空元素高度bug，影响版本ie6/ie7，有layout的空元素获得了高度
http://haslayout.net/css/Empty-Element-Height-Bug

<div></div>
div {
background: blue;
width:100%; /* to give "layout"  */
}
解决办法：
div {
height: 0;
overflow: hidden;
}

17.ie7的1px dotted 边框变成dashed边框的bug,影响版本ie7, 当设置了1px dotted边框后，有一个边框的宽度大于1px 的话其它为1px边框会变为dashed的样式，具体请看http://haslayout.net/css/ie7-1px-Dotted-Border-Appears-As-Dashed-Bug

19.th没有继承text-align属性的bug，影响版本ie8，当给table设置text-align时，th没有继承样式，http://haslayout.net/css/non-inherited-th-text-align-bug
解决方法:给th设置text-align:inherit;来解决ie8下这个丑陋的bug。

20.text-align bug, 影响版本ie6/7, 当容器外面设置了text-align，如果容器里面有文本和其他block的元素, block的元素也会继承text-align，这是不正确的，http://haslayout.net/css/Text-Align-Bug
解决方法是重新写出合理的有语义的markup，如文本外面加一个p.

21.32个style限制，影响版本ie6/7/8, 在32个"style"方法(style, link, @import)后浏览器会忽略后面的样式

22.浮动元素的阶梯bug, 影响版本ie6/7, 当给一系列<li>里面的浮动元素设置font-size后会出现阶梯效果，http://haslayout.net/css/staircase-bug
解决方案是给li设置display:inline;

23.浮动图片list标记错位bug，影响版本ie8, 当list里面有浮动的image时，list标记显示的位置跑在里面了，http://haslayout.net/css/Image-Float-Bullet-Chaos-Bug
解决方法:用背景图片代替list自带的标记

24.dt, dd, li背景消失bug, 影响版本ie6, 当给浮动的div里面的dt, dd, dl设置背景时不显示，http://haslayout.net/css/disappearing-list-background-bug
解决方案是给dt, dd, dl加上position:relative;

25.li内元素偏离 baseline 向下拉，影响版本ie8, 当给list里面的元素设置display和overflow属性后list标记会偏移，http://haslayout.net/css/list-drop-shift-bug
解决方法是给里面的元素加一个float:right; width:100% 或给li设置display:inline

26.ol数字标记不自增, 影响版本ie6/7, 当给li设置宽度时会触发这个bug，解决方法是给li设置display:list-item

27.ul/ol标记消失bug, 影响版本ie6/7, 当ul/ol触发了layout并且有margin-left会触发这个bug，http://haslayout.net/css/No-Bullets-on--ul--and--ol--Bug
解决方案是给li设置margin-left（不要加在ul/ol上）

28.图片不垂直居中，影响版本ie6/7, 当使用line-height来居中图片时在ie6/7下不会生效，http://haslayout.net/css/No-line-height-Vertical-Center-on-Images-Bug
解决方法是在img后加一个有layout的空白元素如<span></span>

29.图片label bug，影响版本ie6/ie7/ie8，当label中有img的时候无法触发点击选中form元素事件.
demo http://haslayout.net/demos/Image-Label-Focus-Bug-Demo.html
fix demo http://haslayout.net/demos/Image-Label-Focus-Bug-Fixed-Demo-CMS.html
解决方案：通过给<label>内加入一个空的span标签，然后设置 position:absolute；background:url(#); 设置label float:left; position:relative;overflow:hidden;就可以解决了

30.使用filter处理的透明背景图片的透明部分不可点bug, 影响版本ie6/7/8，当给一个display:block元素使用filter来支持png透明的时候，透明区域无法点击，http://haslayout.net/css/no-transparency-click-bug
解决方法是不要使用 background:none;filter…，而是background:url(#);filter…

31.白色背景hover bug，影响版本ie7, 给hover设置background-color:#ffffff;时，背景不会改变，http://haslayout.net/css/hover-white-background-ignore-bug
解决方法是设置background:#ffffff;

32.png图片和背景颜色不一致，影响版本ie6/7/8, 设置背景颜色和png图片背景同样的颜色代码最后表现不一致，http://haslayout.net/css/PNG-Image-and-Background-Color-Mismatch
原来是因为ie支持"PNG Gamma profiles"，解决方案是通过一个pngcrush程序来优化图片。

33.没有背景图片bug, 影响版本ie6/7/8, 当使用background的时候如果在url()后没有加空格背景图片就不会显示。

34.背景溢出,拖动滚动条后显示正常 bug, 影响版本ie6, 一个容器里面有浮动元素并且通过加一个clear:both的额外div来清除浮动会产生此bug，http://haslayout.net/css/Leaking-Background-Bug
解决方案就是建议尽量不要通过增加一个 clear:both的div来清除浮动，可以通过在外层加上overflow:hidden;对于ie可以通过加上zoom:1；来触发ie的 layout

35.自定义鼠标bug, 影响版本ie6/7/8, 当自定义鼠标样式的时候，如果url()里面的路径是相对路径的话，ie会认为相对于当前文档而不会出现鼠标样式的图片，http://haslayout.net/css/Custom-Cursor-Bug
解决方法是采用绝对路径。

39.noscript样式bug, 影响版本ie6/7/8, 当js可用的时候如果给noscript设置border和背景都可以显示，http://haslayout.net/css/noscript-ghost-bug
解决方法就是通过给noscript设置display:none;

40.百分比padding垂直margin bug，影响版本ie8,当父元素设置了百分比的padding，子元素有垂直的margin的时候，就好像父元素被设置了margin一样，解决方法是给父元素加一个overflow:hidden/auto

41.auto margin居中bug, 影响版本ie6/7/8, 给block元素设置margin auto无法居中，http://haslayout.net/css/no-auto-margin-center-pseudo-bug
出现这种bug的原因通常是没有Doctype，然后触发了ie的quirks mode，加上<!DOCTYPE html>就可以了。

42.表单元素双margin bug,影响版本ie6/ie7,input和textarea或许会继承父元素的水平的margin
具体请看 http://haslayout.net/css/Form-Control-Double-Margin-Bug

44.负margin bug, 影响版本ie6/7, 当给一个有layout容器里面的元素设置负marin时内容会被截断，http://haslayout.net/css/Negative-Margin-Bug
解决方法是不让容器有layout或者给负marin的元素layout并设置 position:relative;

45.设置margin auto的button没有居中，影响版本ie8，ie8下如果给像button这样的标签（如button, input[type="button"], input[type="submit"]）设置{ display:block; margin-left:auto; margin-right:auto; }如果不设置宽度的话无法居中。
demo http://haslayout.net/demos/No-Auto-Margin-Center-on-Buttons-Inconsistency-Fixed-Demo-CS.html
解决方案：可以给button加上宽度

46.ie6下li里有hover行为时li高度会增大。解决方法：重设li的padding-top为0或不要让li拥有layout。

47.在IE6中，只有当文字和img、input、textarea、select、object等对象在同一个容器中的时候，line-height属性在这些非文字的对象中就会失效。
解决方法：设置非文字的对象的样式：
_margin: (容器的line-height – 对象本身的高度)/2px 0;
vertical-align:middle;

49.IE6浏览器中，图标和文字不能垂直居中，解决方法：对包含文字的标签设置layout。


1. 每个属性给出w3c相关参考地址
2. 未写完的属性
3. 在“支持版本”那一列，在勾或叉上加一个链接[官方参考网址]来证实。

杜欢 2011/5/20 9:36:06
4. 你的这个参考手册还少一个东西，就是“搜索”，用户多数时候是打开来找答案的，他们希望快速找到要看的部分！ ^_^
杜欢 2011/5/20 9:57:22
6. JK加宽--北京(442520201)  9:55:23 AM
兼容性的那个，可以对IE分成几个版本。。。
另外，css属性值，也是分不同的浏览器支持的。没有写清楚。

7. JK加宽--北京(442520201)  10:01:58 AM
反馈功能不错。----不过最好反馈功能有个tag，从对应的页面点过来时，把tag带过来。
相当于从哪个页面点过来的，就反映什么问题，刚好作聚类。

8.(done) JK加宽--北京(442520201)  10:22:16 AM
有的浏览器下叫css float...

9. 示例打不开js报错

10. 在各大群及个站、下载站及论坛宣传

11. 下载量及访问量记录

12. IE9测试 （对参数值的支持下阶段做）

13. (done) 媒体查询表达式种类

14. (done) CSS hack：if条件Hack\属性级Hack\选择符级Hack

15. (done) BUG问题及经验

16. (done) 属性排错：float脚本特性、

17. (done) 手册阅读及使用指引

18. 各栏目下的链接问题

参数值支持列表完善

CSS2.1未完成属性：
azimuth
elevation
'cue-after'
'cue-before'
'cue'
'orphans'
'pause-after'
'pause-before'
'pause'
'pitch-range'
'pitch'
'play-during'
'richness'
'speak-header'
'speak-numeral'
'speak-punctuation'
'speak'
'speech-rate'
'stress'
'voice-family'
'volume'
'widows'

CSS3未完属性：

IE9?
:only-child
:not()

鼠标经过css3标识，浮现TIPS提示是CSS3属性还是新增属性值


Browsers Listing

  • 提交问题

说明：本文档兼容性测试基础环境为：windows系统；IE6-IE10, Firefox9.0, Chrome16.0, Safari5.1, Opera11.60


CSS参考手册v3.4.0_web前端开发参考手册系列

CSS参考手册

web前端开发参考手册系列

  • 当前版本：v3.4.0
  • 下载最新chm版
  • 在线资源
    • CSS探索之旅
    • web前端实验室
    • CSS参考手册web版
  • 关于
    • 关于飘零雾雨
    • 微博
    • 邮箱
  • 捐赠
  • CSS(Contain CSS3)
    • 速查总表 Quick Search
    • CSS3速查表 CSS3 List
    • 简介 Introduction
      • 关于本手册 About This Handbook
      • 关于样式表 Introduction To CSS
      • 关于作者 About Me
      • 阅读及使用指引 The Use Guides
      • 鸣谢 Thanks
      • 捐赠 Contribute
    • 属性 Properties
      • 定位(Positioning)
        • position
        • z-index
        • top
        • right
        • bottom
        • left
      • 布局(Layout)
        • display
        • float
        • clear
        • visibility
        • clip
        • overflow
        • overflow-x
        • overflow-y
      • 弹性盒模型(Flexible Box)
        • box-orient
        • box-pack
        • box-align
        • box-flex
        • box-flex-group
        • box-ordinal-group
        • box-direction
        • box-lines
      • 尺寸(Dimension)
        • width
        • min-width
        • max-width
        • height
        • min-height
        • max-height
      • 外补白(Margin)
        • margin
        • margin-top
        • margin-right
        • margin-bottom
        • margin-left
      • 内补白(Padding)
        • padding
        • padding-top
        • padding-right
        • padding-bottom
        • padding-left
      • 边框(Border)
        • border
        • border-width
        • border-style
        • border-color
        • border-top
        • border-top-width
        • border-top-style
        • border-top-color
        • border-right
        • border-right-width
        • border-right-style
        • border-right-color
        • border-bottom
        • border-bottom-width
        • border-bottom-style
        • border-bottom-color
        • border-left
        • border-left-width
        • border-left-style
        • border-left-color
        • border-image
        • border-radius
        • border-top-left-radius
        • border-top-right-radius
        • border-bottom-right-radius
        • border-bottom-left-radius
        • box-shadow
        • box-reflect
      • 背景(Background)
        • background
        • background-color
        • background-image
        • background-repeat
        • background-attachment
        • background-position
        • background-origin
        • background-clip
        • background-size
        • Multiple background
      • 颜色(Color)
        • color
        • opacity
      • 字体(Font)
        • font
        • font-style
        • font-variant
        • font-weight
        • font-size
        • font-family
        • font-stretch
      • 文本(Text)
        • text-indent
        • text-overflow
        • text-align
        • text-transform
        • text-decoration
        • text-decoration-line
        • text-decoration-color
        • text-decoration-style
        • text-shadow
        • text-fill-color
        • text-stroke
        • text-stroke-width
        • text-stroke-color
        • letter-spacing
        • word-spacing
        • vertical-align
        • word-wrap
        • white-space
        • direction
        • unicode-bidi
        • line-height
        • tab-size
      • 列表(List)
        • list-style
        • list-style-image
        • list-style-position
        • list-style-type
      • 表格(Table)
        • table-layout
        • border-collapse
        • border-spacing
        • caption-side
        • empty-cells
      • 内容(Content)
        • content
        • counter-increment
        • counter-reset
        • quotes
      • 用户界面(User Interface)
        • outline
        • outline-width
        • outline-color
        • outline-style
        • outline-offset
        • nav-index
        • nav-up
        • nav-right
        • nav-down
        • nav-left
        • cursor
        • zoom
        • box-sizing
        • resize
        • ime-mode
      • 多栏(Multi-column)
        • columns
        • column-width
        • column-count
        • column-gap
        • column-rule
        • column-rule-width
        • column-rule-style
        • column-rule-color
        • column-span
        • column-fill
        • column-break-before
        • column-break-after
        • column-break-inside
      • 2D变换(2D Transform)
        • transform
        • transform-origin
      • 过渡(Transition)
        • transition
        • transition-property
        • transition-duration
        • transition-timing-function
        • transition-delay
      • 动画(Animation)
        • animation
        • animation-name
        • animation-duration
        • animation-timing-function
        • animation-delay
        • animation-iteration-count
        • animation-direction
        • animation-play-state
        • animation-fill-mode
      • 打印(Printing)
        • page
        • page-break-before
        • page-break-after
        • page-break-inside
      • 媒体查询(Media Queries)
        • width
        • height
        • device-width
        • device-height
        • orientation
        • aspect-ratio
        • device-aspect-ratio
        • color
        • color-index
        • monochrome
        • resolution
        • scan
        • grid
      • Only IE
        • scrollbar-3dlight-color
        • scrollbar-darkshadow-color
        • scrollbar-highlight-color
        • scrollbar-shadow-color
        • scrollbar-arrow-color
        • scrollbar-face-color
        • scrollbar-track-color
        • scrollbar-base-color
        • filter
        • behavior
      • Only Firefox
        • border-colors
        • border-top-colors
        • border-right-colors
        • border-bottom-colors
        • border-left-colors
    • 选择符 Selectors
      • 元素选择符
        • 通配选择符(*)
        • 类型选择符(E)
        • ID选择符(E#id)
        • 类选择符(E.class)
      • 关系选择符
        • 包含选择符(E F)
        • 子选择符(E>F)
        • 相邻选择符(E+F)
        • 兄弟选择符(E~F)
      • 属性选择符
        • E[att]
        • E[att="val"]
        • E[att~="val"]
        • E[att^="val"]
        • E[att$="val"]
        • E[att*="val"]
        • E[att|="val"]
      • 伪类选择符
        • E:link
        • E:visited
        • E:hover
        • E:active
        • E:focus
        • E:lang()
        • E:not()
        • E:root
        • E:first-child
        • E:last-child
        • E:only-child
        • E:nth-child(n)
        • E:nth-last-child(n)
        • E:first-of-type
        • E:last-of-type
        • E:only-of-type
        • E:nth-of-type(n)
        • E:nth-last-of-type(n)
        • E:empty
        • E:checked
        • E:enabled
        • E:disabled
        • E:target
        • @page:first
        • @page:left
        • @page:right
      • 伪对象选择符
        • E:first-letter/E::first-letter
        • E:first-line/E::first-line
        • E:before/E::before
        • E:after/E::after
        • E::selection
    • 语法与规则 Rules
      • !important
      • /*comment*/
      • @import
      • @charset
      • @media
      • @font-face
      • @page
      • @keyframes
    • 取值 Values
      • 颜色(Color)
        • Color Name
        • HEX
        • RGB
        • RGBA
        • HSL
        • HSLA
        • transparent
      • 文本(Textual)
        • <string>
        • <url>
        • <identifier>
      • 函数(Functional)
        • counter()
        • attr()
        • calc()
        • min()
        • max()
        • cycle()
      • 图像(Image)
        • linear-gradient()
        • radial-gradient()
        • repeating-linear-gradient()
        • repeating-radial-gradient()
      • 数字(Numeric)
        • <number>
        • <integer>
      • 其它(Other)
        • <length>
        • <percentage>
        • <angle>
        • <time>
        • <frequency>
        • <fraction>
        • <grid>
    • 单位 Units
      • 长度(Length)
        • em
        • ex
        • ch
        • rem
        • vw
        • vh
        • vm
        • cm
        • mm
        • in
        • pt
        • pc
        • px
      • 角度(Angle)
        • deg
        • grad
        • rad
        • turn
      • 时间(Time)
        • s
        • ms
      • 频率(Frequency)
        • Hz
        • KHz
      • 布局(Layout-specific)
        • fr
        • gr
    • 附录 Appendix
      • 颜色关键字(Color Keywords)
      • 媒体类型(Media Types)
    • CSS Hack
      • 条件Hack
      • 属性级Hack
      • 选择符级Hack
    • 问题和经验
      • Bugs和解决方案
      • 技巧和经验
      • 其它经验

© Copyright Doyoe 2006-2012

为CSS参考手册捐赠您的一份力量

贡献

×

  • 支付宝：dooyoe@gmail.com
  • 财付通：104589226
  • 姓　名：杜瑶
  • 备　注：捐赠金额不限

支持开源，CSS参考手册因你而更精彩！

Because Of You

CSS参考手册»


5. IE6下绝对定位的容器内文本无法正常选择的问题

28

26、如何使得表格的宽度固定?

设置table为table-layout:fixed;这时表格将使用固定布局算法，多出的内容将不影响表格的宽度

29、如何实现ie6下的position:fixed?

参阅：http://blog.doyoe.com/article.asp?id=188

34


blueidea

5. IE6下绝对定位的容器内文本无法正常选择的问题 blueidea
web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全
提示：您可以先修改部分代码再运行 复制内容到剪贴板 代码: 上面的问题在IE6、7中存在，解决问题的办法是让IE进入到quirks mode。关于quirks mode的相关知识，请参考：http://www.microsoft.com/china/msdn/library/webservices/asp.net/ASPNETusStan.mspx?mfr=true aoao:在IE6版本是6.0.2900.2180.xpsp_sp2.gdr.070227-2254好像依然存在问题，加了背景色依然无效。接着测试中。。。


To Be Continue...


CSS参考手册v3.4.0需求及v3.3.0错误和Bug列表

  • CSS参考手册
CSS参考手册v3.4.0发布前的意见和反馈收集

需求、错误和Bug列表：

  • aoao

    原文：像 -x-x-device-pixel-ratio 之类的是否参考加入？ 基本上就差成文了；

  • 愚人码头

    原文：还有chrome刚出的-webkit-filter；

  • 呂康豪 v3.4.0已采纳

    原文：友情錯誤回報，<length> 裡不應該有 %；

  • 多明哥

    原文：捐助可以借助淘宝的平台，同时可以制作电子版给捐助的用户，这样不但得到资金，同样给捐助用户实惠。

  • wyysf123 v3.4.0已采纳

    原文：我看到一点问题，在这里提交给你“兄弟选择符 (E~F)版本：CSS3 ”说明： 选择E元素所有兄弟元素F。应该是E元素后面的所有同级元素F；

  • 呂康豪 v3.4.0已采纳（新开了Only Firefox节点）

    原文：繼續回報：CSS3 沒有 border-color*s* 這些東西，這應該是 Firefox 專有屬性；

  • 裕波

    原文：哈哈，我还有一些HTML5的T恤和以前出版社赞助的书，如果 @doyoe 觉得意见可行，我可以以w3ctech的身份送出一些礼品；

  • caikan v3.4.0已采纳（增加提示信息：下载后chm版本无法查看请参考xxx）

    原文：或者你把chm打个包吧，这样大家下载后再解压就不会有锁定的效果了；

    原文：我测试了一下，浏览器默认下载的zip也会有锁定效果，winxp自带的zip解压功能解压出来的exe和chm也会继承锁定效果。不过用迅雷下载或者WinRAR解压没则这个问题。要不还是在下载链接旁加个提示“下载后无法打开请看这里”？

  • 头_王

    原文：很不错，强烈支持。最好能加上某些标准属性在其他浏览器上的实现方法就更好了；

  • 愚人码头 v3.4.0已采纳

    原文：建议：CSS参考手册的css3部分能不能单独的有个索引列表，方便css学习者查找；

  • FlashSoft

    概要：-webkit-mask相关参考；

CSS参考手册v3.4.0版本将会积极考虑采纳上述童鞋们的建议，如该版本未加上的将自动作为下个版本的采纳范畴。有了你们，手册才会更好！


3D Transform index

CSS参考手册 » 属性列表 » 3D变换属性
其它3D变换属性 选择其它项
  • 3D transform
  • 3D transform-origin

CSS 3D Transform Properties

  • 3D变换属性

3D变换 3D Transform

Properties 属性 | CSS Version 版本 | Inherit From Parent 继承性 | Description 简介
3D transform | CSS3 | 无 | 检索或设置对象的变换
3D transform-origin | CSS3 | 无 | 检索或设置对象中的变换所参照的原点

这种颜色 的链接表示是CSS3属性或原属性被CSS3修改并增加了新的属性值


3D transform-origin

  • 版本：CSS3
  • 继承性：无

语法：

transform-origin：[ [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] <length> ] | [ [ [ left | center | right ] || [ top | center | bottom ] ] <length> ]

默认值：50% 50% 0

取值：

<percentage>：
用百分比指定坐标值。可以为负值。
<length>：
用长度值指定坐标值。可以为负值。
left：
指定原点的横坐标为left
center①：
指定原点的横坐标为center
right：
指定原点的横坐标为right
top：
指定原点的纵坐标为top
center②：
指定原点的纵坐标为center
bottom：
指定原点的纵坐标为bottom

说明：

设置或检索对象以某个原点进行转换。
  • 该属性提供2个参数值。
  • 如果提供两个，第一个用于横坐标，第二个用于纵坐标。
  • 如果只提供一个，该值将用于横坐标；纵坐标将默认为50%。
  • 对应的脚本特性为transformOrigin。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera
版本 | 6.0-8.0 | 4.0-9.0 | 5.1 | 13.0-16.0 | 11.50-11.60
版本 | 9.0-10.0

写法：

内核类型 | 写法
Webkit(Chrome/Safari) | -webkit-transform-origin
Gecko(Firefox) | -moz-transform-origin
Presto(Opera) | -o-transform-origin
Trident(IE) | -ms-transform-origin
W3C | transform-origin

示例：


Speech index

CSS Speech Properties

  • 语音属性

语音 Speech

Properties 属性 | CSS Version 版本 | Inherit From Parent 继承性 | Description 简介
voice-volume | CSS3 | 有 | 检索或设置音量
voice-balance | CSS3 | 有 | 检索或设置声音平衡
speakability | CSS3 | 有 | 检索或设置对象过渡的持续时间
speak | CSS3 | 有 | 检索或设置阅读类型
pause | CSS3 | 无 | 检索或设置暂停
pause-before | CSS3 | 无 | 检索或设置暂停前的效果
pause-after | CSS3 | 无 | 检索或设置暂停后的效果
rest | CSS3 | 无 | 检索或设置停止
rest-before | CSS3 | 无 | 检索或设置听之前的效果
rest-after | CSS3 | 无 | 检索或设置停止后的效果
cue | CSS3 | 无 | 检索或设置提示
cue-before | CSS3 | 无 | 检索或设置提示前的效果
cue-after | CSS3 | 无 | 检索或设置提示后的效果
voice-family | CSS3 | 有 | 检索或设置语言
voice-rate | CSS3 | 有 | 检索或设置比率
voice-pitch | CSS3 | 有 | 检索或设置音调
voice-pitch-range | CSS3 | 有 | 检索或设置音调范围
voice-stress | CSS3 | 有 | 检索或设置重音
voice-duration | CSS3 | 无 | 检索或设置声音延续时间
phonemes | CSS3 | 无 | 检索或设置音位

Copyright © 2006-2010 Doyoe. All Rights Reserved