CSS Properties Quick Search index

CSS3参考手册 » 速查表
相关内容：
速查表快速通道 选择其它项

Quick Search

  • 速查表

定位 Positioning

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

布局 Layout

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

尺寸 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-radius
  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius
  • box-shadow
  • border-image
  • border-image-source
  • border-image-slice
  • border-image-width
  • border-image-outset
  • border-image-repeat

背景 Background

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

颜色 Color

  • color
  • opacity

字体 Font

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

文本 Text

  • text-transform
  • white-space
  • tab-size
  • word-break
  • word-wrap
  • overflow-wrap
  • text-align
  • text-align-last
  • text-justify
  • word-spacing
  • letter-spacing
  • text-indent
  • vertical-align
  • line-height
  • text-size-adjust

文本装饰 Text Decoration

  • text-decoration
  • text-decoration-line
  • text-decoration-color
  • text-decoration-style
  • text-decoration-skip
  • text-underline-position
  • text-shadow

书写模式 Writing Modes

  • direction
  • unicode-bidi
  • writing-mode

列表 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

  • appearance
  • text-overflow
  • 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
  • user-select
  • pointer-events

多列 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

伸缩盒 Flexible Box(旧)

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

伸缩盒 Flexible Box(新)

  • flex
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex-flow
  • flex-direction
  • flex-wrap
  • align-content
  • align-items
  • align-self
  • justify-content
  • order

转换 Transform

  • transform
  • transform-origin
  • transform-style
  • perspective
  • perspective-origin
  • backface-visibility

过渡 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 Webkit

  • -webkit-text-fill-color
  • -webkit-text-stroke
  • -webkit-text-stroke-width
  • -webkit-text-stroke-color
  • -webkit-box-reflect
  • -webkit-tap-highlight-color
  • -webkit-user-drag
  • -webkit-overflow-scrolling

元素选择符 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(fr)
  • E:not(s)
  • 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::placeholder
  • E::selection

语法与规则 Rules and Syntax

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

长度值与单位 Length Data Types and Units

  • <length>
  • em
  • ex
  • ch
  • rem
  • vw
  • vh
  • vmax
  • vmin
  • cm
  • mm
  • q
  • in
  • pt
  • pc
  • px

角度值与单位 Angle Data Types and Units

  • <angle>
  • deg
  • grad
  • rad
  • turn

时间值与单位 Time Data Types and Units

  • <time>
  • s
  • ms

频率值与单位 Frequency Data Types and Units

  • <frequency>
  • Hz
  • kHz

特殊布局值与单位 Layout-specific Data Types and Units

  • <fraction>
  • <grid>
  • fr
  • gr

分辨率值与单位 Resolution Data Types and Units

  • <resolution>
  • dpi
  • dpcm
  • dppx

颜色值 Color Data Types

  • <color>
  • Color Name
  • HEX
  • RGB
  • RGBA
  • HSL
  • HSLA
  • transparent
  • currentColor

文本值 Textual Data Types

  • inherit
  • initial
  • unset
  • <string>
  • <url>
  • <identifier>

函数值 Functional Notations Data Types

  • calc()
  • toggle()

生成内容值 Content Notations Data Types

  • counter()
  • counters()
  • attr()

图像值 Image Data Types

  • <image>
  • image()
  • image-set()
  • <gradient>
  • linear-gradient()
  • radial-gradient()
  • repeating-linear-gradient()
  • repeating-radial-gradient()

数字值 Numeric Data Types

  • <number>
  • <integer>
  • <percentage>

附录 Appendix

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

常用CSS Hack

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

问题和经验

  • 参考资源列表
  • Bugs和解决方案
  • 技巧和经验
  • 其它经验

紫色 链接表示该属性在CSS3有修改或者增加了新的属性值；橙色 链接表示该属性是CSS3新增属性


CSS Manual Introducing

CSS3参考手册 » 简介
相关内容：
其它简介条目 选择其它项

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

CSS参考手册

版本：v4.2.4

最后更新时间：2017-3-7

编著：飘零雾雨

下载最新chm版

CSS参考手册在线版

CSS参考手册Github开源地址

我的微博：@doyoe

支持手册：捐赠


Change List

  • 更新历史

免责申明 Disclaimer

  • 由于本手册为持续间断更新，时间越长版本越多。现网络上已流传着各种版本的手册，而新版本可能会改正老版本中的错误和增加新的内容，请以本站CSS参考手册官网为准，因为官网在任何时候都是最新版本。
  • 另请转载本站内容的个人或者组织，保留本站的版权及相关链接信息，以备使用者可以据此找到官网并获取最新版本的手册。

版本信息 Version Information

  • CSS参考手册v4.2.4

    Update Time: 2017-03-10
    • 补充对兄弟选择符、相邻选择符等的描述和示例；
    • 移除了整个 only-firefox 目录下的属性；
    • 新增了-webkit-overflow-scrolling属性参考；
    • 修复在MAC上chm乱码的问题（感谢 @gucong3000 童鞋）；
    • 修订了热心用户所提的部分 Issues；
    • 补充了calc()兼容性描述；
    • 修复了导航栏出现横向滚动条的问题；
    • 将早期的历史版本变更合并记录，详见更新历史

  • CSS参考手册v4.2.3

    Update Time: 2016-09-01
    • 修订了热心用户所提的部分 Issues；
    • 修订对vertical-align取值的描述；
    • 修订对align-content兼容性表格中对 Firefox 的描述；

  • CSS参考手册v4.2.2

    Update Time: 2016-01-21
    • 关于作者页面新增了本手册的微信交流群二维码；
    • 修复animation类别下部分页面示例中的渐变语法问题；
    • 增加早期Chrome和Safari不支持border-radius取值为<percentage>的描述；
    • 修订对background-position取值为3或4个值时的描述；
    • 更新了Firefox对writing-mode的支持数据；
    • 新增了@supports规则；
    • 新增了unset取值；

  • CSS参考手册v4.2.0

    Update Time: 2015-08-14
    • 新增了text-size-adjust,tap-highlight-color,user-drag参考；
    • 修订了 Transform 模块，并新增了3D相关参考：transform-style,perspective, perspective-origin, backface-visibility；
    • 阅读指引中新增了 语法指引 用于帮助读者轻松看懂语法；
    • 修订了大部分模块的浏览器兼容性列表；

  • v4.1及更早版本发布记录

    • CSS参考手册v4.1.7 Update Time: 2015.3.9
    • CSS参考手册v4.1.6 Update Time: 2015.1.28
    • CSS参考手册v4.1.5 Update Time: 2014.8.28
    • CSS参考手册v4.1.4 Update Time: 2014.5.9
    • CSS参考手册v4.1.3 Update Time: 2014.1.10
    • CSS参考手册v4.1.2 Update Time: 2014.1.2
    • CSS参考手册v4.1.1 Update Time: 2013.11.25
    • CSS参考手册v4.1.0 Update Time: 2013.11.18
    • CSS参考手册v4.0.1 Update Time: 2013.1.8
    • CSS参考手册v4.0.0 Update Time: 2012.12.27

  • v3及更早版本发布记录

    • CSS参考手册v3.4.0 Update Time: 2012.2.28
    • CSS参考手册v3.3.0 Update Time: 2011.12.30
    • CSS参考手册v3.2.0 Update Time: 2011.11.20
    • CSS参考手册v3.1.0 Update Time: 2011.10.13
    • CSS参考手册v3.0.0 Update Time: 2011.9.16

  • v2及更早版本发布记录

    • CSS参考手册v2.1.1 Update Time: 2011.8.12
    • CSS参考手册v2.0.1 Update Time: 2011.7.2
    • CSS参考手册v1.3.2 Update Time: 2011.6.4
    • CSS参考手册v1.2.2 Update Time: 2011.5.21

  • 历史版本（未发布）

    • CSS参考手册v1.2.0 Update Time: 2011.3.17
    • CSS参考手册v1.1.0 Update Time: 2011.2.20
    • CSS参考手册v1.0.0 Update Time: 2011.1.22


About This CSS3 Handbook

相关内容：
其它简介条目 选择其它项

About This Handbook

  • CSS3参考手册简介

版权声明 Copyright

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

版本更新 Update

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

免责申明 Disclaimer

  • 由于本手册为持续间断更新，时间越长版本越多。现网络上已流传着各种版本的手册，而新版本可能会改正老版本中的错误和增加新的内容，请以本站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探索之旅
  • 微　博： @doyoe
  • GitHub： doyoe
  • 邮　箱： dooyoe@gmail.com

自述 Intro

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

履历 Vita

  • 去哪儿
  • 360
  • 华为
  • Yahoo
  • 太平洋网络科技

个人站点 My Website

飘雨社区
个人门户网站，暂无实质内容。
CSS探索之旅
我的个人Blog，想起就写点东西。
web前端实验室
随手扔一些平时的前端实验示例
CSS参考手册
包含CSS2及CSS3大部分内容。本手册的内容在一段时间内将持续更新，请密切关注本站并随时获取最新版本。
CSS缺陷手册
包含浏览器的BUG和解决方案以及作者自身经验的一些参考。本手册的内容在一段时间内将持续更新，请密切关注本站并随时获取最新版本。

微信交流群 wechat


The Use Guides Of CSS Manual

相关内容：
其它简介条目 选择其它项

The Use Guides

  • 阅读及使用指引

手册使用说明 The Instruction

  • 手册在接下来将只更新IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+（Opera从15.0开始转入webkit阵营）的支持数据，低于这些版本的数据将不再更新，共同期望未来前端的环境越来越好。
  • 关于本手册一些特定阅读方式的说明
  • 关于本手册存在的一些问题说明及解决方法

阅读指引 The Read Guides

  • 导航指引：

    • 左侧导航区域，橙色为CSS3新增，紫色为在CSS3中有变更（比如增加了新的属性值），黑色为CSS2.1及更早前，如下所示：

      • 橙色 = CSS3新增
      • 紫色 = 在CSS3中有变更
      • 黑色 = CSS2.1及更早

  • 语法指引：

    任何一种形态、关键字、群组后面都可以接下列修饰符中的其中一个：

    • * 代表出现0次或以上。
    • + 代表出现1次或以上。
    • ? 代表是可选的，即出现0次或1次。
    • {A} 代表出现A次。
    • {A,B} 代表出现 A 次以上 B 次以下，其中B可以省略为 {A,}，代表至少出现A次，无上限。
    • # 代表出现1次以上，以逗号隔开，可以选择后面跟大括号的形式，精确表示重复多少次，如<length>#{1,4}。
    • ! 代表出现产生一个值，即使组内的值都可以省略，但至少有一个值不能呗省略，如[ A? B? C? ]!。
    • 0个或更多 | A? B? C? | A? || B? || C?
      1个或更多 | [ A? B? C? ]! | A || B || C
      1个 | A | B | C
      所有 | A B C | A && B && C

  • 兼容性：

    • 手册在所有参考页的头部和底部都有对浏览器兼容性测试基础环境的说明。
    • 兼容性试图将会慢慢全部改成如下表：
      • 浅绿 = 支持
      • 红色 = 不支持
      • 粉色 = 部分支持
      Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
      Basic Support | 6.0-10.0 | 2.0-21.0 | 4.0-20.0 | 6.0 | 15.0+-webkit- | 6.0-6.1 | 2.1-4.3 | 18.0-19.0
      11.0+ | 22.0+ | 21.0+-webkit- | 6.1+-webkit- | 17.0+ | 7.0+-webkit- | 4.4+ | 20.0+-webkit-
      29.0+ | 9.0+ | 9.0+ | 28.0+
      假设上述表格是对属性order的兼容性说明，那表示：

      IE6.0-10.0不支持该属性，11.0及以后支持该属性；

      Firefox2.0-21.0不支持该属性，22.0及以后支持该属性；

      Chrome4.0-20.0不支持该属性，21.0及以后支持该属性但需加厂商前缀 -webkit-，29.0开始支持不带厂商前缀的标准写法；

  • 脚本特性：

    • 每个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(风之石)
  • JK
  • johnhax
  • FlashSoft
  • 修远兮
  • KennyLuck
  • 钱宝坤
  • 周裕波
  • 愚人码头
  • aoao
  • 徐德明
  • 一丝
  • gucong3000

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

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


Thank You For The Contribute Of CSS Manual

相关内容：
其它简介条目 选择其它项

Contribute

  • 捐赠

贡献 Contribute

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

Payment 支付方式 | Account 账户
支付宝 | dooyoe@gmail.com
二维码 - 支付宝 | 支付宝扫码支付
二维码 - 微信 | 微信扫码支付
姓 名 | 杜瑶
备 注 | 捐赠金额不限

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


Properties index

CSS3参考手册 » 属性列表
相关内容：
其它属性参考 选择其它项

CSS Properties Reference

  • CSS属性集合

定位 Positioning

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

布局 Layout

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

尺寸 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-radius
  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius
  • box-shadow
  • border-image
  • border-image-source
  • border-image-slice
  • border-image-width
  • border-image-outset
  • border-image-repeat

背景 Background

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

颜色 Color

  • color
  • opacity

字体 Font

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

文本 Text

  • text-transform
  • white-space
  • tab-size
  • word-break
  • word-wrap
  • overflow-wrap
  • text-align
  • text-align-last
  • text-justify
  • word-spacing
  • letter-spacing
  • text-indent
  • vertical-align
  • line-height
  • text-size-adjust

文本装饰 Text Decoration

  • text-decoration
  • text-decoration-line
  • text-decoration-color
  • text-decoration-style
  • text-decoration-skip
  • text-underline-position
  • text-shadow

书写模式 Writing Modes

  • direction
  • unicode-bidi
  • writing-mode

列表 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

  • appearance
  • text-overflow
  • 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
  • user-select
  • pointer-events

多列 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

伸缩盒 Flexible Box(旧)

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

伸缩盒 Flexible Box(新)

  • flex
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex-flow
  • flex-direction
  • flex-wrap
  • align-content
  • align-items
  • align-self
  • justify-content
  • order

转换 Transform

  • transform
  • transform-origin
  • transform-style
  • perspective
  • perspective-origin
  • backface-visibility

过渡 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 Webkit

  • -webkit-text-fill-color
  • -webkit-text-stroke
  • -webkit-text-stroke-width
  • -webkit-text-stroke-color
  • -webkit-box-reflect
  • -webkit-tap-highlight-color
  • -webkit-user-drag
  • -webkit-overflow-scrolling

紫色 链接表示该属性在CSS3有修改或者增加了新的属性值；橙色 链接表示该属性是CSS3新增属性


Positioning Layout Module index

CSS3参考手册 » 属性列表 » 定位属性
相关内容：
其它定位属性参考 选择其它项

CSS Positioned Layout Module

  • 定位属性

定位 Positioning

属性 | 版本 | 继承性 | 描述
position | CSS2/3 | 无 | 检索对象的定位方式
z-index | CSS2 | 无 | 检索或设置对象的层叠顺序
top | CSS2 | 无 | 检索或设置对象参照相对物顶边界向下偏移位置。
right | CSS2 | 无 | 检索或设置对象参照相对物右边界向左偏移位置。
bottom | CSS2 | 无 | 检索或设置对象参照相对物底边界向上偏移位置。
left | CSS2 | 无 | 检索或设置对象参照相对物左边界向右偏移位置。
clip | CSS2/3 | 无 | 检索或设置对象的可视区域。区域外的部分是透明的

紫色 链接表示该属性在CSS3有修改或者增加了新的属性值；橙色 链接表示该属性是CSS3新增属性


position

  • 版本：CSS2/3
  • 2015.8.27

语法：

position：static | relative | absolute | fixed | center | page | sticky

默认值：static

适用于：除display属性定义为table-column-group | table-column之外的所有元素

继承性：无

动画性：否

计算值：指定值

媒体：视觉

取值：

static：
对象遵循常规流。此时4个定位偏移属性不会被应用。
relative：
对象遵循常规流，并且参照自身在常规流中的位置通过top，right，bottom，left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。
absolute：
对象脱离常规流，此时偏移属性参照的是离自身最近的定位祖先元素，如果没有定位的祖先元素，则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。
fixed：
与absolute一致，但偏移定位是以窗口为参考。当出现滚动条时，对象不会随着滚动。
center：
与absolute一致，但偏移定位是以定位祖先元素的中心点为参考。盒子在其包含容器垂直水平居中。（CSS3）
page：
与absolute一致。元素在分页媒体或者区域块内，元素的包含块始终是初始包含块，否则取决于每个absolute模式。（CSS3）
sticky：
对象在常态时遵循常规流。它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。（CSS3）

* CSS3新增属性可能存在描述错误及变更，仅供参考，持续更新

说明：

检索对象的定位方式。
  • 当position的值为非static时，其层叠级别通过z-index属性定义。
  • 绝对定位的元素，在top，right，bottom，left属性未设置时，会紧随在其前面的兄弟元素之后，但在位置上不影响常规流中的任何元素。用这个特性你或许会干这样的事：demo
  • 对应的脚本特性为position。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+#1 | 2.0+#2 | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1+ | 18.0+
fixed | 6.0 | 2.0+ | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1-2.3#3 | 18.0+
 | 7.0+ |  |  |  |  |  | 3.0+
center | page | 6.0-11.0 | 2.0-42.0 | 4.0-47.0 | 6.0-9.0 | 15.0-32.0 | 6.0-9.0 | 2.1-4.4.4 | 18.0-42.0
sticky | 6.0-11.0 | 2.0-31.0 | 4.0-47.0 | 6.0 | 15.0-32.0 | 6.0-9.0-webkit- | 2.1-4.4.4 | 18.0-42.0
 |  | 32.0+ |  | 6.1-9.0-webkit-
  1. IE如果在 quirks mode下将不支持；
  2. Firefox30.0开始支持 tr, thead, tfoot, tbody 定义 relative，Firefox30.0之前的版本及其它浏览器都只能给 table 定义 relative 用以约束内部元素的定位；
  3. 需要定义了<meta name="viewport" content="width=device-width, user-scalable=no">才生效

示例：


z-index

  • 版本：CSS2
  • 2015.8.27

语法：

z-index: auto | <integer>

默认值：auto

适用于：定位元素。即定义了position为非static的元素

继承性：无

动画性：当值为<integer>时

计算值：指定的值

媒体：视觉

取值：

auto：
元素在当前层叠上下文中的层叠级别是0。元素不会创建新的局部层叠上下文，除非它是根元素。
<integer>：
用整数值来定义堆叠级别。可以为负值。

说明：

检索或设置对象的层叠顺序。
  • z-index用于确定元素在当前层叠上下文中的层叠级别，并确定该元素是否创建新的局部层叠上下文。
  • 每个元素层叠顺序由所属的层叠上下文和元素本身的层叠级别决定（每个元素仅属于一个层叠上下文）。
  • 同一个层叠上下文中，层叠级别大的显示在上面，反之显示在下面。
  • 同一个层叠上下文中，层叠级别相同的两个元素，依据它们在HTML文档流中的顺序，写在后面的将会覆盖前面的。
  • 不同层叠上下文中，元素的显示顺序依据祖先的层叠级别来决定，与自身的层叠级别无关。
  • 当z-index未定义或者值为auto时，在IE6,7下会创建新的局部层叠上下文，而在高级浏览器中，按照规范不产生新的局部层叠上下文，如下例：

    demo：

    div {
    position: relative;
}
p {
    position: absolute;
}
.a {
    background: #f00;
    z-index: 10;
}
.b {
    background: #0ff;
    z-index: 3;
}

<div class="test">
    <p class="a">asdas</p>
</div>
<div class="test2">
    <p class="b">asdas</p>
</div>

    细心的你会发现上述代码在IE6,7下的呈现与高级浏览器下不同。.test1和.test2未设置z-index，在高级浏览器下不会产生新的局部层叠上下文，也就是说它们的子元素没有被新的局部层叠上下文包裹，那么它们的子元素就处在同一个层叠上下文中，可以直接通过自身的层叠级别来决定显示顺序，所以结果是.a 覆盖了.b，因为.a的层叠级别比.b高；而在IE6,7下，.test1和.test2会产生新的局部层叠上下文，即它们的子元素被新的局部层叠上下文包裹，于是子元素显示顺序只能依赖.test1和.test2层叠级别来确定。所以结果是.b 覆盖了.a，因为.b的父元素.test2在HTML文档流中排在.test1之后，后来者居上覆盖前者。参见demo: z-index创建局部层叠上下文在IE6,7下与高级浏览器下的区别

  • 对应的脚本特性为zIndex。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1+ | 18.0+
负值 #1 | 6.0+ | 1.0-2.0 | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1+ | 18.0+
 |  | 3.0+
  1. z-index负值是CSS2.1中定义的，在CSS2中是不被支持的；

示例：


top

  • 版本：CSS2
  • 2015.9.2

语法：

top: auto | <length> | <percentage>

默认值：auto

适用于：定位元素。即定义了position为非static的元素

继承性：无

动画性：当值为<length> | <percentage>时

计算值：当position为static时，计算值是auto。
为relative时，如果top和bottom都是auto，则它们的计算值是0；如果top和bottom其中一个为auto，则auto相当于另一个的负值，即top = -bottom；如果top和bottom的值都不为auto，则忽略bottom。
否则在其它情况下，当指定值为<length>时，计算值为指定值，当指定值为<percentage>时，计算值为计算后的绝对值。除去这些情况，都为auto

媒体：视觉

取值：

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

说明：

检索或设置对象参照相对物顶边界向下偏移位置。
  • 该属性用来指定盒子参照相对物顶边界向下偏移。相对定位元素的相对物是自身，绝对定位和居中定位元素是从包含块的padding边界开始计算偏移值
  • 对应的脚本特性为top。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1+ | 18.0+
  1. 在IE6及以前的版本下，如果top和bottom都定义了非auto的值，那么 bottom 的计算值将会被设置为 -top （无论是否显式的定义了 height 或 max-height），它的指定值将被忽略，说白了，你将无法在不指定某个元素高度的情况，通过给元素指定top和bottom的方式来进行高度拉伸；

示例：


right

  • 版本：CSS2
  • 2015.9.2

语法：

right：auto | <length> | <percentage>

默认值：auto

适用于：定位元素。即定义了 <' position '> 为「非static」的元素

继承性：无

动画性：当值为<length> | <percentage>时

计算值：当position为static时，计算值是auto。
为relative时，如果right和left都是auto，则它们的计算值是0；如果right和left其中一个为auto，则auto相当于另一个的负值，即left = -right；如果right和left的值都不为auto，则忽略right。
否则在其它情况下，当指定值为<length>时，计算值为指定值，当指定值为<percentage>时，计算值为计算后的绝对值。除去这些情况，都为auto

媒体：视觉

取值：

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

说明：

检索或设置对象参照相对物右边界向左偏移位置。
  • 该属性用来指定盒子参照相对物右边界向左偏移。相对定位元素的相对物是自身，绝对定位和居中定位元素是从包含块的padding边界开始计算偏移值
  • 对应的脚本特性为right。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1+ | 18.0+
  1. 在IE6及以前的版本下，如果right和left都定义了非auto的值，那么 right 的计算值将会被设置为 -left （无论是否显式的定义了 width 或 max-width），它的指定值将被忽略，说白了，你将无法在不指定某个元素宽度的情况，通过给元素指定right和left的方式来进行宽度拉伸；

示例：


bottom

  • 版本：CSS2
  • 2015.9.2

语法：

bottom: auto | <length> | <percentage>

默认值：auto

适用于：定位元素。即定义了 <' position '> 为「非static」的元素

继承性：无

动画性：当值为<length> | <percentage>时

计算值：当position为static时，计算值是auto。
为relative时，如果top和bottom都是auto，则它们的计算值是0；如果top和bottom其中一个为auto，则auto相当于另一个的负值，即top = -bottom；如果top和bottom的值都不为auto，则忽略bottom。
否则在其它情况下，当指定值为<length>时，计算值为指定值，当指定值为<percentage>时，计算值为计算后的绝对值。除去这些情况，都为auto

媒体：视觉

取值：

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

说明：

检索或设置对象参照相对物底边界向上偏移位置。
  • 该属性用来指定盒子参照相对物底边界向上偏移。相对定位元素的相对物是自身，绝对定位和居中定位元素是从包含块的padding边界开始计算偏移值
  • 对应的脚本特性为bottom。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1+ | 18.0+
  1. 在IE6及以前的版本下，如果top和bottom都定义了非auto的值，那么 bottom 的计算值将会被设置为 -top （无论是否显式的定义了 height 或 max-height），它的指定值将被忽略，说白了，你将无法在不指定某个元素高度的情况，通过给元素指定top和bottom的方式来进行高度拉伸；

示例：


left

  • 版本：CSS2
  • 2015.9.2

语法：

left: auto | <length> | <percentage>

默认值：auto

适用于：定位元素。即定义了 <' position '> 为「非static」的元素

继承性：无

动画性：当值为<length> | <percentage>时

计算值：当position为static时，计算值是auto。
为relative时，如果right和left都是auto，则它们的计算值是0；如果right和left其中一个为auto，则auto相当于另一个的负值，即left = -right；如果right和left的值都不为auto，则忽略right。
否则在其它情况下，当指定值为<length>时，计算值为指定值，当指定值为<percentage>时，计算值为计算后的绝对值。除去这些情况，都为auto

媒体：视觉

取值：

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

说明：

检索或设置对象参照相对物左边界向右偏移位置。
  • 该属性用来指定盒子参照相对物左边界向右偏移。相对定位元素的相对物是自身，绝对定位和居中定位元素是从包含块的padding边界开始计算偏移值
  • 对应的脚本特性为left。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1+ | 18.0+
  1. 在IE6及以前的版本下，如果right和left都定义了非auto的值，那么 right 的计算值将会被设置为 -left （无论是否显式的定义了 width 或 max-width），它的指定值将被忽略，说白了，你将无法在不指定某个元素宽度的情况，通过给元素指定right和left的方式来进行宽度拉伸；

示例：


clip

  • 版本：CSS2/3
  • 2015.8.11

语法：

clip：auto | <shape>

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

默认值：auto

适用于：绝对定位元素

继承性：无

动画性：当值为<shape>时

计算值：指定的值

媒体：视觉

取值：

auto：
对象无剪切
rect(<number>|auto <number>|auto <number>|auto <number>|auto)：
依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值，其中任一数值都可用auto替换，即此边不剪切。
上-左 方位的裁剪：从0开始剪裁直到设定值，即 上-左 方位的auto值等同于0；
右-下 方位的裁剪：从设定值开始剪裁直到最右边和最下边，即 右-下 方位的auto值为盒子的实际宽度和高度；

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

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

* CSS3新增属性可能存在描述错误及变更，仅供参考，持续更新

说明：

检索或设置对象的可视区域。区域外的部分是透明的。
  • 这个属性将被废弃，推荐使用 clip-path 代替，在过渡阶段，仍然会存在一段时间。
  • 必须将position的值设为absolute或者fixed，此属性方可使用。
  • 对应的脚本特性为clip。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support #1 | 6.0+ | 2.0+ | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1+ | 18.0+
rect(逗号分隔) | 6.0-7.0 | 2.0+ | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1+ | 18.0+
 | 8.0+
  1. Basic Support包含值：auto | rect(空格分隔)

示例：


Layout index

CSS3参考手册 » 属性列表 » 布局属性
相关内容：
其它布局属性参考 选择其它项

Layout Of CSS Basic Box Model Module

  • 布局属性

布局 Layout

属性 | 版本 | 继承性 | 描述
display | CSS2/3 | 无 | 设置或检索对象是否及如何显示
float | CSS1 | 无 | 该属性的值指出了对象是否及如何浮动。请参阅clear属性
clear | CSS1 | 无 | 该属性的值指出了不允许有浮动对象的边。请参阅float属性
visibility | CSS2 | 有 | 设置或检索是否显示对象。与display属性不同，此属性为隐藏的对象保留其占据的物理空间
overflow | CSS2/3 | 无 | 复合属性。检索或设置对象处理溢出内容的方式。
overflow-x | CSS2/3 | 无 | 检索或设置对象处理横向溢出内容的方式。
overflow-y | CSS2/3 | 无 | 检索或设置对象处理纵向溢出内容的方式。

紫色 链接表示该属性在CSS3有修改或者增加了新的属性值；橙色 链接表示该属性是CSS3新增属性


display

  • 版本：CSS2/3
  • 2015.8.11

语法：

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 | run-in | box | inline-box | flexbox | inline-flexbox | flex | inline-flex

默认值：inline

适用于：所有元素

继承性：无

动画性：否

计算值：指定值，除浮动，绝对定位和根元素外

媒体：视觉

取值：

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）
run-in：
根据上下文决定对象是内联对象还是块级对象。（CSS3）
box：
将对象作为弹性伸缩盒显示。（伸缩盒最老版本）（CSS3）
inline-box：
将对象作为内联块级弹性伸缩盒显示。（伸缩盒最老版本）（CSS3）
flexbox：
将对象作为弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）
inline-flexbox：
将对象作为内联块级弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）
flex：
将对象作为弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）
inline-flex：
将对象作为内联块级弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）

* CSS3新增属性可能存在描述错误及变更，仅供参考，持续更新

说明：

设置或检索对象是否及如何显示。
  • 如果display设置为none，float及position属性定义将不生效；
  • 如果position既不是static也不是relative或者float不是none或者元素是根元素，当display:inline-table时，display的计算值为table；当display:inline | inline-block | run-in | table-* 系时，display的计算值为block，其它情况为指定值；

  • IE6,7支持inline元素转换成inline-block，但不支持block元素转换成inline-block，所以非inline元素在IE6,7下要转换成inline-block，需先转换成inline，然后触发hasLayout，以此来获得和inline-block类似的效果；你可以这样：

    全兼容的inline-block：

    div {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}
  • 对应的脚本特性为display。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support #1 | 6.0+ | 2.0+ | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1+ | 18.0+
inline-block | 6.0-7.0 #3 | 2.0+ | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1+ | 18.0+
 | 8.0+
table系 #2 | 6.0-7.0 | 2.0+ | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1+ | 18.0+
 | 8.0+
run-in | 6.0-7.0 | 2.0-25.0 | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1+ | 18.0+
 | 8.0+ | 26.0+
box | inline-box | 6.0-11.0 | 2.0-38.0 -moz- | 4.0-43.0 -webkit- | 3.1-8.1 -webkit- | 15.0-28.0 -webkit- | 3.2-8.1 -webkit- | 2.1-4.4.4 -webkit- | 18.0-40.0 -webkit-
flexbox | inline-flexbox | 6.0-9.0 | 2.0-38.0 | 4.0-43.0 | 3.1-8.1 | 15.0-28.0 | 3.2-8.1 | 2.1-4.4.4 | 18.0-40.0
 | 10.0-11.0 -ms-
flex | inline-flex | 6.0-10.0 | 2.0-21.0 | 4.0-20.0 | 6.0 | 15.0+-webkit- | 6.0-6.1 | 2.1-4.3 | 18.0-19.0
 | 11.0+ | 22.0+ | 21.0+-webkit- | 6.1+-webkit- | 17.0+ | 7.0+-webkit- | 4.4+ | 20.0+-webkit-
 |  |  | 29.0+ | 9.0+ |  | 9.0+ |  | 28.0+
  1. Basic Support包含值：none | inline | block | list-item | inline-block
  2. table系包含值：table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group
  3. IE6,7只支持inline元素设置为inline-block，其它类型元素均不可以

示例：


float

  • 版本：CSS1
  • 媒体：视觉

语法：

float：none | left | right

默认值：none

适用于：所有元素

继承性：无

动画性：否

计算值：指定值

取值：

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

说明：

该属性的值指出了对象是否及如何浮动。请参阅clear属性
  • 如果float不是none，当display:inline-table时，display的计算值为table；当display:inline | inline-block | run-in | table-* 系时，display的计算值为block，其它情况为指定值；
  • float在绝对定位和display为none时不生效。
  • 对应的脚本特性为styleFloat（IE）或cssFloat（非IE）。(注意这里为styleFloat或cssFloat，而不是float)

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 3.1+ | 7.0+ | 3.2+ | 2.1+ | 18.0+

示例：


clear

  • 版本：CSS1
  • 媒体：视觉

语法：

clear：none | left | right | both

默认值：none

适用于：块级元素

继承性：无

动画性：否

计算值：指定值

取值：

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

说明：

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

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+

示例：


visibility

  • 版本：CSS2
  • 媒体：视觉

语法：

visibility：visible | hidden | collapse

默认值：visible

适用于：所有元素

继承性：有

动画性：是

计算值：指定值

取值：

visible：
设置对象可视
hidden：
设置对象隐藏
collapse：
主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象，其作用等同于hidden。

说明：

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

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
collapse | 6.0
 | 7.0+

示例：


overflow

  • 版本：CSS2/3
  • 媒体：视觉

语法：

overflow：<overflow-style>

<overflow-style> = visible | hidden | scroll | auto | paged-x | paged-y | paged-x-controls | paged-y-controls | fragments

默认值：visible

适用于：块容器，伸缩盒容器，grid容器

继承性：无

动画性：否

计算值：指定值

取值：

visible：
对溢出内容不做处理，内容可能会超出容器。
hidden：
隐藏溢出容器的内容且不出现滚动条。
scroll：
隐藏溢出容器的内容，溢出的内容将以卷动滚动条的方式呈现。
auto：
当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条。此为body对象和textarea的默认值。
paged-x：
TODO...（CSS3）
paged-y：
TODO...（CSS3）
paged-x-controls：
TODO...（CSS3）
paged-y-controls：
TODO...（CSS3）
fragments：
TODO...（CSS3）

* CSS3新增属性可能存在描述错误及变更，仅供参考，持续更新

说明：

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

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 3.1+ | 7.0+ | 3.2+ | 2.1+ | 18.0+
page-* | 11.0 | 38.0 | 43.0 | ?-8.1 -webkit- | 28.0 | ?-8.1 -webkit- | 4.4.4 | 40.0
page-*-controls | 11.0 | 38.0 | 43.0 | 8.1 | 28.0 | 8.1 | 4.4.4 | 40.0
fragments | 11.0 | 38.0 | 43.0 | 8.1 | 28.0 | 8.1 | 4.4.4 | 40.0

示例：


overflow-x

  • 版本：CSS2/3
  • 媒体：视觉

语法：

overflow-x：<overflow-style>

<overflow-style> = visible | hidden | scroll | auto | paged-x | paged-y | paged-x-controls | paged-y-controls | fragments

默认值：visible

适用于：块容器，伸缩盒容器，grid容器

继承性：无

动画性：否

计算值：指定值

取值：

visible：
对溢出内容不做处理，内容可能会超出容器。
hidden：
隐藏溢出容器的内容且不出现滚动条。
scroll：
隐藏溢出容器的内容，溢出的内容将以卷动滚动条的方式呈现。
auto：
当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条。此为body对象和textarea的默认值。
paged-x：
TODO...（CSS3）
paged-y：
TODO...（CSS3）
paged-x-controls：
TODO...（CSS3）
paged-y-controls：
TODO...（CSS3）
fragments：
TODO...（CSS3）

* CSS3新增属性可能存在描述错误及变更，仅供参考，持续更新

说明：

检索或设置对象处理横向溢出内容的方式。参阅overflow、overflow-y属性
  • 对应的脚本特性为overflowX。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 3.1+ | 7.0+ | 3.2+ | 2.1+ | 18.0+
page-* | 11.0 | 38.0 | 43.0 | 8.1 | 28.0 | 8.1 | 4.4.4 | 40.0
page-*-controls | 11.0 | 38.0 | 43.0 | 8.1 | 28.0 | 8.1 | 4.4.4 | 40.0
fragments | 11.0 | 38.0 | 43.0 | 8.1 | 28.0 | 8.1 | 4.4.4 | 40.0

示例：


overflow-y

  • 版本：CSS2/3
  • 媒体：视觉

语法：

overflow-y：<overflow-style>

<overflow-style> = visible | hidden | scroll | auto | paged-x | paged-y | paged-x-controls | paged-y-controls | fragments

默认值：visible

适用于：块容器，伸缩盒容器，grid容器

继承性：无

动画性：否

计算值：指定值

取值：

visible：
对溢出内容不做处理，内容可能会超出容器。
hidden：
隐藏溢出容器的内容且不出现滚动条。
scroll：
隐藏溢出容器的内容，溢出的内容将以卷动滚动条的方式呈现。
auto：
当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条。此为body对象和textarea的默认值。
paged-x：
TODO...（CSS3）
paged-y：
TODO...（CSS3）
paged-x-controls：
TODO...（CSS3）
paged-y-controls：
TODO...（CSS3）
fragments：
TODO...（CSS3）

* CSS3新增属性可能存在描述错误及变更，仅供参考，持续更新

说明：

检索或设置对象处理纵向溢出内容的方式。参阅overflow、overflow-x属性
  • 对应的脚本特性为overflowY。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 3.1+ | 7.0+ | 3.2+ | 2.1+ | 18.0+
page-* | 11.0 | 38.0 | 43.0 | 8.1 | 28.0 | 8.1 | 4.4.4 | 40.0
page-*-controls | 11.0 | 38.0 | 43.0 | 8.1 | 28.0 | 8.1 | 4.4.4 | 40.0
fragments | 11.0 | 38.0 | 43.0 | 8.1 | 28.0 | 8.1 | 4.4.4 | 40.0

示例：


Dimension index

CSS3参考手册 » 属性列表 » 尺寸属性
相关内容：
其它尺寸属性参考 选择其它项

Dimension Of CSS Basic Box Model Module

  • 尺寸属性

尺寸 Dimension

属性 | 版本 | 继承性 | 描述
width | CSS1 | 无 | 检索或设置对象的宽度
min-width | CSS2 | 无 | 设置或检索对象的最小宽度
max-width | CSS2 | 无 | 设置或检索对象的最大宽度
height | CSS1 | 无 | 检索或设置对象的高度
min-height | CSS2 | 无 | 设置或检索对象的最小高度
max-height | CSS2 | 无 | 设置或检索对象的最大高度

紫色 链接表示该属性在CSS3有修改或者增加了新的属性值；橙色 链接表示该属性是CSS3新增属性


width

  • 版本：CSS1
  • 媒体：视觉

语法：

width：<length> | <percentage> | auto

默认值：auto

适用于：除非置换内联元素，table-row, table-row-group之外的所有元素

继承性：无

动画性：当值为<length> | <percentage>时

计算值：指定的值

取值：

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

说明：

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

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+

示例：


min-width

  • 版本：CSS2
  • 媒体：视觉

语法：

min-width：<length> | <percentage>

默认值：0

适用于：除非置换内联元素，table-row, table-row-group之外的所有元素

继承性：无

动画性：当值为<length> | <percentage>时

计算值：指定的值

取值：

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

说明：

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

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0 | 2.0+ | 4.0+ | 3.1+ | 4.0+ | 3.2+ | 2.1+ | 18.0+
 | 7.0+

示例：


max-width

  • 版本：CSS2
  • 媒体：视觉

语法：

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

默认值：none

适用于：除非置换内联元素，table-row, table-row-group之外的所有元素

继承性：无

动画性：当值为<length> | <percentage>时

计算值：指定的值

取值：

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

说明：

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

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0 | 2.0+ | 4.0+ | 3.1+ | 4.0+ | 3.2+ | 2.1+ | 18.0+
 | 7.0+

示例：


height

  • 版本：CSS1
  • 媒体：视觉

语法：

height：<length> | <percentage> | auto

默认值：auto

适用于：除非置换内联元素，table-column, table-column-group之外的所有元素

继承性：无

动画性：当值为<length> | <percentage>时

计算值：指定的值

取值：

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

说明：

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

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+

示例：


min-height

  • 版本：CSS2
  • 媒体：视觉

语法：

min-height：<length> | <percentage>

默认值：0

适用于：除非置换内联元素，table-row, table-row-group之外的所有元素

继承性：无

动画性：当值为<length> | <percentage>时

计算值：指定的值

取值：

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

说明：

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

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0 | 2.0+ | 4.0+ | 3.1+ | 4.0+ | 3.2+ | 2.1+ | 18.0+
 | 7.0+

示例：


max-height

  • 版本：CSS2
  • 媒体：视觉

语法：

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

默认值：none

适用于：除非置换内联元素，table-row, table-row-group之外的所有元素

继承性：无

动画性：当值为<length> | <percentage>时

计算值：指定的值

取值：

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

说明：

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

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0 | 2.0+ | 4.0+ | 3.1+ | 4.0+ | 3.2+ | 2.1+ | 18.0+
 | 7.0+

示例：


Margin index

CSS3参考手册 » 属性列表 » 外补白属性
相关内容：
其它外补白属性参考 选择其它项

Margins Of CSS Basic Box Model Module

  • 外补白属性

外补白 Margin

属性 | 版本 | 继承性 | 描述
margin | CSS1 | 无 | 检索或设置对象四边的外延边距
margin-top | CSS1 | 无 | 检索或设置对象顶边的外延边距
margin-right | CSS1 | 无 | 检索或设置对象右边的外延边距
margin-bottom | CSS1 | 无 | 检索或设置对象底边的外延边距
margin-left | CSS1 | 无 | 检索或设置对象左边的外延边距

紫色 链接表示该属性在CSS3有修改或者增加了新的属性值；橙色 链接表示该属性是CSS3新增属性


margin

  • 版本：CSS1
  • 媒体：视觉

语法：

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

默认值：看每个独立属性

适用于：所有元素，除非 table | inline-table | table-caption 的表格类元素之外

继承性：无

动画性：是

计算值：看每个独立属性

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

取值：

auto：
水平（默认）书写模式下，margin-top/margin-bottom计算值为0，margin-left/margin-right取决于可用空间。详见：margin系列之keyword auto
<length>：
用长度值来定义外补白。可以为负值
<percentage>：
用百分比来定义外补白。水平（默认）书写模式下，参照其包含块 width 进行计算，其它情况参照 height ，可以为负值

说明：

检索或设置对象四边的外延边距。
  • 如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
  • 如果只提供一个，将用于全部的四边。
  • 如果提供两个，第一个用于上、下，第二个用于左、右。
  • 如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。
  • 非替代(non-Replaced)行内元素可以使用该属性设置左、右两边的外补丁；若要设置上、下两边的外补丁，必须先使该对象表现为块级或内联块级。
  • 外延边距始终透明。
  • 某些相邻的margin会发生合并，我们称之为margin折叠：

    示例：

    h2{margin:10px 0;}
div{margin:20px 0;}
......
<h2>这是一个标题</h2>
<div>
    <h2>这是又一个标题</h2>
</div>

    本例中，第一个h2的margin-bottom（10px），div的margin-top（20px），第二个h2的margin-top（10px）将被合并，它们之间的margin间隙最后是（20px），即取三者之间最大的那个值。

    如果给上例中的div加上border的话：

    示例：

    h2{margin:10px 0;}
div{margin:20px 0;border:1px solid #aaa;}
......
<h2>这是一个标题</h2>
<div>
    <h2>这是又一个标题</h2>
</div>

    本例中，第一个h2的margin-bottom（10px），div的margin-top（20px）将被合并，但第二个h2的margin-top不与它们合并，因为它被border分隔，不与它们相邻。

  • margin折叠常规认知：
    • margin折叠只发生在块级元素上；
    • 浮动元素的margin不与任何margin发生折叠；
    • 设置了属性overflow且值不为visible的块级元素，将不与它的子元素发生margin折叠；
    • 绝对定位元素的margin不与任何margin发生折叠；
    • 根元素的margin不与其它任何margin发生折叠；
  • 对应的脚本特性为margin。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+

示例：


margin-top

  • 版本：CSS1
  • 媒体：视觉

语法：

margin-top：<length> | <percentage> | auto

默认值：0

适用于：所有元素，除非 table | inline-table | table-caption 的表格类元素和非替代行内元素之外

继承性：无

动画性：是

计算值：指定的百分比、绝对长度或auto

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

取值：

auto：
水平（默认）书写模式下，其计算值为0
<length>：
用长度值来定义外补白。可以为负值
<percentage>：
用百分比来定义外补白。水平（默认）书写模式下，参照其包含块 width 进行计算，其它情况参照 height ，可以为负值

说明：

检索或设置对象顶边的外延边距。
  • 替代(Replaced)行内元素可以应用该属性。
  • 非替代(non-Replaced)行内元素要使用该属性必须先使该对象表现为块级或行内块级。
  • 外延边距始终透明。
  • 对应的脚本特性为marginTop。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+

示例：


margin-right

  • 版本：CSS1
  • 媒体：视觉

语法：

margin-right：<length> | <percentage> | auto

默认值：0

适用于：所有元素，除非 table | inline-table | table-caption 的表格类元素之外

继承性：无

动画性：是

计算值：指定的百分比、绝对长度或auto

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

取值：

auto：
水平（默认）书写模式下，其计算值取决于可用空间
<length>：
用长度值来定义外补白。可以为负值
<percentage>：
用百分比来定义外补白。水平（默认）书写模式下，参照其包含块 width 进行计算，其它情况参照 height ，可以为负值

说明：

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

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+

示例：


margin-bottom

  • 版本：CSS1
  • 媒体：视觉

语法：

margin-bottom：<length> | <percentage> | auto

默认值：0

适用于：所有元素，除非 table | inline-table | table-caption 的表格类元素和非替代行内元素之外

继承性：无

动画性：是

计算值：指定的百分比、绝对长度或auto

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

取值：

auto：
水平（默认）书写模式下，其计算值为0
<length>：
用长度值来定义外补白。可以为负值
<percentage>：
用百分比来定义外补白。水平（默认）书写模式下，参照其包含块 width 进行计算，其它情况参照 height ，可以为负值

说明：

检索或设置对象底边的外延边距。
  • 替代(Replaced)行内元素可以应用该属性。
  • 非替代(non-Replaced)行内元素要使用该属性必须先使该对象表现为块级或行内块级。
  • 外延边距始终透明。
  • 对应的脚本特性为marginBottom。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+

示例：


margin-left

  • 版本：CSS1
  • 媒体：视觉

语法：

margin-left：<length> | <percentage> | auto

默认值：0

适用于：所有元素，除非 table | inline-table | table-caption 的表格类元素之外

继承性：无

动画性：是

计算值：指定的百分比、绝对长度或auto

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

取值：

auto：
水平（默认）书写模式下，其计算值取决于可用空间
<length>：
用长度值来定义外补白。可以为负值
<percentage>：
用百分比来定义外补白。水平（默认）书写模式下，参照其包含块 width 进行计算，其它情况参照 height ，可以为负值

说明：

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

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+

示例：


Padding index

CSS3参考手册 » 属性列表 » 内补白属性
相关内容：
其它内补白属性参考 选择其它项

Paddings Of CSS Basic Box Model Module

  • 内补白属性

内补白 Padding

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

紫色 链接表示该属性在CSS3有修改或者增加了新的属性值；橙色 链接表示该属性是CSS3新增属性


padding

  • 版本：CSS1
  • 媒体：视觉

语法：

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

默认值：看每个独立属性

适用于：所有元素，除 table-row-group | table-header-group | table-footer-group | table-column-group | table-row 外

继承性：无

动画性：是

计算值：看每个独立属性

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

取值：

<length>：
用长度值来定义内补白。不允许负值
<percentage>：
用百分比来定义内补白。水平（默认）书写模式下，参照其包含块 width 进行计算，其它情况参照 height 。不允许负值

说明：

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

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+

示例：


padding-top

  • 版本：CSS1
  • 媒体：视觉

语法：

padding-top：<length> | <percentage>

默认值：0

适用于：所有元素，除 table-row-group | table-header-group | table-footer-group | table-column-group | table-row 外

继承性：无

动画性：是

计算值：<length>

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

取值：

<length>：
用长度值来定义内补白。不允许负值
<percentage>：
用百分比来定义内补白。水平（默认）书写模式下，参照其包含块 width 进行计算，其它情况参照 height 。不允许负值

说明：

检索或设置对象顶边的内补白。
  • 非替代(non-Replaced)行内元素要使用该属性必须先使该对象表现为块级或内联块级。
  • 对应的脚本特性为paddingTop。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+

示例：


padding-right

  • 版本：CSS1
  • 媒体：视觉

语法：

padding-right：<length> | <percentage>

默认值：0

适用于：所有元素，除 table-row-group | table-header-group | table-footer-group | table-column-group | table-row 外

继承性：无

动画性：是

计算值：<length>

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

取值：

<length>：
用长度值来定义内补白。不允许负值
<percentage>：
用百分比来定义内补白。水平（默认）书写模式下，参照其包含块 width 进行计算，其它情况参照 height 。不允许负值

说明：

检索或设置对象右边的内补白。
  • 非替代(non-Replaced)行内元素可以使用该属性设置内补白。
  • 对应的脚本特性为paddingRight。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+

示例：


padding-bottom

  • 版本：CSS1
  • 媒体：视觉

语法：

padding-bottom：<length> | <percentage>

默认值：0

适用于：所有元素，除 table-row-group | table-header-group | table-footer-group | table-column-group | table-row 外

继承性：无

动画性：是

计算值：<length>

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

取值：

<length>：
用长度值来定义内补白。不允许负值
<percentage>：
用百分比来定义内补白。水平（默认）书写模式下，参照其包含块 width 进行计算，其它情况参照 height 。不允许负值

说明：

检索或设置对象底边的内补白。
  • 非替代(non-Replaced)行内元素要使用该属性必须先使该对象表现为块级或内联块级。
  • 对应的脚本特性为paddingBottom。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+

示例：


padding-left

  • 版本：CSS1
  • 媒体：视觉

语法：

padding-left：<length> | <percentage>

默认值：0

适用于：所有元素，除 table-row-group | table-header-group | table-footer-group | table-column-group | table-row 外

继承性：无

动画性：是

计算值：<length>

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

取值：

<length>：
用长度值来定义内补白。不允许负值
<percentage>：
用百分比来定义内补白。水平（默认）书写模式下，参照其包含块 width 进行计算，其它情况参照 height 。不允许负值

说明：

检索或设置对象左边的内补白。
  • 非替代(non-Replaced)行内元素可以使用该属性设置左边内补白。
  • 对应的脚本特性为paddingLeft。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+

示例：


Border index

CSS3参考手册 » 属性列表 » 边框属性
相关内容：
其它边框属性参考 选择其它项

Borders Of CSS Backgrounds and Borders Module

  • 边框属性

边框 Border

属性 | 版本 | 继承性 | 描述
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-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 | 无 | 设置或检索对象阴影
border-image | CSS3 | 无 | 设置或检索对象的边框样式使用图像来填充
border-image-source | CSS3 | 无 | 设置或检索对象的边框是否用图像定义样式或图像来源路径
border-image-slice | CSS3 | 无 | 设置或检索对象的边框背景图的分割方式
border-image-width | CSS3 | 无 | 设置或检索对象的边框厚度
border-image-outset | CSS3 | 无 | 设置或检索对象的边框背景图的扩展
border-image-repeat | CSS3 | 无 | 设置或检索对象的边框图像的平铺方式

紫色 链接表示该属性在CSS3有修改或者增加了新的属性值；橙色 链接表示该属性是CSS3新增属性


border

  • 版本：CSS1
  • 媒体：视觉

语法：

border：<line-width> || <line-style> || <color>

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

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

默认值：看每个独立属性

适用于：所有元素

继承性：无

动画性：看每个独立属性

计算值：看每个独立属性

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

取值：

<line-width>：
设置或检索对象边框宽度。
<line-style>：
设置或检索对象边框样式。
<color>：
设置或检索对象边框颜色。

说明：

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

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+

示例：


border-width

  • 版本：CSS1
  • 媒体：视觉

语法：

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

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

默认值：看每个独立属性

适用于：所有元素

继承性：无

动画性：是

计算值：看每个独立属性

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

取值：

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

说明：

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

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+

示例：


border-style

  • 版本：CSS1
  • 媒体：视觉

语法：

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

<line-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计算值为0，除非边框轮廓为图像，即border-image。
hidden：
隐藏边框。IE7及以下尚不支持
dotted：
点状轮廓。IE6下显示为dashed效果
dashed：
虚线轮廓。
solid：
实线轮廓
double：
双线轮廓。两条单线与其间隔的和等于指定的border-width值
groove：
3D凹槽轮廓。
ridge：
3D凸槽轮廓。
inset：
3D凹边轮廓。
outset：
3D凸边轮廓。

说明：

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

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
hidden | 6.0-7.0
 | 8.0+
dotted | 6.0 #1
 | 7.0+
  1. dotted属性值显示为dashed的效果。

示例：


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。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
transparent | 6.0 #1
 | 7.0+
RGBA, HSL, HSLA | 6.0-8.0 #1
 | 9.0+
  1. 需要注意的是，边框颜色如果设置了不支持的值，则效果等同于默认值 currentColor。

示例：


border-top

  • 版本：CSS1
  • 媒体：视觉

语法：

border-top：<line-width> || <line-style> || <color>

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

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

默认值：看每个独立属性

适用于：所有元素

继承性：无

动画性：看每个独立属性

计算值：看每个独立属性

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

取值：

<line-width>：
设置或检索对象边框宽度。
<line-style>：
设置或检索对象边框样式。
<color>：
设置或检索对象边框颜色。

说明：

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

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+

示例：


border-top-width

  • 版本：CSS1
  • 媒体：视觉

语法：

border-top-width：<line-width>

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

默认值：medium

适用于：所有元素

继承性：无

动画性：是

计算值：绝对长度值，如果border style设置为none或hidden，则计算值为0

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

取值：

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

说明：

设置或检索对象的顶部边框宽度。
  • 对应的脚本特性为borderTopWidth。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+

示例：


border-top-style

  • 版本：CSS1
  • 媒体：视觉

语法：

border-top-style：<line-style>

<line-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计算值为0，除非边框轮廓为图像，即border-image。
hidden：
隐藏边框。IE7及以下尚不支持
dotted：
点状轮廓。IE6下显示为dashed效果
dashed：
虚线轮廓。
solid：
实线轮廓
double：
双线轮廓。两条单线与其间隔的和等于指定的border-width值
groove：
3D凹槽轮廓。
ridge：
3D凸槽轮廓。
inset：
3D凹边轮廓。
outset：
3D凸边轮廓。

说明：

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

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
hidden | 6.0-7.0
 | 8.0+
dotted | 6.0 #1
 | 7.0+
  1. dotted属性值显示为dashed的效果。

示例：


border-top-color

  • 版本：CSS1
  • 媒体：视觉

语法：

border-top-color：<color>

默认值：currentColor

适用于：所有元素

继承性：无

动画性：是

计算值：指定值

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

取值：

<color>：
指定颜色。

说明：

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

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
transparent | 6.0 #1
 | 7.0+
RGBA, HSL, HSLA | 6.0-8.0 #1
 | 9.0+
  1. 需要注意的是，边框颜色如果设置了不支持的值，则效果等同于默认值 currentColor

示例：


border-right

  • 版本：CSS1
  • 媒体：视觉

语法：

border-right：<line-width> || <line-style> || <color>

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

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

默认值：看每个独立属性

适用于：所有元素

继承性：无

动画性：看每个独立属性

计算值：看每个独立属性

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

取值：

<line-width>：
设置或检索对象边框宽度。
<line-style>：
设置或检索对象边框样式。
<color>：
设置或检索对象边框颜色。

说明：

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

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+

示例：


border-right-width

  • 版本：CSS1
  • 媒体：视觉

语法：

border-right-width：<line-width>

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

默认值：medium

适用于：所有元素

继承性：无

动画性：是

计算值：绝对长度值，如果border style设置为none或hidden，则计算值为0

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

取值：

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

说明：

设置或检索对象的右边边框宽度。
  • 对应的脚本特性为borderRightWidth。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+

示例：


border-right-style

  • 版本：CSS1
  • 媒体：视觉

语法：

border-right-style：<line-style>

<line-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计算值为0，除非边框轮廓为图像，即border-image。
hidden：
隐藏边框。IE7及以下尚不支持
dotted：
点状轮廓。IE6下显示为dashed效果
dashed：
虚线轮廓。
solid：
实线轮廓
double：
双线轮廓。两条单线与其间隔的和等于指定的border-width值
groove：
3D凹槽轮廓。
ridge：
3D凸槽轮廓。
inset：
3D凹边轮廓。
outset：
3D凸边轮廓。

说明：

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

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
hidden | 6.0-7.0
 | 8.0+
dotted | 6.0 #1
 | 7.0+
  1. dotted属性值显示为dashed的效果。

示例：


border-right-color

  • 版本：CSS1
  • 媒体：视觉

语法：

border-right-color：<color>

默认值：currentColor

适用于：所有元素

继承性：无

动画性：是

计算值：指定值

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

取值：

<color>：
指定颜色。

说明：

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

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
transparent | 6.0 #1
 | 7.0+
RGBA, HSL, HSLA | 6.0-8.0 #1
 | 9.0+
  1. 需要注意的是，边框颜色如果设置了不支持的值，则效果等同于默认值 currentColor

示例：


border-bottom

  • 版本：CSS1
  • 媒体：视觉

语法：

border-bottom：<line-width> || <line-style> || <color>

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

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

默认值：看每个独立属性

适用于：所有元素

继承性：无

动画性：看每个独立属性

计算值：看每个独立属性

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

取值：

<line-width>：
设置或检索对象边框宽度。
<line-style>：
设置或检索对象边框样式。
<color>：
设置或检索对象边框颜色。

说明：

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

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+

示例：


border-bottom-width

  • 版本：CSS1
  • 媒体：视觉

语法：

border-bottom-width：<line-width>

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

默认值：medium

适用于：所有元素

继承性：无

动画性：是

计算值：绝对长度值，如果border style设置为none或hidden，则计算值为0

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

取值：

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

说明：

设置或检索对象的底部边框宽度。
  • 对应的脚本特性为borderBottomWidth。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+

示例：


border-bottom-style

  • 版本：CSS1
  • 媒体：视觉

语法：

border-bottom-style：<line-style>

<line-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计算值为0，除非边框轮廓为图像，即border-image。
hidden：
隐藏边框。IE7及以下尚不支持
dotted：
点状轮廓。IE6下显示为dashed效果
dashed：
虚线轮廓。
solid：
实线轮廓
double：
双线轮廓。两条单线与其间隔的和等于指定的border-width值
groove：
3D凹槽轮廓。
ridge：
3D凸槽轮廓。
inset：
3D凹边轮廓。
outset：
3D凸边轮廓。

说明：

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

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
hidden | 6.0-7.0
 | 8.0+
dotted | 6.0 #1
 | 7.0+
  1. dotted属性值显示为dashed的效果。

示例：


border-bottom-color

  • 版本：CSS1
  • 媒体：视觉

语法：

border-bottom-color：<color>

默认值：currentColor

适用于：所有元素

继承性：无

动画性：是

计算值：指定值

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

取值：

<color>：
指定颜色。

说明：

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

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
transparent | 6.0 #1
 | 7.0+
RGBA, HSL, HSLA | 6.0-8.0 #1
 | 9.0+
  1. 需要注意的是，边框颜色如果设置了不支持的值，则效果等同于默认值 currentColor

示例：


border-left

  • 版本：CSS1
  • 媒体：视觉

语法：

border-left：<line-width> || <line-style> || <color>

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

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

默认值：看每个独立属性

适用于：所有元素

继承性：无

动画性：看每个独立属性

计算值：看每个独立属性

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

取值：

<line-width>：
设置或检索对象边框宽度。
<line-style>：
设置或检索对象边框样式。
<color>：
设置或检索对象边框颜色。

说明：

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

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+

示例：


border-left-width

  • 版本：CSS1
  • 媒体：视觉

语法：

border-left-width：<line-width>

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

默认值：medium

适用于：所有元素

继承性：无

动画性：是

计算值：绝对长度值，如果border style设置为none或hidden，则计算值为0

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

取值：

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

说明：

设置或检索对象的左边边框宽度。
  • 对应的脚本特性为borderLeftWidth。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+

示例：


border-left-style

  • 版本：CSS1
  • 媒体：视觉

语法：

border-left-style：<line-style>

<line-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计算值为0，除非边框轮廓为图像，即border-image。
hidden：
隐藏边框。IE7及以下尚不支持
dotted：
点状轮廓。IE6下显示为dashed效果
dashed：
虚线轮廓。
solid：
实线轮廓
double：
双线轮廓。两条单线与其间隔的和等于指定的border-width值
groove：
3D凹槽轮廓。
ridge：
3D凸槽轮廓。
inset：
3D凹边轮廓。
outset：
3D凸边轮廓。

说明：

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

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
hidden | 6.0-7.0
 | 8.0+
dotted | 6.0 #1
 | 7.0+
  1. dotted属性值显示为dashed的效果。

示例：


border-left-color

  • 版本：CSS1
  • 媒体：视觉

语法：

border-left-color：<color>

默认值：currentColor

适用于：所有元素

继承性：无

动画性：是

计算值：指定值

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

取值：

<color>：
指定颜色。

说明：

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

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
transparent | 6.0 #1
 | 7.0+
RGBA, HSL, HSLA | 6.0-8.0 #1
 | 9.0+
  1. 需要注意的是，边框颜色如果设置了不支持的值，则效果等同于默认值 currentColor

示例：


border-radius

  • 版本：CSS3
  • 媒体：视觉

语法：

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

默认值：看每个独立属性

适用于：所有元素

继承性：无

动画性：看每个独立属性

计算值：看每个独立属性

取值：

<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。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-8.0 | 2.0-12.0 -moz- #1 | 4.0-43.0 -webkit- | 3.1-8.1 -webkit- | 10.5-28.0 -webkit- | 3.2-8.1 -webkit- | 2.1-4.4.4 -webkit- | 18.0-40.0 -webkit-
 | 9.0+ | 4.0+ | 5.0+ | 5.0+ | 10.5+ | 4.0+ | 2.2+ | 18.0+
<percentage> | 9.0+ | 4.0+ | 5.0+ | 5.0+ | 10.5+ | 4.0+ | 2.1-2.3 | 18.0+
 |  |  |  |  |  |  | 3.0+
  1. Firefox从13.0开始移除对-moz-的支持，仅支持标准的border-radius写法，在4.0-12.0区间，两种方式都支持。
  2. 早期的Chrome和Safari不支持border-radius取值为<percentage>。

示例：


border-top-left-radius

  • 版本：CSS3
  • 媒体：视觉

语法：

border-top-left-radius：[ <length> | <percentage> ]{1,2}

默认值：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。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-8.0 | 2.0-12.0 -moz- #1 #2 | 4.0-43.0 -webkit- | 3.1-8.1 -webkit- | 10.5-28.0 -webkit- | 3.2-8.1 -webkit- | 2.1-4.4.4 -webkit- | 18.0-40.0 -webkit-
 | 9.0+ | 4.0+ | 5.0+ | 5.0+ | 10.5+ | 4.0+ | 2.2+ | 18.0+
  1. Firefox从13.0开始移除对-moz-的支持，仅支持标准的border-radius写法，在4.0-12.0区间，两种方式都支持。
  2. Firefox支持的厂商前缀写法是非标准的-moz-border-radius-topleft，而不是-moz-border-top-left-radius。

示例：


border-top-right-radius

  • 版本：CSS3
  • 媒体：视觉

语法：

border-top-right-radius：[ <length> | <percentage> ]{1,2}

默认值：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。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-8.0 | 2.0-12.0 -moz- #1 #2 | 4.0-43.0 -webkit- | 3.1-8.1 -webkit- | 10.5-28.0 -webkit- | 3.2-8.1 -webkit- | 2.1-4.4.4 -webkit- | 18.0-40.0 -webkit-
 | 9.0+ | 4.0+ | 5.0+ | 5.0+ | 10.5+ | 4.0+ | 2.2+ | 18.0+
  1. Firefox从13.0开始移除对-moz-的支持，仅支持标准的border-radius写法，在4.0-12.0区间，两种方式都支持。
  2. Firefox支持的厂商前缀写法是非标准的-moz-border-radius-topright，而不是-moz-border-top-right-radius。

示例：


border-bottom-right-radius

  • 版本：CSS3
  • 媒体：视觉

语法：

border-bottom-right-radius：[ <length> | <percentage> ]{1,2}

默认值：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。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-8.0 | 2.0-12.0 -moz- #1 #2 | 4.0-43.0 -webkit- | 3.1-8.1 -webkit- | 10.5-28.0 -webkit- | 3.2-8.1 -webkit- | 2.1-4.4.4 -webkit- | 18.0-40.0 -webkit-
 | 9.0+ | 4.0+ | 5.0+ | 5.0+ | 10.5+ | 4.0+ | 2.2+ | 18.0+
  1. Firefox从13.0开始移除对-moz-的支持，仅支持标准的border-radius写法，在4.0-12.0区间，两种方式都支持。
  2. Firefox支持的厂商前缀写法是非标准的-moz-border-radius-bottomright，而不是-moz-border-bottom-right-radius。

示例：


border-bottom-left-radius

  • 版本：CSS3
  • 媒体：视觉

语法：

border-bottom-left-radius：[ <length> | <percentage> ]{1,2}

默认值：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。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-8.0 | 2.0-12.0 -moz- #1 #2 | 4.0-43.0 -webkit- | 3.1-8.1 -webkit- | 10.5-28.0 -webkit- | 3.2-8.1 -webkit- | 2.1-4.4.4 -webkit- | 18.0-40.0 -webkit-
 | 9.0+ | 4.0+ | 5.0+ | 5.0+ | 10.5+ | 4.0+ | 2.2+ | 18.0+
  1. Firefox从13.0开始移除对-moz-的支持，仅支持标准的border-radius写法，在4.0-12.0区间，两种方式都支持。
  2. Firefox支持的厂商前缀写法是非标准的-moz-border-radius-bottomleft，而不是-moz-border-bottom-left-radius。

示例：


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。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-8.0 | 2.0-3.0 | 4.0-43.0 -webkit- | 3.1-8.1 -webkit- | 10.5-28.0 -webkit- | 3.2-8.1 -webkit- | 2.1-4.4.4 -webkit- | 18.0-40.0 -webkit-
 |  | 4.0-12.0 -moz- #1
 | 9.0+ | 4.0+ | 10.0+ | 5.1+ | 10.5+ | 5.0+ | 4.0+ | 18.0+
  1. Firefox从13.0开始移除对-moz-的支持，仅支持标准的 <' box-shadow '> 写法，在4.0-12.0区间，两种方式都支持。

示例：


border-image

  • 版本：CSS3
  • 媒体：视觉

语法：

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

默认值：看每个独立属性

适用于：看每个独立属性

继承性：无

动画性：看每个独立属性

计算值：看每个独立属性

取值：

<' border-image-source '>：
设置或检索对象的边框是否用图像定义样式或图像来源路径。
<' border-image-slice '>：
设置或检索对象的边框背景图的分割方式。
<' border-image-width '>：
设置或检索对象的边框厚度。
<' border-image-outset '>：
设置或检索对象的边框背景图的扩展。
<' border-image-repeat '>：
设置或检索对象的边框图像的平铺方式。

说明：

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

    示例：

    .test {
    border: 10px solid gray;
    border-image: url(test.png) 10/10px;
}

    如果例子中的图片不可见，或者未被加载，则会以 <' border '> 的定义呈现，如果图片载入成功，则以 <' border-image '> 的定义呈现。

  • 对应的脚本特性为borderImage。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-10.0 | 2.0-3.0 | 4.0-14.0 -webkit- | 3.1-5.1 -webkit- | 15.0+ | 3.2-5.1 -webkit- | 2.1-4.3 -webkit- | 18.0+
 | 11.0+ | 3.5-14.0 -moz- | 15.0 -webkit- | 6.0+ |  | 6.1+ | 4.4-4.4.4
 |  | 15.0+ | 16.0+

示例：


border-image-source

  • 版本：CSS3
  • 媒体：视觉

语法：

border-image-source：none | <image>

默认值：none

适用于：所有元素，除table元素设置了 <' border-collapse '> 为collapse之外

继承性：无

动画性：否

计算值：指定值

取值：

none：
无背景图片。
<image>：
使用绝对或相对地址指或者创建渐变色来确定图像。

说明：

设置或检索对象的边框样式使用图像路径。
  • 指定一个图像用来替代 <' border-style '> 边框样式的属性。当 <' border-image '> 为none或图像不可见时，将会显示 <' border-style '> 所定义的边框样式效果。
  • 对应的脚本特性为borderImageSource。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-10.0 | 2.0-3.0 | 4.0-14.0 -webkit- | 3.1-5.1 -webkit- | 15.0+ | 3.2-5.1 -webkit- | 2.1-4.3 -webkit- | 18.0+
 | 11.0+ | 3.5-14.0 -moz- | 15.0 -webkit- | 6.0+ |  | 6.1+ | 4.4-4.4.4
 |  | 15.0+ | 16.0+

示例：


border-image-slice

  • 版本：CSS3
  • 媒体：视觉

语法：

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

默认值：100%

适用于：所有元素，除table元素设置了 <' border-collapse '> 为collapse之外

继承性：无

动画性：否

计算值：指定值

取值：

<number>：
用浮点数指定宽度。不允许负值。
<percentage>：
用百分比指定宽度。参照其包含块区域进行计算。不允许负值。
fill：
保留裁减后的中间区域，其铺排方式遵循 <' border-image-repeat '> 的设定。

说明：

设置或检索对象的边框背景图的分割方式。
  • 该属性指定从上，右，下，左方位来分隔图像，将图像分成4个角，4条边和中间区域共9份，中间区域始终是透明的（即没图像填充），除非加上关键字 fill。
  • 对应的脚本特性为borderImageSlice。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-10.0 | 2.0-3.0 | 4.0-14.0 -webkit- | 3.1-5.1 -webkit- | 15.0+ | 3.2-5.1 -webkit- | 2.1-4.3 -webkit- | 18.0+
 | 11.0+ | 3.5-14.0 -moz- | 15.0 -webkit- | 6.0+ |  | 6.1+ | 4.4-4.4.4
 |  | 15.0+ | 16.0+

示例：


border-image-width

  • 版本：CSS3
  • 媒体：视觉

语法：

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

默认值：1

适用于：所有元素，除table元素设置了 <' border-collapse '> 为collapse之外

继承性：无

动画性：否

计算值：指定值

取值：

<length>：
用长度值指定宽度。不允许负值。
<percentage>：
用百分比指定宽度。参照其包含块进行计算。不允许负值。
<number>：
用浮点数指定宽度。不允许负值。
auto：
如果auto值被设置，则 <' border-image-width '> 采用与 <' border-image-slice '> 相同的值。

说明：

设置或检索对象的边框厚度。
  • 该属性用于指定使用多厚的边框来承载被裁剪后的图像。
  • 该属性可省略，由外部的 <' border-width '> 来定义。
  • 对应的脚本特性为borderImageWidth。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-10.0 | 2.0-3.0 | 4.0-14.0 -webkit- | 3.1-5.1 -webkit- | 15.0+ | 3.2-5.1 -webkit- | 2.1-4.3 -webkit- | 18.0+
 | 11.0+ | 3.5-14.0 -moz- | 15.0 -webkit- | 6.0+ |  | 6.1+ | 4.4-4.4.4
 |  | 15.0+ | 16.0+

示例：


border-image-outset

  • 版本：CSS3
  • 媒体：视觉

语法：

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

默认值：0

适用于：所有元素，除table元素设置了 <' border-collapse '> 为collapse之外

继承性：无

动画性：否

计算值：指定值

取值：

<length>：
用长度值指定宽度。不允许负值。
<number>：
用浮点数指定宽度。不允许负值。

说明：

置或检索对象的边框背景图的扩展。
  • 该属性用于指定边框图像向外扩展所定义的数值，即如果值为10px，则图像在原本的基础上往外延展10px再显示。
  • 对应的脚本特性为borderImageOutset。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-10.0 | 2.0-3.0 | 4.0-14.0 -webkit- | 3.1-5.1 -webkit- | 15.0+ | 3.2-5.1 -webkit- | 2.1-4.3 -webkit- | 18.0+
 | 11.0+ | 3.5-14.0 -moz- | 15.0 -webkit- | 6.0+ |  | 6.1+ | 4.4-4.4.4
 |  | 15.0+ | 16.0+

示例：


border-image-repeat

  • 版本：CSS3
  • 媒体：视觉

语法：

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

默认值：stretch

适用于：所有元素，除table元素设置了 <' border-collapse '> 为collapse之外

继承性：无

动画性：否

计算值：指定值

取值：

stretch：
指定用拉伸方式来填充边框背景图。
repeat：
指定用平铺方式来填充边框背景图。当图片碰到边界时，如果超过则被截断。
round：
指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框。
space：
指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的之间的间距直至正好可以铺满整个边框。

说明：

设置或检索对象的边框图像的平铺方式。
  • 该属性用于指定边框背景图的填充方式。可定义0-2个参数值，即水平和垂直方向。如果2个值相同，可合并成1个，表示水平和垂直方向都用相同的方式填充边框背景图；如果2个值都为stretch，则可省略不写。
  • 对应的脚本特性为borderImageRepeat。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-10.0 | 2.0-3.0 | 4.0-14.0 -webkit- | 3.1-5.1 -webkit- | 15.0+ | 3.2-5.1 -webkit- | 2.1-4.3 -webkit- | 18.0+
 | 11.0+ | 3.5-14.0 -moz- | 15.0 -webkit- | 6.0+ |  | 6.1+ | 4.4-4.4.4
 |  | 15.0+ | 16.0+
space | 11.0 #1 | 3.5-38.0 #1 | 15.0-43.0 #1 | 3.1-8.1 #1 | 15.0-28.0 #1 | 3.2-8.1 #1 | 2.1-4.4.4 #1 | 18.0-40.0 #1
  1. 不支持 space 属性值。

示例：


Background index

CSS3参考手册 » 属性列表 » 背景属性
相关内容：
其它背景属性参考 选择其它项

Backgrounds Of CSS Backgrounds and Borders Module

  • 背景属性

背景 Background

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

紫色 链接表示该属性在CSS3有修改或者增加了新的属性值；橙色 链接表示该属性是CSS3新增属性


background

  • 版本：CSS1/3
  • 媒体：视觉

语法：

background：[ <bg-layer>, ]* <final-bg-layer>

<bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>

<final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box> || <' background-color '>

默认值：看每个独立属性

适用于：所有元素

继承性：无

动画性：看每个独立属性

计算值：看每个独立属性

取值：

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

说明：

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

    缩写方式：

    background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px content-box padding-box,
       url(test1.jpg) no-repeat scroll 10px 20px/70px 90px content-box padding-box,
       url(test1.jpg) no-repeat scroll 10px 20px/110px 130px content-box padding-box #aaa;

    注意， <' background-color '> 只能设置一次，且由于写在前面的背景会叠在之后的背景之上，所以背景色通常都定义在最后一组上，避免背景色将图像盖住。

    拆分方式：

    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-position:10px 20px,10px 20px,10px 20px;
background-size:50px 60px,70px 90px,110px 130px;
background-origin:content-box,content-box,content-box;
background-clip:padding-box,padding-box,padding-box;
background-color:#aaa;

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

    缩写方式：

    background-image:url(test1.jpg),url(test2.jpg),url(test3.jpg);
background-repeat:no-repeat;
background-attachment:scroll;
background-position:10px 20px;
background-size:50px 60px,70px 90px,110px 130px;
background-origin:content-box;
background-clip:padding-box;
background-color:#aaa;

    如果定义了多个背景图片，而 <' background-origin '> 和 <' background-clip '> 设置了相同的值。可这样缩写：

    缩写方式：

    background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px padding-box,
       url(test1.jpg) no-repeat scroll 10px 20px/70px 90px padding-box,
       url(test1.jpg) no-repeat scroll 10px 20px/110px 130px padding-box #aaa;

    这表示 <' background-origin '> 和 <' background-clip '> 都使用了padding-box参数值。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
Multiple backgrounds | 6.0-8.0 | 2.0-3.5 | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
 | 9.0+ | 3.6+
background-size #1 | 6.0-8.0 | 2.0-3.5 | 4.0-14.0 | 6.0-6.1 | 15.0+ | 6.0-6.1 | 2.1-4.3 | 18.0+
 | 9.0+ | 3.6+ | 15.0+ | 7.0+ |  | 7.0+ | 4.4+
background-origin background-clip #2 | 6.0-8.0 | 2.0-3.5 | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1-2.3
 | 9.0+ | 3.6+ |  |  |  |  | 3.0+
  1. <' background-size '> 写入缩写方式。
  2. <' background-origin '> || <' background-clip '> 写入缩写方式。

示例：


background-color

  • 版本：CSS1
  • 媒体：视觉

语法：

background-color：<color>

默认值：transparent

适用于：所有元素

继承性：无

动画性：是

计算值：指定值

取值：

<color>：
指定颜色。

说明：

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

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
transparent
RGBA, HSL, HSLA | 6.0-8.0
 | 9.0+

示例：


background-image

  • 版本：CSS1/3
  • 媒体：视觉

语法：

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

<bg-image> = <image> | none

默认值：none

适用于：所有元素

继承性：无

动画性：否

计算值：指定值

取值：

none：
无背景图。
<image>：
使用绝对或相对地址指或者创建渐变色来确定图像。

说明：

设置或检索对象的背景图像。
  • 如果设置了 <' background-image '>，同时也建议设置 <' background-color '> 用于当背景图像不可见时保持与文本颜色有一定的对比度。
  • 如果定义了多组背景图，且背景图之间有重叠，写在前面的将会盖在写在后面的图像之上。
  • 对应的脚本特性为backgroundImage。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
Multiple image 多组图像 | 6.0-8.0
 | 9.0+

示例：


background-repeat

  • 版本：CSS1/3
  • 媒体：视觉

语法：

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

<repeat-style> = repeat-x | repeat-y | [repeat | no-repeat | space | round]{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。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 3.1+ | 15.0+ | 3.2+ | 2.1+ | 18.0+
2个参数值 | 6.0-8.0 | 2.0-12.0
 | 9.0+ | 13.0+
space | round | 6.0-8.0 | 2.0-38.0
 | 9.0+

示例：


background-attachment

  • 版本：CSS1/3
  • 媒体：视觉

语法：

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

<attachment> = fixed | scroll | local

默认值：scroll

适用于：所有元素

继承性：无

动画性：否

计算值：指定值

取值：

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

说明：

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

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
local | 6.0-8.0 | 2.0-24.0
 | 9.0+ | 25.0+

示例：


background-position

  • 版本：CSS1/3
  • 媒体：视觉

语法：

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个参数值（CSS3中已允许提供3，4个值）。
  • 如果提供三或四个，每个<percentage>或<length>偏移前都必须跟着一个边界关键字（即left | right | top | bottom，不包括center），偏移量相对关键字位置进行偏移。
  • 示例：假设要定义背景图像在容器中右下方，并且距离右边和底部各有20px

    缩写方式：

    background:url(test1.jpg) no-repeat right 20px bottom 20px;
    你也可以设置3个参数值：

    拆分方式：

    background:url(test1.jpg) no-repeat left bottom 10px;

    要注意的是：设置3个或4个值，偏移量前必须有关键字。也就是说，形如："10px bottom 20px" ，这样的参数设置是错误的，因为10px前面没有关键字。

  • 如果提供两个，第一个用于横坐标，第二个用于纵坐标。
  • 如果只提供一个，该值将用于横坐标；纵坐标将默认为50%（即center）。
  • 对应的脚本特性为backgroundPosition。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
  • 灰色 = 未知
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome | Android UC
Basic Support | 6.0+ | 2.0+ | 4.0+ | 3.1+ | 15.0+ | 3.2+ | 2.1+ | 18.0+ | 7.0+
3-4个参数 以边界作参考偏移 | 6.0-8.0 | 2.0-12.0 | 4.0-24.0 | 3.1-6.1 |  | 3.2-6.1 | 2.1-4.3 | 18.0-24.0 | 7.0-9.9
 | 9.0+ | 13.0+ | 25.0+ | 7.0+ |  | 7.0+ | 4.4+ | 25.0+

示例：


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。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-8.0 | 2.0-3.5 | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1-2.3 -webkit- | 18.0+
 | 9.0+ | 3.6 -moz- |  |  |  |  | 3.0+
 |  | 4.0+

示例：


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。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-8.0 | 2.0-3.5 | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1-2.3 -webkit- | 18.0+
 | 9.0+ | 3.6 -moz- |  |  |  |  | 3.0+
 |  | 4.0+
text #1 | 6.0-11.0 | 2.0-38.0
  1. text属性值，目前为webkit only [1] [2]。

示例：


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。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-8.0 | 2.0-3.5 | 4.0-14.0 #1 | 6.0-6.1 #1 | 15.0+ | 6.0-6.1 #1 #2 | 2.1-2.3 #1 -webkit- | 18.0+
 | 9.0+ | 3.6 -moz- | 15.0+ | 7.0+ |  | 7.0+ | 3.0-4.3 #1
 |  | 4.0+ |  |  |  |  | 4.4+
  1. 不支持写入 <' background '> 缩写方式。
  2. iOS6.1及更早cover值在body上有bug；同时background-size: cover; background-attachment: fixed;配合时也有bug。

示例：


Color index

CSS3参考手册 » 属性列表 » 颜色属性
相关内容：
其它颜色属性参考 选择其它项

CSS Color Module

  • 颜色属性

色彩 Color

属性 | 版本 | 继承性 | 描述
color | CSS1 | 有 | 指定颜色。请参阅颜色值
opacity | CSS3 | 无 | 检索或设置对象的不透明度。

紫色 链接表示该属性在CSS3有修改或者增加了新的属性值；橙色 链接表示该属性是CSS3新增属性


color

  • 版本：CSS1
  • 媒体：视觉

语法：

color：<color>

默认值：由user agent决定

适用于：所有元素

继承性：有

动画性：是

计算值：指定值

取值：

<color>：
指定颜色。

说明：

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

  • color属性值被间接用来提供一个中间值 currentColor 以供其他接受颜色值的属性使用。

    示例：

    div {
    border: 10px solid;
    color: red;
}

    如上代码，没有定义边框的颜色，但定义了color的颜色为red，那么这时red将会作为一个间接值 currentColor 提供给边框颜色属性，所以最终边框色也为red。

  • 对应的脚本特性为color。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 3.1+ | 15.0+ | 3.2+ | 2.1+ | 18.0+
RGBA, HSL, HSLA, transparent | 6.0-8.0
 | 9.0+

示例：


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段代码的效果相同

  • 元素定义了值小于1的opacity，将会产生局部层叠上下文。
  • 对应的脚本特性为opacity。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-8.0 | 2.0+ | 4.0+ | 3.1+ | 15.0+ | 3.2+ | 2.1+ | 18.0+
 | 9.0+

示例：


Font index

CSS3参考手册 » 属性列表 » 字体属性
相关内容：
其它字体属性参考 选择其它项

CSS Fonts Module

  • 字体属性

字体 Font

属性 | 版本 | 继承性 | 描述
font | CSS1/2 | 有 | 复合属性。设置或检索对象中的文本特性
font-style | CSS1 | 有 | 设置或检索对象中的字体样式
font-variant | CSS1 | 有 | 设置或检索对象中的文本是否为小型的大写字母
font-weight | CSS1 | 有 | 设置或检索对象中的文本字体的粗细
font-size | CSS1 | 有 | 设置或检索对象中的字体尺寸
font-family | CSS1 | 有 | 设置或检索用于对象中文本的字体名称序列
font-stretch | CSS3 | 有 | 设置或检索对象中的文字是否横向拉伸变形。
font-size-adjust | CSS3 | 有 | 设置或检索小写字母x的高度与对象文字字号的比率。

紫色 链接表示该属性在CSS3有修改或者增加了新的属性值；橙色 链接表示该属性是CSS3新增属性


font

  • 版本：CSS1/2
  • 媒体：视觉

语法：

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。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+

示例：


font-style

  • 版本：CSS1
  • 媒体：视觉

语法：

font-style：normal | italic | oblique

默认值：normal

适用于：所有元素

继承性：有

动画性：否

计算值：指定值

取值：

normal：
指定文本字体样式为正常的字体
italic：
指定文本字体样式为斜体。对于没有设计斜体的特殊字体，如果要使用斜体外观将应用oblique
oblique：
指定文本字体样式为倾斜的字体。人为的使文字倾斜，而不是去选取字体中的斜体字

说明：

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

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+

示例：


font-variant

  • 版本：CSS1
  • 媒体：视觉

语法：

font-variant：normal | small-caps

默认值：normal

适用于：所有元素

继承性：有

动画性：否

计算值：指定值

取值：

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

说明：

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

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+

示例：


font-weight

  • 版本：CSS1
  • 媒体：视觉

语法：

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

默认值：normal

适用于：所有元素

继承性：有

动画性：是

计算值：数字重量值

取值：

normal：
正常的字体。相当于数字值400
bold：
粗体。相当于数字值700。
bolder：
定义比继承值更重的值
lighter：
定义比继承值更轻的值
<integer>：
用数字表示文本字体粗细。取值范围：100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

说明：

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

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+

示例：


font-size

  • 版本：CSS1
  • 媒体：视觉

语法：

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

<absolute-size> = xx-small | x-small | small | medium | large | x-large | xx-large

<relative-size> = smaller | larger

默认值：medium

适用于：所有元素

继承性：有

动画性：是

计算值：指定值

取值：

<absolute-size>：
根据对象字号进行调节。以 medium 作为基础参照，xx-small相当于medium 3/5 (h6)，x-small: 3/4，small: 8/9 (h5)，medium: 1 (h4)，large: 6/5 (h3)，x-large: 3/2 (h2)，xx-large: 2/1 (h1)，
<relative-size>：
相对于父对像中字号进行相对调节。使用成比例的em单位计算。
<length>：
用长度值指定文字大小。不允许负值。
<percentage>：
用百分比指定文字大小。其百分比取值是基于父对象中字体的尺寸。不允许负值。

说明：

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

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+

示例：


font-family

  • 版本：CSS1
  • 媒体：视觉

语法：

font-family：[ <family-name> | <generic-family> ] #

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

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

默认值：由user agent决定

适用于：所有元素

继承性：有

动画性：否

计算值：指定值

取值：

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

说明：

设置或检索用于对象中文本的字体名称序列。
  • 序列可包含嵌入字体。请参阅@font-face规则。
  • 一般字体引用可以不加引号，如果字体名包含了空格、数字或者符号（如连接符）则需加上引号，避免引发错误。
  • user agent会遍历定义的字体序列，直到匹配到某个字体为止。
  • 指定字体序列：

    写法：

    body { font-family: helvetica, verdana, sans-serif; }

    如上字体定义，假设你机器上没有helvetica字体，但有verdana，这时将会以verdana显示你的文字。

  • 对应的脚本特性为fontFamily。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+

示例：


font-stretch

  • 版本：CSS3
  • 媒体：视觉

语法：

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

默认值：normal

适用于：所有元素

继承性：有

动画性：是

计算值：指定值

取值：

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

说明：

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

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-8.0 | 2.0-8.0 | 4.0-43.0 | 3.1-8.1 | 15.0-28.0 | 3.2-8.1 | 2.1-4.4.4 | 18.0-40.0
 | 9.0+ #1 | 9.0+ #1
  1. 已支持font-stretch，但显示效果与正常文字并无不同。

示例：


font-size-adjust

  • 版本：CSS3
  • 媒体：视觉

语法：

font-size-adjust：none | <number>

默认值：none

适用于：所有元素

继承性：有

动画性：当值为 <number> 时

计算值：指定值

取值：

none：
不保留首选字体的 x-height
<number>：
定义字体的 aspect 值。

说明：

设置或检索对象的 aspect 值，用以保持首选字体的 x-height。
  • 字体的小写字母 "x" 的高度与字号之间的比率被称为一个字体的 aspect 值
  • 高 aspect 值的字体被设置为很小的尺寸时会更易阅读。举例：Verdana 的 aspect 值是 0.58（意味着当字体尺寸为 100px 时，它的 x-height 是 58px）。Times New Roman 的 aspect 值是 0.46。这就意味着 Verdana 在小尺寸时比 Times New Roman 更易阅读。
  • 可以使用这个公式来为可用字体推演出合适的字号：可应用到可用字体的字体尺寸 = 首选字体的字体尺寸 * （font-size-adjust 值 / 可用字体的 aspect 值）
  • 详述：如果 14px 的 Verdana（aspect 值是 0.58）不可用，但是某个可用的字体的 aspect 值是 0.46，那么替代字体的尺寸将是 14 * (0.58/0.46) = 17.65px。
  • 对应的脚本特性为fontSizeAdjust。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-11.0 | 2.0 | 4.0-43.0 | 3.1-8.1 | 15.0-28.0 | 3.2-8.1 | 2.1-4.4.4 | 18.0-40.0
 |  | 3.0+

示例：


Text index

CSS3参考手册 » 属性列表 » 文本属性
相关内容：
其它文本属性参考 选择其它项

CSS Text Module

  • 文本属性

文本 Text

属性 | 版本 | 继承性 | 描述
text-transform | CSS1/3 | 有 | 检索或设置对象中的文本的大小写
white-space | CSS1 | 有 | 设置或检索对象内空格的处理方式
tab-size | CSS3 | 有 | 检索或设置对象中的制表符的长度
word-wrap | CSS3 | 有 | 设置或检索当内容超过指定容器的边界时是否断行
overflow-wrap | CSS3 | 有 | 设置或检索当内容超过指定容器的边界时是否断行
word-break | CSS3 | 有 | 设置或检索对象内文本的字内换行行为
text-align | CSS1/3 | 有 | 设置或检索对象中内容的水平对齐方式
text-align-last | CSS3 | 有 | 设置或检索一个块内的最后一行（包括块内仅有一行文本的情况，这时既是第一行也是最后一行）或者被强制打断的行的对齐方式
text-justify | CSS3 | 有 | 设置或检索对象内调整文本使用的对齐方式
word-spacing | CSS1/3 | 有 | 检索或设置对象中的单词之间的最小，最大和最佳间隙
letter-spacing | CSS1/3 | 有 | 检索或设置对象中的字符之间的最小，最大和最佳间隙
text-indent | CSS1/3 | 有 | 检索或设置对象中的文本的缩进
vertical-align | CSS1/2 | 无 | 设置或检索对象内容的垂直对其方式
line-height | CSS1 | 有 | 检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离
text-size-adjust | CSS3 | 有 | 检索或设置移动端页面中对象文本的大小调整

紫色 链接表示该属性在CSS3有修改或者增加了新的属性值；橙色 链接表示该属性是CSS3新增属性


text-transform

  • 版本：CSS1/3
  • 媒体：视觉

语法：

text-transform：none | capitalize | uppercase | lowercase | full-width

默认值：none

适用于：所有元素

继承性：有

动画性：否

计算值：指定值

取值：

none：
无转换
capitalize：
将每个单词的第一个字母转换成大写
uppercase：
将每个单词转换成大写
lowercase：
将每个单词转换成小写
full-width：
将所有字符转换成fullwidth形式。如果字符没有相应的fullwidth形式，将保留原样。这个值通常用于排版拉丁字符和数字等表意符号。（CSS3）

说明：

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

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1+ | 18.0+
full-width | 6.0-11.0 | 2.0-18.0 | 4.0-45.0 | 6.0-8.0 | 15.0-29.0 | 6.0-8.3 | 2.1-4.4.4 | 18.0-42.0
 |  | 19.0+

示例：


white-space

  • 版本：CSS1
  • 媒体：视觉

语法：

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

默认值：normal

适用于：所有元素

继承性：有

动画性：否

计算值：指定值

取值：

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

说明：

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

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1+ | 18.0+
pre-wrap | 6.0-7.0 | 2.0 -moz- | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1+ | 18.0+
 | 8.0+ | 3.0+
pre-line | 6.0-7.0 | 2.0-3.0
 | 8.0+ | 3.5+

示例：


tab-size

  • 版本：CSS3
  • 媒体：视觉

语法：

tab-size：<integer> | <length>

默认值：8

适用于：块容器

继承性：有

动画性：当值为 <length> 时

计算值：指定值

取值：

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

说明：

检索或设置对象中的制表符的长度。
  • 该属性决定了制表符(U+0009)的宽度，整数代表空格(U+0020)的倍数(如：tab-size:4; 表示制表符宽度是4个空格的宽度)
  • 只有当 <' white-space '> 的属性值为：pre | pre-wrap时，该属性的定义才有效
  • 对应的脚本特性为tabSize。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
<integer> | 6.0-11.0 | 2.0-3.6 | 4.0-20.0 | 6.0 | 15.0+ | 6.0-6.1 | 2.1-4.3 | 18.0-19.0
 |  | 4.0-40.0 -moz- | 21.0+ | 6.1+ |  | 7.0+ | 4.4.0+ | 20.0+
<length> | 6.0-11.0 | 2.0-40.0 | 4.0-41.0 | 6.0-8.0 | 15.0-28.0 | 6.0-8.3 | 2.1-4.4.4 | 18.0-40.0
 |  |  | 42.0+ |  | 29.0+ |  |  | 41.0+

示例：


word-break

  • 版本：CSS3
  • 媒体：视觉

语法：

word-break：normal | keep-all | break-all

默认值：normal

适用于：所有元素

继承性：有

动画性：否

计算值：指定值

相关属性：<' word-wrap '>

取值：

normal：
依照亚洲语言和非亚洲语言的文本规则，允许在字内换行。
keep-all：
与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本。
break-all：
该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本，比如使连续的英文字母间断行。

说明：

设置或检索对象内文本的字内换行行为。
  • 对于解决防止页面中出现连续无意义的长字符打破布局，应该使用break-all属性值；
  • 作为IE的私有属性之一，IE5.5率先实现了 <' word-break '> ，后期被w3c采纳成标准属性；
  • 对应的脚本特性为wordBreak。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0-14.0 | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1+ | 18.0+
 |  | 15.0+
keep-all | 6.0+ | 2.0-14.0 | 4.0-45.0 | 6.0-8.0 | 15.0-29.0 | 6.0-8.3 | 2.1-4.4.4 | 18.0-42.0
 |  | 15.0+
  1. 不支持：keep-all 作为参数值。

示例：


word-wrap

  • 版本：CSS3
  • 媒体：视觉

语法：

word-wrap：normal | break-word

默认值：normal

适用于：所有元素

继承性：有

动画性：否

计算值：指定值

相关属性：<' overflow-wrap '> || <' word-break '>

取值：

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

说明：

设置或检索当内容超过指定容器的边界时是否断行。
  • 作为IE的私有属性之一，IE5.5率先实现了 <' word-wrap '> ，后期被w3c采纳成标准属性；
  • CSS3中将 <' word-wrap '> 改名为 <' overflow-wrap '>；
  • 对应的脚本特性为wordWrap。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0-3.0 | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1+ | 18.0+
 |  | 3.5+

示例：


overflow-wrap

  • 版本：CSS3/4
  • 媒体：视觉

语法：

overflow-wrap：normal | break-word

默认值：normal

适用于：所有元素

继承性：有

动画性：否

计算值：指定值

相关属性：<' word-wrap '> || <' word-break '>

取值：

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

说明：

设置或检索当内容超过指定容器的边界时是否断行。
  • CSS3中将 <' word-wrap '> 改名为 <' overflow-wrap '>；
  • 由于历史原因，当你使用 <' overflow-wrap '> 时，最好同时使用 <' word-wrap '> 作为备选，作向前兼容。
  • 对应的脚本特性为overflowWrap。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-11.0 | 2.0-40.0 | 4.0-22.0 | 6.0 | 15.0+ | 6.0-6.1 | 2.1-4.3 | 18.0-21.0
 |  |  | 23.0+ | 6.1+ |  | 7.0+ | 4.4.0+ | 22.0+

示例：


text-align

  • 版本：CSS1/3
  • 媒体：视觉

语法：

text-align：start | end | left | right | center | justify | match-parent | justify-all

默认值：start

适用于：块容器

继承性：有

动画性：否

计算值：指定值，除 match-parent 值外

取值：

left：
内容左对齐。
center：
内容居中对齐。
right：
内容右对齐。
justify：
内容两端对齐，但对于强制打断的行（被打断的这一行）及最后一行（包括仅有一行文本的情况，因为它既是第一行也是最后一行）不做处理。（CSS3）
start：
内容对齐开始边界。（CSS3）
end：
内容对齐结束边界。（CSS3）
match-parent：
这个值和 inherit 表现一致，只是该值继承的 start 或 end 关键字是针对父母的 <' direction '> 值并计算的，计算值可以是 left 和 right 。（CSS3）
justify-all：
效果等同于 justify，但还会让最后一行也两端对齐。（CSS3）

* CSS3新增属性可能存在描述错误及变更，仅供参考，持续更新

说明：

设置或检索对象中内容的水平对齐方式。
  • 块级元素的文本是一些堆叠的线框
  • 大部分浏览器要使得 <' text-align '> 的justify两端对齐生效，需要在汉字间插入有空白，如空格；
  • 块内的最后一行文本（包括块内仅有一行文本的情况，这时既是第一行也是最后一行）及被强制打断的行，其两端对齐需使用 <' text-align-last '>；
  • IE浏览器下，如果 <' text-align-last '> 要生效，必须先定义 <' text-align '> 为justify；
  • 单行两端对齐效果变得比较简单：

    css code：

    li{overflow:hidden;width:200px;height:21px;text-align:justify;text-align-last:justify;}
li:after{display:inline-block;overflow:hidden;width:100%;height:0;content:'';}

    html code：

    <ul>
    <li>我 是 谁</li>
    <li>你 又 是 谁</li>
    <li>世 界 末 日 2012</li>
</ul>

    以上代码3个li中的内容都将两端对齐

    需注意几点：
    • 所有主流浏览器都支持 text-align 的 justify 属性值；
    • text-align不处理强制打断的行，也不处理块内的最后一行，换句话说，如果块内仅有一行文本（该行既是第一行也是最后一行），这时仅设置text-align:justify无法让该行两端对齐；
    • text-align-last 是用来处理块内的最后一行和强制打断的行的，所以当要设置单行文本两端对齐时，需使用该属性；
    • 大部分浏览器要使得两端对齐生效，需在文本间插入空白，如空格（如果一行仅有2个汉字，Firefox也需在之间插入空白）；
    • 大部分浏览器尚不支持 text-align-last；
    依据上述的点，要实现单行两端对齐，可以走2个方向：
    1. 由于所有浏览器都支持 text-align 的 justify 属性值，但不全支持 text-align-last，我们可以对非IE及IE7以上浏览器使用伪对象生成额外的内容（IE7及以下浏览器不支持伪对象，使用text-align-last处理），置于第二行并将其隐藏，这时第一行文本（即要对齐的那个单行文本）可使用text-align:justify来对齐
    2. 支持 text-align-last 的浏览器，如IE, Firefox使用 text-align-last 处理，不支持的浏览器使用如上述方法处理；

    所以就目前情况来看，使用第一种方案是比较简约的，可以轻易的兼容IE5.5-10, Firefox, Chrome, Safari, Opera

    查看 css两端对齐详解 css两端对齐效果demo

  • 对应的脚本特性为textAlign。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1+ | 18.0+
start | 6.0-11.0 | 2.0+ | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1+ | 18.0+
end | 6.0-11.0 | 2.0-3.5 | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1+ | 18.0+
 |  | 3.6+
justify | 6.0-11.0 #1 | 2.0+ #2 | 4.0-40.0 #1 | 6.0+ | 15.0-27.0 #1 | 6.0+ | 2.1-4.4.4 #1 | 18.0-39.0 #1
 |  |  | 41.0+ |  | 28.0+ |  |  | 40.0+
match-parent | 6.0-11.0 | 2.0-37.0 | 4.0-41.0 | 6.0-8.0 | 15.0-27.0 | 6.0-8.3 | 2.1-4.4.4 | 18.0-40.0
justify-all | 6.0-11.0 | 2.0-37.0 | 4.0-41.0 | 6.0-8.0 | 15.0-27.0 | 6.0-8.3 | 2.1-4.4.4 | 18.0-40.0
  1. 如果要使得两端对齐生效，需要在单词之间添加空白，如空格
  2. 如果一行仅有2个汉字，较低版本的Firefox也需在之间插入空白

示例：


text-align-last

  • 版本：CSS3
  • 媒体：视觉

语法：

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

默认值：auto

适用于：块容器

继承性：有

动画性：否

计算值：指定值

取值：

auto：
无特殊对齐方式。
left：
内容左对齐。
center：
内容居中对齐。
right：
内容右对齐。
justify：
内容两端对齐。
start：
内容对齐开始边界。
end：
内容对齐结束边界。

说明：

设置或检索一个块内的最后一行（包括块内仅有一行文本的情况，这时既是第一行也是最后一行）或者被强制打断的行的对齐方式
  • 如果某一行同时也是块内的第一行或者第一行但后面紧跟着强制换行，除非显示的指定 <' text-align '> 第一行对齐方式（值 'start end'），否则 <' text-align-last '> 将会覆盖 <' text-align '>；
  • 如果auto值被指定，内容的对齐方式将依据 <' text-align '> 的设定，除非 <' text-align '> 设置为justify；
  • 作为IE的私有属性之一，IE5.5率先实现了 <' text-align-last '>，后期被w3c采纳成标准属性；
  • IE7及以下浏览器只实现了块内最后一行的对齐方式，没有处理被强制打断的行的对齐方式，从IE8开始，这两种形式的行对齐都被支持；
  • IE浏览器下，如果 <' text-align-last '> 要生效，必须先定义 <' text-align '> 为justify；
  • 查看 form表单标签名两端对齐效果demo
  • 对应的脚本特性为textAlignLast。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0-11.0 | 4.0-41.0 | 6.0-8.0 | 15.0-27.0 | 6.0-8.3 | 2.1-4.4.4 | 18.0-40.0
 |  | 12.0-37.0 -moz-
start | end | 6.0-11.0 | 2.0-11.0 | 4.0-41.0 | 6.0-8.0 | 15.0-27.0 | 6.0-8.3 | 2.1-4.4.4 | 18.0-40.0
 |  | 12.0-37.0 -moz-

示例：


text-justify

  • 版本：CSS3
  • 媒体：视觉

语法：

text-justify：auto | none | inter-word | inter-ideograph | inter-cluster | distribute | kashida

默认值：auto

适用于：块容器及某些内联元素

继承性：有

动画性：否

计算值：指定值

取值：

auto：
允许浏览器用户代理确定使用的两端对齐法则。
none：
禁止两端对齐。
inter-word：
通过增加字之间的空格对齐文本。该行为是对齐所有文本行最快的方法，它的两端对齐行为对段落的最后一行无效。
inter-ideograph：
为表意字文本提供完全两端对齐，增加或减少表意字和词间的空格。
inter-cluster：
调整文本无词间空格的行。这种模式的调整是用于优化亚洲语言文档的
distribute：
通过增加或减少字或字母之间的空格对齐文本，适用于东亚文档，尤其是泰国。
kashida：
通过拉长选定点的字符调整文本。这种调整模式是特别为阿拉伯脚本语言提供的。需要IE5.5+支持

说明：

设置或检索对象内调整文本使用的对齐方式。
  • 因为这个属性影响文本布局，所以 <' text-align '> 属性必须被设置为justify。
  • 对应的脚本特性为textJustify。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-11.0 #1 | 2.0-37.0 | 4.0-41.0 | 6.0-8.0 | 15.0-27.0 | 6.0-8.3 | 2.1-4.4.4 | 18.0-40.0
  1. 不支持：none

示例：


word-spacing

  • 版本：CSS1/3
  • 媒体：视觉

语法：

word-spacing：normal | <length> | <percentage>

默认值：normal

适用于：所有元素

继承性：有

动画性：非normal值时

计算值：指定值

相关属性：<' letter-spacing '>

取值：

normal：
默认间隔
<length>：
用长度值指定间隔。可以为负值。
<percentage>：
用百分比指定间隔。可以为负值。（CSS3）

说明：

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

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1+ | 18.0+
<percentage> | 6.0-11.0 | 2.0-37.0 | 4.0-41.0 | 6.0-8.0 | 15.0-27.0 | 6.0-8.3 | 2.1-4.4.4 | 18.0-40.0

示例：


letter-spacing

  • 版本：CSS1/3
  • 媒体：视觉

语法：

letter-spacing：normal | <length> | <percentage>

默认值：normal

适用于：所有元素

继承性：有

动画性：非normal值时

计算值：指定值

相关属性：<' word-spacing '>

取值：

normal：
默认间隔
<length>：
用长度值指定间隔。可以为负值。
<percentage>：
用百分比指定间隔。可以为负值。（CSS3）

说明：

检索或设置对象中的字符之间的最小，最大和最佳间隙。
  • 该属性将指定的间隔添加到每个文字(包括单词内的每个字母)之后；
  • <' letter-spacing '> 不能被应用于一行的开始和结束；
  • 对应的脚本特性为letterSpacing。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1+ | 18.0+
<percentage> | 6.0-11.0 | 2.0-37.0 | 4.0-41.0 | 6.0-8.0 | 15.0-27.0 | 6.0-8.3 | 2.1-4.4.4 | 18.0-40.0

示例：


text-indent

  • 版本：CSS1/3
  • 媒体：视觉

语法：

text-indent：[ <length> | <percentage> ] && hanging? && each-line?

默认值：0

适用于：块容器

继承性：有

动画性：当使用值为非关键字时

计算值：指定值

取值：

<length>：
用长度值指定文本的缩进。可以为负值。
<percentage>：
用百分比指定文本的缩进。可以为负值。
each-line：
定义缩进作用在块容器的第一行或者内部的每个强制换行的首行，软换行不受影响。（CSS3）
hanging：
反向所有被缩进作用的行。（CSS3）

说明：

检索或设置对象中的文本的缩进。
  • 内联对象要使用该属性必须先使该对象表现为块级或内联块级。
  • hanging和each-line关键字紧随在缩进数值之后

    示例代码：

    div{text-indent:2em each-line;}

    以上代码将使得div内部的第一行及每个强制换行的首行都拥有2em的缩进

  • 对应的脚本特性为textIndent。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1+ | 18.0+
hanging | each-line | 6.0-11.0 | 2.0-37.0 | 4.0-41.0 | 6.0-8.0 | 15.0-27.0 | 6.0-8.3 | 2.1-4.4.4 | 18.0-40.0

示例：


vertical-align

  • 版本：CSS1/2
  • 媒体：视觉

语法：

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

默认值：baseline

适用于：内联级与 table-cell 元素

继承性：无

动画性：当值为 <length> 时

计算值：指定值

取值：

baseline：
把当前盒的基线与父级盒的基线对齐。如果该盒没有基线，就将底部外边距的边界和父级的基线对齐
sub：
把当前盒的基线降低到合适的位置作为父级盒的下标（该值不影响该元素文本的字体大小）
super：
把当前盒的基线提升到合适的位置作为父级盒的上标（该值不影响该元素文本的字体大小）
text-top：
把当前盒的top和父级的内容区的top对齐
text-bottom：
把当前盒的bottom和父级的内容区的bottom对齐
middle：
把当前盒的垂直中心和父级盒的基线加上父级的半x-height对齐
top：
把当前盒的top与行盒的top对齐
bottom：
把当前盒的bottom与行盒的bottom对齐
<percentage>：
把当前盒提升（正值）或者降低（负值）这个距离，百分比相对line-height计算。当值为0%时等同于baseline。
<length>：
把当前盒提升（正值）或者降低（负值）这个距离。当值为0时等同于baseline。（CSS2）

说明：

设置或检索内联元素在行框内的垂直对其方式。
  • 对应的脚本特性为verticalAlign。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1+ | 18.0+

示例：


line-height

  • 版本：CSS1
  • 媒体：视觉

语法：

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

默认值：normal

适用于：所有元素

继承性：有

动画性：当值为 <length> | <number> 时

计算值：指定值

取值：

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

说明：

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

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1+ | 18.0+

示例：


text-size-adjust

  • 版本：CSS3
  • 媒体：视觉

语法：

text-size-adjust：auto | none | <percentage>

默认值：auto

适用于：所有元素

继承性：有

动画性：当取值为<percentage>时

计算值：指定值

取值：

auto：
文本大小根据设备尺寸进行调整。
none：
文本大小不会根据设备尺寸进行调整。
<percentage>：
用百分比来指定文本大小在设备尺寸不同的情况下如何调整。

说明：

检索或设置移动端页面中对象文本的大小调整。
  • 该属性只在移动设备上生效；
  • 如果你的页面没有定义meta viewport，此属性定义将无效；
  • 对应的脚本特性为textSizeAdjust。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-11.0 | 2.0-40.0 | 4.0-45.0 | 6.0-8.0 | 15.0-29.0 | 6.0-8.3 -webkit- | 2.1-4.4.4 | 18.0-42.0

示例：


Text Decoration index

CSS3参考手册 » 属性列表 » 文本装饰属性
相关内容：
其它文本装饰属性 选择其它项

CSS Text Decoration Module

  • 文本装饰属性

文本装饰 Text Decoration

属性 | 版本 | 继承性 | 描述
text-decoration | CSS1/3 | 无 | 复合属性。检索或设置对象中的文本的装饰。
text-decoration-line | CSS3 | 无 | 检索或设置对象中的文本装饰线条的位置。
text-decoration-color | CSS3 | 无 | 检索或设置对象中的文本装饰线条的颜色。
text-decoration-style | CSS3 | 无 | 检索或设置对象中的文本装饰线条的形状。
text-decoration-skip | CSS3 | 有 | 检索或设置对象中的文本装饰线条必须略过内容中的哪些部分。
text-underline-position | CSS3 | 有 | 检索或设置对象中的下划线的位置。
text-shadow | CSS3 | 有 | 设置或检索对象中文本的文字是否有阴影及模糊效果

紫色 链接表示该属性在CSS3有修改或者增加了新的属性值；橙色 链接表示该属性是CSS3新增属性


text-decoration

  • 版本：CSS1/3
  • 媒体：视觉

语法：

text-decoration：<' text-decoration-line '> || <' text-decoration-style '> || <' text-decoration-color '>

默认值：看每个独立属性

适用于：所有元素

继承性：无

动画性：看每个独立属性

计算值：看每个独立属性

相关属性：<' text-decoration-skip '> || <' text-underline-position '>

取值：

<' text-decoration-line '>：
指定文本装饰的种类。相当于CSS2.1的 <' text-decoration '> 属性，可取值：none | underline | overline | line-through | blink
<' text-decoration-style '>：
指定文本装饰的样式。
<' text-decoration-color '>：
指定文本装饰的颜色。

说明：

复合属性。检索或设置对象中的文本的装饰。
  • 所有浏览器均支持CSS2.1中的 <' text-decoration '> 属性，在CSS3中，该属性定义被移植到其新的分解属性 <' text-decoration-line '> 上；
  • 对应的脚本特性为textDecoration。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1+ | 18.0+
CSS3复合属性 | 6.0-11.0 | 2.0-5.0 | 4.0-45.0 | 6.0-7.0 | 15.0-29.0 | 6.0-7.1 | 2.1-4.4.4 | 18.0-42.0
 |  | 6.0-35.0-moz- |  | 7.1-8.0-webkit-#1 |  | 8.0-8.3-webkit-#1
 |  | 36.0+
  1. 支持 <' text-decoration-style '> 写入 <' text-decoration '> 缩写方式，但其dotted | dashed属性值会表现为实线。

示例：


text-decoration-line

  • 版本：CSS3
  • 媒体：视觉

语法：

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

默认值：none

适用于：所有元素

继承性：无

动画性：否

计算值：指定的值

取值：

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

说明：

检索或设置对象中的文本装饰线条的位置。
  • 相当于CSS2.1的 <' text-decoration '> 属性
  • 需要注意的是大部分浏览器都不支持blink值，因为规范允许用户代理忽略该效果；
  • 对应的脚本特性为textDecorationLine。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-11.0 | 2.0-5.0 | 4.0-45.0 | 6.0-7.0 | 15.0-29.0 | 6.0-7.1 | 2.1-4.4.4 | 18.0-42.0
 |  | 6.0-35.0-moz- |  | 7.1-8.0-webkit- |  | 8.0-8.3-webkit-
 |  | 36.0+

示例：


text-decoration-color

  • 版本：CSS3
  • 媒体：视觉

语法：

text-decoration-color：<color>

默认值：采用文本颜色

适用于：所有元素

继承性：无

动画性：是

计算值：计算后颜色值

取值：

<color>：
指定颜色。

说明：

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

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-11.0 | 2.0-5.0 | 4.0-45.0 | 6.0-7.0 | 15.0-29.0 | 6.0-7.1 | 2.1-4.4.4 | 18.0-42.0
 |  | 6.0-35.0-moz- |  | 7.1-8.0-webkit- |  | 8.0-8.3-webkit-
 |  | 36.0+

示例：


text-decoration-style

  • 版本：CSS3
  • 媒体：视觉

语法：

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

默认值：solid

适用于：所有元素

继承性：无

动画性：否

计算值：指定的值

取值：

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

说明：

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

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-11.0 | 2.0-5.0 | 4.0-45.0 | 6.0-7.0 | 15.0-29.0 | 6.0-7.1 | 2.1-4.4.4 | 18.0-42.0
 |  | 6.0-35.0-moz- |  | 7.1-8.0-webkit-#1 |  | 8.0-8.3-webkit-#1
 |  | 36.0+
  1. 支持dotted | dashed属性值，但效果都表现为实线。

示例：


text-decoration-skip

  • 版本：CSS3
  • 媒体：视觉

语法：

text-decoration-skip：none | [ objects || spaces || ink || edges || box-decoration ]

默认值：objects

适用于：所有元素

继承性：是

动画性：否

计算值：指定的值

取值：

none：
不略过：文本装饰将绘制在所有文本内容及行内盒上。
objects：
略过原子内联元素（例如图片或内联块）
spaces：
略过空白：包括常规空白（U+0020）、制表符（U+0009）以及不间断空格（U+00A0）、表意空格（U+3000）、所有固定宽度空格（U+2000至U+200A、U+202F和U+205F）、以及相邻的字母间隔或单词间隔。
ink：
略过字符绘制处：中断装饰线，以显示文本装饰件将穿过该字形的文本。用户代理可能还会在该字形轮廓的两侧额外的略过一段距离。
edges：
用户代理应当将装饰线的起始、结束位置放置于较所装饰元素的内容边缘更靠内的位置，使得诸如两个紧密相邻的元素的下划线不会显示为一条下划线。（这在中文里很重要，对于中文，下划线是一种标点符号。）
box-decoration：
略过盒子的margin,border,padding区域。需要注意的是，这只针对祖先的装饰效果，装饰盒不会绘制自身的装饰。

说明：

检索或设置对象中的文本装饰线条必须略过内容中的哪些部分。
  • 对应的脚本特性为textDecorationSkip。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-11.0 | 2.0-40.0 | 4.0-45.0 | 6.0-7.0 | 15.0-29.0 | 6.0-7.1 | 2.1-4.4.4 | 18.0-42.0
 |  |  |  | 7.1-8.0-webkit-#1 |  | 8.0-8.3-webkit-#1
  1. 支持该属性，但未实现效果。

示例：


text-underline-position

  • 版本：CSS3
  • 媒体：视觉

语法：

text-underline-position：auto | [ under || [ left | right ] ]

默认值：auto

适用于：所有元素

继承性：是

动画性：否

计算值：特定值

取值：

auto：
用户代理可能会使用任意算法确定下划线的位置。
under：
下划线的定位与元素内容盒子的下边缘相关
left：
下划线的定位与元素内容盒子的左边缘相关
right：
下划线的定位与元素内容盒子的右边缘相关

说明：

检检索或设置对象中的下划线的位置。
  • 对应的脚本特性为textUnderlinePosition。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-11.0 | 2.0-40.0 | 4.0-45.0 | 6.0-7.0 | 15.0-29.0 | 6.0-7.1 | 2.1-4.4.4 | 18.0-42.0
 |  |  |  | 7.1-8.0-webkit-#1 |  | 8.0-8.3-webkit-#1
  1. 支持auto | under属性值，但未实现效果。


text-shadow

  • 版本：CSS3
  • 媒体：视觉

语法：

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

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

默认值：none

适用于：所有元素

继承性：有

动画性：是

计算值：1个颜色加3个绝对长度

取值：

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

说明：

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

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-9.0 | 2.0-3.0 | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1+ | 18.0+
 | 10.0+ | 3.5+

示例：


Writing Modes index

CSS3参考手册 » 属性列表 » 书写模式属性
相关内容：
其它书写模式参考 选择其它项

CSS Writing Modes Module

  • 书写模式属性

书写模式 Writing Modes

属性 | 版本 | 继承性 | 描述
direction | CSS2 | 有 | 检索或设置文本流的方向
unicode-bidi | CSS2 | 无 | 用于同一个页面里存在从不同方向读进的文本显示。与 <' direction '> 属性一起使用
writing-mode | CSS3 | 有 | 设置或检索对象的内容块固有的书写方向

紫色 链接表示该属性在CSS3有修改或者增加了新的属性值；橙色 链接表示该属性是CSS3新增属性


direction

  • 版本：CSS2
  • 媒体：视觉

语法：

direction：ltr | rtl

默认值：ltr

适用于：所有元素

继承性：有

动画性：否

计算值：特定值

取值：

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

说明：

检索或设置文本流的方向。
  • 当指定一个内联元素的 <' unicode-bidi '> 属性为normal时， <' direction '> 属性设置不影响bidi重排序，即其设置不生效。
  • 对应的脚本特性为direction。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1+ | 18.0+

示例：


unicode-bidi

  • 版本：CSS2
  • 媒体：视觉

语法：

unicode-bidi：normal | embed | bidi-override | isolate | isolate-override | plaintext

默认值：normal

适用于：所有元素

继承性：无

动画性：否

计算值：特定值

取值：

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

说明：

用于同一个页面里存在从不同方向读进的文本显示。与 <' direction '> 属性一起使用
  • 对应的脚本特性为unicodeBidi。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1+ | 18.0+

示例：


writing-mode

  • 版本：CSS3
  • 媒体：视觉

语法：

writing-mode：horizontal-tb | vertical-rl | vertical-lr | lr-tb | tb-rl

默认值：horizontal-tb

适用于：除 <' display '> 属性定义为table-row-group | table-column-group | table-row | table-column之外的所有元素

继承性：有

动画性：否

计算值：特定值

取值：

horizontal-tb：
水平方向自上而下的书写方式。即 left-right-top-bottom（类似IE私有值lr-tb）
vertical-rl：
垂直方向自右而左的书写方式。即 top-bottom-right-left（类似IE私有值tb-rl）
vertical-lr：
垂直方向自左而右的书写方式。即 top-bottom-left-right
lr-tb：
左-右，上-下。对象中的内容在水平方向上从左向右流入，后一行在前一行的下面。 所有的字形都是竖直向上的。这种布局是罗马语系使用的（IE）
tb-rl：
上-下，右-左。对象中的内容在垂直方向上从上向下流入，自右向左。后一竖行在前一竖行的左面。全角字符是竖直向上的，半角字符如拉丁字母或片假名顺时针旋转90度。这种布局是东亚语系通常使用的（IE）

说明：

设置或检索对象的内容块固有的书写方向。西方语言一般都是 lr-tb 的书写方式，但是亚洲语言 lr-tb | tb-rl 的书写方式都有。
  • 作为IE的私有属性之一，IE5.5率先实现了 writing-mode ，后期被w3c采纳成标准属性；
  • 此属性效果不能被累加使用。例如，父对象的此属性值设为 tb-rl ，子对象再设置该属性将不起作用，仍应用父对象的设置。
  • 对应的脚本特性为writingMode。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-11.0#1 #2 | 2.0-40.0 | 4.0-27.0 | 6.0-8.0-webkit- | 15.0-27.0-webkit- | 6.0-8.3-webkit- | 2.1-3.0 | 18.0-26.0
 |  | 41.0+ | 28.0-41.0-webkit- |  |  |  | 4.0-4.4.4-webkit- | 27.0-40.0-webkit-
  1. 不支持标准属性：horizontal-tb | vertical-rl | vertical-lr
  2. 支持自带的私有属性值：lr-tb | tb-rl

示例：


List index

CSS3参考手册 » 属性列表 » 列表属性
相关内容：
其它列表属性参考 选择其它项

CSS Lists Module

  • 列表属性

列表 List

属性 | 版本 | 继承性 | 描述
list-style | CSS1 | 有 | 复合属性。设置列表项目相关内容
list-style-image | CSS1 | 有 | 设置或检索作为对象的列表项标记的图像
list-style-position | CSS1 | 有 | 设置或检索作为对象的列表项标记如何根据文本排列
list-style-type | CSS1/2 | 有 | 设置或检索对象的列表项所使用的预设标记

紫色 链接表示该属性在CSS3有修改或者增加了新的属性值；橙色 链接表示该属性是CSS3新增属性


list-style

  • 版本：CSS1
  • 媒体：视觉

语法：

list-style：<' list-style-type '> || <' list-style-position '> || <' list-style-image '>

默认值：看独立属性自身

适用于：所有 <' display '> 设置为list-item的元素

继承性：有

动画性：否

计算值：看独立属性自身

取值：

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

说明：

复合属性。设置列表项目相关内容
  • 需要注意的是，如果使用 <' list-style '> 复合属性，<' list-style-image '> 属性必须放在最后，否则部分浏览器（包括所有的webkit/blink内核浏览器）将会解析出错。
  • 对应的脚本特性为listStyle。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1+ | 18.0+

示例：


list-style-image

  • 版本：CSS1
  • 媒体：视觉

语法：

list-style-image：none | <url>

默认值：none

适用于：所有 <' display '> 设置为list-item的元素

继承性：有

动画性：否

计算值：图像计算值或none

取值：

none：
不指定图像，默认内容标记将被 <' list-style-type '> 代替。
<url>：
使用绝对或相对地址指定列表项标记图像。如果图像地址无效，默认内容标记将被 <' list-style-type '> 代替。

说明：

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

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1+ | 18.0+

示例：


list-style-position

  • 版本：CSS1
  • 媒体：视觉

语法：

list-style-position：outside | inside

默认值：outside

适用于：所有 <' display '> 设置为list-item的元素

继承性：有

动画性：否

计算值：特定值

取值：

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

说明：

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

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1+ | 18.0+

示例：


list-style-type

  • 版本：CSS1/2
  • 媒体：视觉

语法：

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

适用于：所有 <' display '> 设置为list-item的元素

继承性：有

动画性：否

计算值：特定值

取值：

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。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1+ | 18.0+

示例：


Table index

CSS3参考手册 » 属性列表 » 表格属性
相关内容：
其它表格属性参考 选择其它项

CSS tables Module

  • 表格属性

表格 Table

属性 | 版本 | 继承性 | 描述
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

适用于：table系元素

继承性：有

动画性：否

计算值：指定值

取值：

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

说明：

设置或检索表格的布局算法。
  • 通常fixed算法会比auto算法高效，尤其是对于那些长表格来说。fixed算法使得表格可以像其它元素一样一行一行的渲染。
  • 对应的脚本特性为tableLayout。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1+ | 18.0+

示例：


border-collapse

  • 版本：CSS2
  • 媒体：视觉

语法：

border-collapse：separate | collapse

默认值：separate

适用于：table系元素

继承性：有

动画性：否

计算值：指定值

取值：

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

说明：

设置或检索表格的行和单元格的边是合并还是独立。
  • 只有当表格边框独立（即 <' border-collapse '> 属性等于separate时）， <' border-spacing '> 和 <' empty-cells '> 才起作用。
  • 对应的脚本特性为borderCollapse。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1+ | 18.0+

示例：


border-spacing

  • 版本：CSS2
  • 媒体：视觉

语法：

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

默认值：0

适用于：table系元素

继承性：有

动画性：否

计算值：两个绝对长度值

取值：

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

说明：

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

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-7.0 | 2.0+ | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1+ | 18.0+
 | 8.0+

示例：


caption-side

  • 版本：CSS2
  • 媒体：视觉

语法：

caption-side：top | bottom

默认值：top

适用于：table系元素

继承性：无

动画性：否

计算值：指定值

取值：

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

说明：

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

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-7.0 | 2.0+ | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1+ | 18.0+
 | 8.0+

示例：


empty-cells

  • 版本：CSS2
  • 媒体：视觉

语法：

empty-cells：hide | show

默认值：show

适用于：table系元素

继承性：有

动画性：否

计算值：指定值

取值：

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

说明：

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

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-7.0 | 2.0+ | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1+ | 18.0+
 | 8.0+

示例：


Content index

CSS3参考手册 » 属性列表 » 内容属性
相关内容：
其它内容属性参考 选择其它项

CSS3 Generated and Replaced Content Module

  • 内容属性

内容 Content

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

紫色 链接表示该属性在CSS3有修改或者增加了新的属性值；橙色 链接表示该属性是CSS3新增属性


content

  • 版本：CSS2
  • 继承性：无

语法：

content：[ [<uri> | icon] ',' ]* [ normal | none | inhibit | <content-list> ]

<content-list> = [ pending(<identifier>) | <string> | contents | footnote | endnote | section-note | list-item | <counter> | <named-string> | open-quote | close-quote | no-open-quote | no-close-quote | icon | <glyph> | <uri> | <datetime> | document-url | <target> ]+

<counter> = counter(name) | counter(name,list-style-type) | counters(name,string) | counters(name,string,list-style-type)

默认值：normal

适用于：所有元素，::before, ::after, ::alternate, ::marker, ::line-marker, margin areas, @footnote areas

继承性：无

动画性：否

计算值：指定值

取值：

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。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-7.0 | 2.0+ | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1+ | 18.0+
 | 8.0+

示例：


counter-increment

  • 版本：CSS2
  • 继承性：无

语法：

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

默认值：none

适用于：所有元素，::before, ::after, ::alternate, ::marker, ::line-marker, margin areas, @footnote areas, and @page context

继承性：无

动画性：否

计算值：指定值

取值：

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

说明：

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

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-7.0 | 2.0+ | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1+ | 18.0+
 | 8.0+

示例：


counter-reset

  • 版本：CSS2
  • 继承性：无

语法：

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

默认值：none

适用于：所有元素，::before, ::after, ::alternate, ::marker, ::line-marker, margin areas, @footnote areas, and @page context

继承性：无

动画性：否

计算值：指定值

取值：

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

说明：

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

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-7.0 | 2.0+ | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1+ | 18.0+
 | 8.0+

示例：


quotes

  • 版本：CSS2
  • 继承性：有

语法：

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

默认值：none

适用于：所有元素，::before, ::after, ::alternate, ::marker, ::line-marker, margin areas, @footnote areas, and @page context

继承性：有

动画性：否

计算值：指定值

取值：

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

说明：

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

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-7.0 | 2.0+ | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1+ | 18.0+
 | 8.0+

示例：


User Interface index

CSS3参考手册 » 属性列表 » 用户界面属性
相关内容：
其它用户界面属性 选择其它项

CSS Basic User Interface Module

  • 用户界面属性

用户界面 User Interface

属性 | 版本 | 继承性 | 描述
appearance | CSS3 | 无 | 设置或检索外观按照本地默认样式
text-overflow | CSS3 | 无 | 当块容器overflow为非visible时，定义内联内容溢出其块容器是否截断或者添加(...)及自定义字符
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 | CSS3 | 有 | 设置或检索对象的缩放比例。
box-sizing | CSS3 | 无 | 设置或检索对象的盒模型组成模式。
resize | CSS3 | 无 | 设置或检索对象的区域是否允许用户缩放，调节元素尺寸大小。
ime-mode | CSS3 | 无 | 设置或检索是否允许用户激活输入中文，韩文，日文等的输入法（IME）状态。
user-select | CSS3 | 无 | 设置或检索是否允许用户选中文本。
pointer-events | CSS3 | 有 | 设置或检索在何时成为属性事件的target。

紫色 链接表示该属性在CSS3有修改或者增加了新的属性值；橙色 链接表示该属性是CSS3新增属性


appearance

  • 版本：CSS3
  • 继承性：无

语法：

appearance：none | button | button-bevel ...

默认值：none

适用于：所有元素

继承性：无

动画性：否

计算值：指定值

取值：

none：
去除系统默认appearance的样式
button：
以按钮的风格渲染
button-arrow-down：
button-arrow-next：
button-arrow-previous：
button-arrow-up：
button-bevel：
button-focus：
caps-lock-indicator：
caret：
checkbox：
以复选框的风格渲染
checkbox-container：
checkbox-label：
checkmenuitem：
default-button：
dualbutton：
groupbox：
listbox：
以列表框的风格渲染
listitem：
以列表项的风格渲染
media-fullscreen-button：
media-mute-button：
media-play-button：
media-seek-back-button：
media-seek-forward-button：
media-slider：
media-sliderthumb：
menuarrow：
menubar：
menucheckbox：
menuimage：
menuitem：
menuitemtext：
menulist：
menulist-button：
menulist-text：
menulist-textfield：
menupopup：
menuradio：
menuseparator：
meterbar：
meterchunk：
progressbar：
以进度条的风格渲染
progressbar-vertical：
以垂直进度条的风格渲染
progresschunk：
以进度块的风格渲染
progresschunk-vertical：
以垂直进度块的风格渲染
push-button：
radio：
以单选框的风格渲染
radio-container：
radio-label：
radiomenuitem：
resizer：
resizerpanel：
scale-horizontal：
scalethumbend：
scalethumb-horizontal：
scalethumbstart：
scalethumbtick：
scalethumb-vertical：
scale-vertical：
scrollbarbutton-up：
以滚动条按钮-上的风格渲染
scrollbarbutton-right：
以滚动条按钮-右的风格渲染
scrollbarbutton-down：
以滚动条按钮-下的风格渲染
scrollbarbutton-left：
以滚动条按钮-左的风格渲染
scrollbargripper-horizontal：
scrollbargripper-vertical：
scrollbarthumb-horizontal：
以水平滚动条滑块的风格渲染
scrollbarthumb-vertical：
以垂直滚动条滑块的风格渲染
scrollbartrack-horizontal：
以水平滚动条拖动区域的风格渲染
scrollbartrack-vertical：
以垂直滚动条拖动区域的风格渲染
searchfield：
以搜索框的风格渲染
searchfield-cancel-button：
以搜索框取消按钮的风格渲染
searchfield-decoration：
searchfield-results-button：
searchfield-results-decoration：
separator：
sheet：
slider-horizontal：
sliderthumb-horizontal：
sliderthumb-vertical：
slider-vertical：
spinner：
spinner-downbutton：
spinner-textfield：
spinner-upbutton：
splitter：
square-button：
statusbar：
statusbarpanel：
tab：
以照选项卡标签的风格渲染
tabpanel：
以照选项卡区域的风格渲染
tabpanels：
tab-scroll-arrow-back：
tab-scroll-arrow-forward：
textarea：
以多行文本框的风格渲染
textfield：
以单行行文本框的风格渲染
textfield-multiline：
toolbar：
toolbarbutton：
toolbarbutton-dropdown：
toolbargripper：
toolbox：
tooltip：
以气泡提示的风格渲染
treeheader：
treeheadercell：
treeheadersortarrow：
treeitem：
treeline：
treetwisty：
treetwistyopen：
treeview：

说明：

设置或检索外观按照本地默认样式
  • 如果你想去除元素本身的外观并进行自定义，可以设置为none
  • 对应的脚本特性为appearance。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-11.0 | 2.0-40.0-moz- | 4.0-45.0-webkit- | 6.0-8.0-webkit- | 15.0-29.0-webkit- | 6.0-8.3-webkit- | 2.1-4.4.4-webkit- | 18.0-42.0-webkit-

示例：


text-overflow

  • 版本：CSS3
  • 媒体：视觉

语法：

text-overflow：clip | ellipsis

默认值：clip

适用于：块级容器元素

继承性：无

动画性：否

计算值：指定值

取值：

clip：
当内联内容溢出块容器时，将溢出部分裁切掉。
ellipsis：
当内联内容溢出块容器时，将溢出部分替换为（...）。

说明：

当块容器 <' overflow '> 为非visible时，定义内联内容溢出其块容器是否截断或者添加(...)及自定义字符
  • 要使得 <' text-overflow '> 属性生效，块容器必须显式定义 <' overflow '> 为非visible值，同时显式或者隐式的定义 <' width '> 为非auto值， <' white-space '> 为nowrap值。

    用代码来解释这段话：

    case 1：

    <style> .demo p{overflow:hidden;width:200px;white-space:nowrap;text-overflow:ellipsis;} </style> <div class="demo"> <p>这是一句非常非常长的话，被用来做text-overflow属性测试。</p> </div>

    case 1，我们将text-overflow生效必备的3个属性： <' overflow '> , <' width '> 和 <' white-space '> 都直接定义在了内联内容的父级块容器上

    case 2：

    <style> .demo{width:200px;white-space:nowrap;} .demo p{overflow:hidden;text-overflow:ellipsis;} </style> <div class="demo"> <p>这是一句非常非常长的话，被用来做text-overflow属性测试。</p> </div>

    case 2，我们将 <' width '> 和 <' white-space '> 定义在了更外层的块容器上，但case 1和case 2的效果是一样的。因为这2个属性可以被继承

  • 对应的脚本特性为textOverflow。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0-6.0 | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1+ | 18.0+
 |  | 7.0+

示例：


outline

  • 版本：CSS2
  • 媒体：视觉，互动

语法：

outline：<' outline-width '> || <' outline-style '> || <' outline-color '>

默认值：看每个独立属性

适用于：所有元素

继承性：无

动画性：看每个独立属性

计算值：看每个独立属性

相关属性: <' outline-offset '>

取值：

<' outline-width '>：
指定轮廓边框的宽度。
<' outline-style '>：
指定轮廓边框的样式。
<' outline-color '>：
指定轮廓边框的颜色。

说明：

复合属性。设置或检索对象外的线条轮廓。outline画在 <' border '> 外面
  • outlines相关属性不占据布局空间，不会影响元素的尺寸；
  • outlines可能是非矩形；
  • 不允许类似 <' border '> 属性那样能将自身拆分为 <' border-top '> , <' border-right '> , <' border-bottom '> , <' border-left '>
  • 对应的脚本特性为outline。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-7.0 | 2.0+ | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1+ | 18.0+
 | 8.0+

示例：


outline-width

  • 版本：CSS2
  • 媒体：视觉，互动

语法：

outline-width：<length> | thin | medium | thick

默认值：medium

适用于：所有元素

继承性：无

动画性：当取值为<length>时

计算值：绝对长度；如果 <' outline-style '> 的值为none时，则计算值为0

取值：

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

说明：

设置或检索对象外的线条轮廓的宽度。参阅 <' outline '> 属性。
  • outlines相关属性不占据布局空间，不会影响元素的尺寸；
  • outlines可能是非矩形；
  • 不允许类似 <' border-width '> 属性那样能将自身拆分为 <' border-top-width '> , <' border-right-width '> , <' border-bottom-width '> , <' border-left-width '>
  • 对应的脚本特性为outlineWidth。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-7.0 | 2.0+ | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1+ | 18.0+
 | 8.0+

示例：


outline-color

  • 版本：CSS2
  • 媒体：视觉，互动

语法：

outline-color：<color> | invert

默认值：invert

适用于：所有元素

继承性：无

动画性：当取值为<color>时

计算值：invert; 当指定为半透明时则对应一个rgba()计算值；如果非半透明值则对应一个rgb()计算值，transparent对应rgb(0,0,0,0)

取值：

<color>：
指定颜色。
invert：
使用背景色的反色。该参数值目前仅在IE及Opera下有效

说明：

设置或检索对象外的线条轮廓的颜色。参阅 <' outline '> 属性。
  • outlines相关属性不占据布局空间，不会影响元素的尺寸；
  • outlines可能是非矩形；
  • 不允许类似 <' border-color'> 属性那样能将自身拆分为 <' border-top-color'>, <' border-right-color'>, <' border-bottom-color'>, <' border-left-color '>
  • 对应的脚本特性为outlineColor。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-7.0 | 2.0+ | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1+ | 18.0+
 | 8.0+

示例：


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 '> 属性。
  • outlines相关属性不占据布局空间，不会影响元素的尺寸；
  • outlines可能是非矩形；
  • 不允许类似 <' border-style '> 属性那样能将自身拆分为 <' border-top-style '> , <' border-right-style '> , <' border-bottom-style '> , <' border-left-style '>
  • 对应的脚本特性为outlineStyle。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-7.0 | 2.0+ | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1+ | 18.0+
 | 8.0+

示例：


outline-offset

  • 版本：CSS2
  • 媒体：视觉，互动

语法：

outline-offset：<length>

默认值：0

适用于：所有元素

继承性：无

动画性：当取值为<length>时

计算值：绝对长度

取值：

<length>：
用长度值来定义轮廓偏移。允许负值。

说明：

设置或检索对象外的线条轮廓偏移容器的值。参阅 <' outline '> 属性。
  • outlines相关属性不占据布局空间，不会影响元素的尺寸；
  • outlines可能是非矩形；
  • outline-offset是以border边界作为参考点的，从0开始，正值从border边界往外延，负值从border边界往里缩。
  • 对应的脚本特性为outlineOffset。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-11.0 | 2.0+ | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1+ | 18.0+

示例：


nav-index

  • 版本：CSS3
  • 媒体：互动

语法：

nav-index：auto | <number>

默认值：auto

适用于：所有 enabled 的元素

继承性：无

动画性：否

计算值：指定值

相关属性: <' nav-up '> || <' nav-right '> || <' nav-down '> || <' nav-left '>

取值：

auto：
元素的导航焦点顺序由客户端自动分配。
<number>：
用浮点数来定义元素的导航焦点顺序。若某元素的该值等于1则意味着该元素最先被导航。当若干个元素的nav-index值相同时，则按照文档的先后顺序进行导航。

说明：

设置或检索对象的导航顺序。
  • 该属性是HTML4/XHTML1中标签属性tabindex的替代品。
  • 只有支持nav-index属性的元素才能参与导航排序。
  • 被禁用的元素将不参与导航排序。
  • 该属性有被w3c标准移除的风险。
  • 对应的脚本特性为navIndex。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-11.0 | 2.0-40.0 | 4.0-45.0 | 6.0-8.0 | 15.0-29.0 | 6.0-8.3 | 2.1-4.4.4 | 18.0-42.0

示例：


nav-up

  • 版本：CSS3
  • 媒体：互动

语法：

nav-up：auto | <id> [ current | root | <target-name> ]?

默认值：auto

适用于：所有 enabled 的元素

继承性：无

动画性：否

计算值：指定值

相关属性: <' nav-index '> || <' nav-right '> || <' nav-down '> || <' nav-left '>

取值：

auto：
默认顺序。
<id>：
被导航元素的id。
<target-name>：
框架目标页面之间的元素焦点导航。

说明：

设置或检索对象的导航方向。
  • 只有支持nav-index属性的元素才能参与导航排序。
  • 被禁用的元素将不参与导航排序。
  • 该属性有被w3c标准移除的风险。
  • 对应的脚本特性为navUp。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-11.0 | 2.0-40.0 | 4.0-45.0 | 6.0-8.0 | 15.0-29.0 | 6.0-8.3 | 2.1-4.4.4 | 18.0-42.0

示例：


nav-right

  • 版本：CSS3
  • 媒体：互动

语法：

nav-right：auto | <id> [ current | root | <target-name> ]?

默认值：auto

适用于：所有 enabled 的元素

继承性：无

动画性：否

计算值：指定值

相关属性: <' nav-index '> || <' nav-up '> || <' nav-down '> || <' nav-left '>

取值：

auto：
默认顺序。
<id>：
被导航元素的id。
<target-name>：
框架目标页面之间的元素焦点导航。

说明：

设置或检索对象的导航方向。
  • 只有支持nav-index属性的元素才能参与导航排序。
  • 被禁用的元素将不参与导航排序。
  • 该属性有被w3c标准移除的风险。
  • 对应的脚本特性为navRight。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-11.0 | 2.0-40.0 | 4.0-45.0 | 6.0-8.0 | 15.0-29.0 | 6.0-8.3 | 2.1-4.4.4 | 18.0-42.0

示例：


nav-down

  • 版本：CSS3
  • 媒体：互动

语法：

nav-down：auto | <id> [ current | root | <target-name> ]?

默认值：auto

适用于：所有 enabled 的元素

继承性：无

动画性：否

计算值：指定值

相关属性: <' nav-index '> || <' nav-up '> || <' nav-right '> || <' nav-left '>

取值：

auto：
默认顺序。
<id>：
被导航元素的id。
<target-name>：
框架目标页面之间的元素焦点导航。

说明：

设置或检索对象的导航方向。
  • 只有支持nav-index属性的元素才能参与导航排序。
  • 被禁用的元素将不参与导航排序。
  • 该属性有被w3c标准移除的风险。
  • 对应的脚本特性为navDown。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-11.0 | 2.0-40.0 | 4.0-45.0 | 6.0-8.0 | 15.0-29.0 | 6.0-8.3 | 2.1-4.4.4 | 18.0-42.0

示例：


nav-left

  • 版本：CSS3
  • 媒体：互动

语法：

nav-left：auto | <id> [ current | root | <target-name> ]?

默认值：auto

适用于：所有 enabled 的元素

继承性：无

动画性：否

计算值：指定值

相关属性: <' nav-index '> || <' nav-up '> || <' nav-right '> || <' nav-down '>

取值：

auto：
默认顺序。
<id>：
被导航元素的id。
<target-name>：
框架目标页面之间的元素焦点导航。

说明：

设置或检索对象的导航方向。
  • 只有支持nav-index属性的元素才能参与导航排序。
  • 被禁用的元素将不参与导航排序。
  • 该属性有被w3c标准移除的风险。
  • 对应的脚本特性为navLeft。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-11.0 | 2.0-40.0 | 4.0-45.0 | 6.0-8.0 | 15.0-29.0 | 6.0-8.3 | 2.1-4.4.4 | 18.0-42.0

示例：


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 | zoom-in | zoom-out | grab | grabbing]

默认值：auto

适用于：所有元素

继承性：有

动画性：否

计算值：指定值

取值：

<url>：
使用绝对或者相对地址引入外部图像作为光标形状
<url> <x> <y>：
通过<x> <y>两个值指定具体需要显示的图像位置。类似 <' background-position '>
auto：
用户代理基于当前上下文决定光标形状
default：
相关平台的默认光标形状，通常为箭头。
none：
没有光标形状

其他待完成...

说明：

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
  • 使用自定义图像作为光标类型，IE, Opera只支持*.cur等特定的图片格式；Firefox, Chrome, Safari既支持特定图片类型也支持常见的*.png, *.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。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-11.0#1 | 2.0+ | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1+ | 18.0+
none | 6.0-8.0 | 2.0+ | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1+ | 18.0+
 | 9.0+
alias | cell | copy | ew-resize | ns-resize | nesw-resize | nwse-resize | context-menu | 6.0-9.0 | 2.0+ | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1+ | 18.0+
 | 10.0+
zoom-in | zoom-out | 6.0-11.0 | 2.0-23.0-moz- | 4.0-36.0-webkit- | 6.0-8.0-webkit- | 15.0-23.0-webkit- | 6.0-8.3 | 2.1-4.4.4 | 18.0-42.0
 |  | 24.0+ | 37.0+ |  | 24.0+
grab | grabbing | 6.0-11.0 | 2.0-27.0-moz- | 4.0-22.0-webkit- | 6.0-8.0-webkit- | 15.0+ | 6.0-8.3 | 2.1-4.4.4 | 18.0-42.0
 |  | 28.0+ | 23.0+
  1. 6.0-8.0不支持：url()的position位置，不支持除.cur之外的图像格式。

示例：


zoom

  • 版本：CSS3
  • 媒体：视觉

语法：

zoom：normal | <number> | <percentage>

默认值：normal

适用于：所有元素

继承性：有

动画性：是

计算值：绝对长度

取值：

normal：
使用对象的实际尺寸。
<number>：
用浮点数来定义缩放比例。不允许负值
<percentage>：
用百分比来定义缩放比例。不允许负值

说明：

设置或检索对象的缩放比例。
  • 对应的脚本特性为zoom。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0-40.0 | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1+ | 18.0+

示例：


box-sizing

  • 版本：CSS3
  • 媒体：视觉

语法：

box-sizing：content-box | border-box

默认值：content-box

适用于：所有接受 <' width '> 和 <' height '> 的元素

继承性：无

动画性：否

计算值：指定值

取值：

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 )
此属性表现为怪异模式下的盒模型。

说明：

设置或检索对象的盒模型组成模式。

  • 标准盒模型代码与图示例:

    .test1{
    box-sizing:content-box;
    width:200px;
    padding:10px;
    border:15px solid #eee;
}

  • 怪异盒模型代码与图示例:

    .test1{
    box-sizing:border-box;
    width:200px;
    padding:10px;
    border:15px solid #eee;
}

  • 对应的脚本特性为boxSizing。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-7.0 | 2.0-28.0-moz- | 4.0-9.0-webkit- | 6.0+ | 15.0+ | 6.0+ | 2.1+ | 18.0+
 | 8.0+ | 29.0+ | 10.0+

示例：


resize

  • 版本：CSS3
  • 媒体：视觉

语法：

resize：none | both | horizontal | vertical

默认值：none

适用于：所有 <' overflow '> 设置为非visible的元素

继承性：无

动画性：否

计算值：指定值

取值：

none：
不允许用户调整元素大小。
both：
用户可以调节元素的宽度和高度。
horizontal：
用户可以调节元素的宽度
vertical：
用户可以调节元素的高度。

说明：

设置或检索对象的区域是否允许用户缩放，调节元素尺寸大小。
  • 如果希望此属性生效，需要设置对象的overflow属性，值可以是auto,hidden或scroll。
  • 对应的脚本特性为resize。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-11.0 | 2.0-3.6 | 4.0+ | 6.0+ | 15.0+ | 6.0-8.3 | 2.1-4.4.4 | 18.0+
 |  | 4.0 -moz-
 |  | 5.0

示例：


ime-mode

  • 版本：CSS3
  • 媒体：互动

语法：

ime-mode：auto | normal | active | inactive | disabled

默认值：auto

适用于：所有输入文本框

继承性：无

动画性：否

计算值：指定值

取值：

auto：
不影响IME(input method editor)的状态。
normal：
正常的IME状态
active：
指定所有使用ime输入的字符。即激活本地语言输入法。用户仍可以撤销激活ime
inactive：
指定所有不使用ime输入的字符。即激活非本地语言。用户仍可以撤销激活ime
disabled：
完全禁用ime。对于有焦点的控件(如输入框)，用户不可以激活ime

说明：

设置或检索是否允许用户激活输入中文，韩文，日文等的输入法（IME）状态。
  • 该属性用于控制文本域输入法状态；
  • 该属性有被w3c标准移除的风险。
  • 对应的脚本特性为imeMode。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0-42.0 | 6.0-8.0 | 15.0-27.0 | 6.0-8.3 | 2.1-4.4.4 | 18.0-42.0

示例：


user-select

  • 版本：CSS3
  • 媒体：互动

语法：

user-select：none | text | all | element

默认值：text

适用于：除替换元素外的所有元素

继承性：无

动画性：否

计算值：指定值

取值：

none：
文本不能被选择
text：
可以选择文本
all：
当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素，那么被选择的部分将是以该子元素向上回溯的最高祖先元素。
element：
可以选择文本，但选择范围受元素边界的约束

说明：

设置或检索是否允许用户选中文本。
  • IE6-9不支持该属性，但支持使用标签属性 onselectstart="return false;" 来达到 user-select:none 的效果；Safari和Chrome也支持该标签属性；
  • 直到Opera12.5仍然不支持该属性，但和IE6-9一样，也支持使用私有的标签属性 unselectable="on" 来达到 user-select:none 的效果；unselectable 的另一个值是 off；
  • 除Chrome和Safari外，在其它浏览器中，如果将文本设置为 -ms-user-select:none;，则用户将无法在该文本块中开始选择文本。不过，如果用户在页面的其他区域开始选择文本，则用户仍然可以继续选择将文本设置为 -ms-user-select:none; 的区域文本；
  • 对应的脚本特性为userSelect。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-9.0 | 4.0-40.0-moz- | 4.0-8.0-webkit- | 4.0-45.0-webkit- | 6.0-8.0-webkit- | 15.0-27.0-webkit- | 6.0-8.3-webkit- | 18.0-42.0-webkit-
 | 10.0-11.0-ms-
element | 6.0-9.0 | 4.0-40.0-moz- | 4.0-8.0 | 4.0-45.0 | 6.0-8.0 | 15.0-27.0 | 6.0-8.3 | 18.0-42.0
 | 10.0-11.0-ms-

示例：


pointer-events

  • 版本：CSS3
  • 媒体：视觉

语法：

pointer-events：auto | none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all

默认值：auto

适用于：所有元素

继承性：有

动画性：否

计算值：指定值

取值：

auto：
与pointer-events属性未指定时的表现效果相同。在svg内容上与visiblepainted值相同
none：
元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶触发父元素的事件侦听器。
其他值只能应用在SVG上。

说明：

设置或检索在何时成为属性事件的target。
  • 使用pointer-events来阻止元素成为鼠标事件目标不一定意味着元素上的事件侦听器永不会触发。如果元素后代明确指定了pointer-events属性并允许其成为鼠标事件的目标，那么指向该元素的任何事件在事件传播过程中都将通过父元素，并以适当的方式触发其上的事件侦听器。当然位于屏幕上在父元素上但不在后代元素上的鼠标活动都不会被父元素和后代元素捕获（将会穿过父元素而指向位于其下面的元素）。
  • 对应的脚本特性为pointerEvents。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-10.0 | 2.0-3.5 | 4.0+ | 6.0 | 15.0 | 6.0 | 2.1+ | 18.0+
 | 11.0+ | 3.6+

示例：


Multi-column index

CSS3参考手册 » 属性列表 » 多栏属性
相关内容：
其它多栏属性 选择其它项

CSS Multi-column Layout Module

  • 多列属性

多列 Multi-column

属性 | 版本 | 继承性 | 描述
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

  • 版本：CSS3
  • 媒体：视觉

语法：

columns：<' column-width '> || <' column-count '>

默认值：看每个独立属性

适用于：除table外的非替换块级元素, table cells, inline-block元素

继承性：无

动画性：否

计算值：看每个独立属性

取值：

<' column-width '>：
设置或检索对象每列的宽度
<' column-count '>：
设置或检索对象的列数

说明：

设置或检索对象的列数和每列的宽度。复合属性
  • 对应的脚本特性为columns。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-9.0 | 2.0-8.0 | 4.0-45.0-webkit- | 6.0-8.0-webkit- | 15.0-29.0-webkit- | 6.0-8.3-webkit- | 2.1-4.4.4-webkit- | 18.0-42.0-webkit-
 | 10.0+ | 9.0-40.0-moz-

示例：


column-width

  • 版本：CSS3
  • 媒体：视觉

语法：

column-width：<length> | auto

默认值：auto

适用于：除table外的非替换块级元素, table cells, inline-block元素

继承性：无

动画性：否

计算值：绝对长度值，0或者更大

取值：

<length>：
用长度值来定义列宽。不允许负值
auto：
根据 <' column-count '> 自定分配宽度

说明：

设置或检索对象每列的宽度
  • 对应的脚本特性为columnWidth。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-9.0 | 2.0-40.0-moz- | 4.0-45.0-webkit- | 6.0-8.0-webkit- | 15.0-29.0-webkit- | 6.0-8.3-webkit- | 2.1-4.4.4-webkit- | 18.0-42.0-webkit-
 | 10.0+

示例：


column-count

  • 版本：CSS3
  • 媒体：视觉

语法：

column-count：<integer> | auto

默认值：auto

适用于：除table外的非替换块级元素, table cells, inline-block元素

继承性：无

动画性：否

计算值：指定值

取值：

<integer>：
用整数值来定义列数。不允许负值
auto：
根据 <' column-width '> 自定分配宽度

说明：

设置或检索对象的列数
  • 对应的脚本特性为columnCount。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-9.0 | 2.0-40.0-moz- | 4.0-45.0-webkit- | 6.0-8.0-webkit- | 15.0-29.0-webkit- | 6.0-8.3-webkit- | 2.1-4.4.4-webkit- | 18.0-42.0-webkit-
 | 10.0+

示例：


column-gap

  • 版本：CSS3
  • 媒体：视觉

语法：

column-gap：<length> | normal

默认值：normal

适用于：定义了多列的元素

继承性：无

动画性：否

计算值：绝对长度值或者normal

取值：

<length>：
用长度值来定义列与列之间的间隙。不允许负值
normal：
与 <' font-size '> 大小相同。假设该对象的font-size为16px，则normal值为16px，类推。

说明：

设置或检索对象的列与列之间的间隙
  • 对应的脚本特性为columnGap。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-9.0 | 2.0-40.0-moz- | 4.0-45.0-webkit- | 6.0-8.0-webkit- | 15.0-29.0-webkit- | 6.0-8.3-webkit- | 2.1-4.4.4-webkit- | 18.0-42.0-webkit-
 | 10.0+

示例：


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。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-9.0 | 2.0-40.0-moz- | 4.0-45.0-webkit- | 6.0-8.0-webkit- | 15.0-29.0-webkit- | 6.0-8.3-webkit- | 2.1-4.4.4-webkit- | 18.0-42.0-webkit-
 | 10.0+

示例：


column-rule-width

  • 版本：CSS3
  • 媒体：视觉

语法：

column-rule-width：<length> | thin | medium | thick

默认值：medium

适用于：定义了多列的元素

继承性：无

动画性：否

计算值：绝对长度值或者0（如果 <' column-rule-style '> 为 none 或者 hidden）

取值：

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

说明：

设置或检索对象的列与列之间的边框厚度。参阅 <' border-width '> 属性
  • 如果 <' column-rule-style '> 设置为none或者hidden，本属性将失去作用。
  • 对应的脚本特性为columnRuleWidth。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-9.0 | 2.0-40.0-moz- | 4.0-45.0-webkit- | 6.0-8.0-webkit- | 15.0-29.0-webkit- | 6.0-8.3-webkit- | 2.1-4.4.4-webkit- | 18.0-42.0-webkit-
 | 10.0+

示例：


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。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-9.0 | 2.0-40.0-moz- | 4.0-45.0-webkit- | 6.0-8.0-webkit- | 15.0-29.0-webkit- | 6.0-8.3-webkit- | 2.1-4.4.4-webkit- | 18.0-42.0-webkit-
 | 10.0+

示例：


column-rule-color

  • 版本：CSS3
  • 媒体：视觉

语法：

column-rule-color：<color>

默认值：采用文本颜色

适用于：定义了多列的元素

继承性：无

动画性：否

计算值：与 <' color '> 属性一致

取值：

<color>：
指定颜色。

说明：

设置或检索对象的列与列之间的边框颜色。参阅 <' border-color '> 属性
  • 如果 <' column-rule-width '> 等于0或 <' column-rule-style '> 设置为none | hidden，本属性将被忽略。
  • 对应的脚本特性为columnRuleColor。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-9.0 | 2.0-40.0-moz- | 4.0-45.0-webkit- | 6.0-8.0-webkit- | 15.0-29.0-webkit- | 6.0-8.3-webkit- | 2.1-4.4.4-webkit- | 18.0-42.0-webkit-
 | 10.0+

示例：


column-span

  • 版本：CSS3
  • 媒体：视觉

语法：

column-span：none | all

默认值：none

适用于：除浮动和绝对定位之外的块级元素

继承性：无

动画性：否

计算值：指定值

取值：

none：
不跨列
all：
横跨所有列

说明：

设置或检索对象元素是否横跨所有列。
  • 对应的脚本特性为columnSpan。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-9.0 | 2.0-40.0 | 4.0-45.0-webkit- | 6.0-8.0-webkit- | 15.0-29.0-webkit- | 6.0-8.3-webkit- | 2.1-4.4.4-webkit- | 18.0-42.0-webkit-
 | 10.0+

示例：


column-fill

  • 版本：CSS3
  • 媒体：视觉

语法：

column-fill：auto | balance

默认值：auto

适用于：定义了多列的元素

继承性：无

动画性：否

计算值：指定值

取值：

auto：
列高度自适应内容
balance：
所有列的高度以其中最高的一列统一

说明：

设置或检索对象所有列的高度是否统一。
  • 对应的脚本特性为columnFill。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-9.0 | 2.0-12.0 | 4.0-45.0-webkit- | 6.0-8.0-webkit- | 15.0-29.0-webkit- | 6.0-8.3-webkit- | 2.1-4.4.4-webkit- | 18.0-42.0-webkit-
 | 10.0+ | 13.0-40.0-moz-

示例：


column-break-before

  • 版本：CSS3
  • 媒体：分页

语法：

column-break-before：auto | always | avoid | left | right | page | column | avoid-page | avoid-column

默认值：auto

适用于：块级元素

继承性：无

动画性：否

计算值：指定值

取值：

auto：
既不强迫也不禁止在元素之前断行并产生新列
always：
总是在元素之前断行并产生新列
avoid：
避免在元素之前断行并产生新列

说明：

设置或检索对象之前是否断行。
  • 对应的脚本特性为columnBreakBefore。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-9.0 | 2.0-40.0 | 4.0-45.0-webkit- | 6.0-8.0-webkit- | 15.0-29.0-webkit- | 6.0-8.3-webkit- | 2.1-4.4.4-webkit- | 18.0-42.0-webkit-
 | 10.0+

示例：


column-break-after

  • 版本：CSS3
  • 媒体：分页

语法：

column-break-after：auto | always | avoid | left | right | page | column | avoid-page | avoid-column

默认值：auto

适用于：块级元素

继承性：无

动画性：否

计算值：指定值

取值：

auto：
既不强迫也不禁止在元素之后断行并产生新列
always：
总是在元素之后断行并产生新列
avoid：
避免在元素之后断行并产生新列

说明：

设置或检索对象之后是否断行。
  • 对应的脚本特性为columnBreakAfter。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-9.0 | 2.0-40.0 | 4.0-45.0-webkit- | 6.0-8.0-webkit- | 15.0-29.0-webkit- | 6.0-8.3-webkit- | 2.1-4.4.4-webkit- | 18.0-42.0-webkit-
 | 10.0+

示例：


column-break-inside

  • 版本：CSS3
  • 媒体：分页

语法：

column-break-inside：auto | avoid | avoid-page | avoid-column

默认值：auto

适用于：块级元素

继承性：无

动画性：否

计算值：指定值

取值：

auto：
既不强迫也不禁止在元素内部断行并产生新列
avoid：
避免在元素内部断行并产生新列

说明：

设置或检索对象内部是否断行。
  • 对应的脚本特性为columnBreakInside。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-9.0 | 2.0-40.0 | 4.0-45.0-webkit- | 6.0-8.0-webkit- | 15.0-29.0-webkit- | 6.0-8.3-webkit- | 2.1-4.4.4-webkit- | 18.0-42.0-webkit-
 | 10.0+


CSS Flexible Box Layout Module index

CSS3参考手册 » 属性列表 » 旧伸缩盒属性
相关内容：
其它伸缩盒属性 选择其它项

CSS Flexible Box Layout Module

  • CSS伸缩盒属性

伸缩盒 Flexible Box Layout

属性 | 版本 | 继承性 | 描述
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

  • 版本：CSS3
  • 媒体：视觉

语法：

box-orient：horizontal | vertical | inline-axis | block-axis

默认值：horizontal

适用于：伸缩盒容器

继承性：无

动画性：否

计算值：指定值

取值：

horizontal：
设置伸缩盒对象的子元素从左到右水平排列
vertical：
设置伸缩盒对象的子元素从上到下纵向排列
inline-axis：
设置伸缩盒对象的子元素沿行轴排列
block-axis：
设置伸缩盒对象的子元素沿块轴排列

说明：

设置或检索伸缩盒对象的子元素的排列方式。
  • 可以通过box-orient:horizontal + box-direction:normal 达到新版本 flex-direction:row 的效果；
  • 可以通过box-orient:horizontal + box-direction:reverse 达到新版本 flex-direction:row-reverse 的效果；
  • 可以通过box-orient:vertical + box-direction:normal 达到新版本 flex-direction:column 的效果；
  • 可以通过box-orient:horizontal + box-direction:reverse 达到新版本 flex-direction:column-reverse 的效果；
  • 对应的脚本特性为boxOrient。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-11.0 | 2.0-40.0-moz- | 4.0-45.0-webkit- | 6.0-8.0-webkit- | 15.0-29.0-webkit- | 6.0-8.3-webkit- | 2.1-4.4.4-webkit- | 18.0-42.0-webkit-

示例：


box-pack

  • 版本：CSS3
  • 媒体：视觉

语法：

box-pack：start | center | end | justify

默认值：start

适用于：伸缩盒容器

继承性：无

动画性：否

计算值：指定值

取值：

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

说明：

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

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-11.0 | 2.0-40.0-moz-#1 | 4.0-45.0-webkit- | 6.0-8.0-webkit- | 15.0-29.0-webkit- | 6.0-8.3-webkit- | 2.1-4.4.4-webkit- | 18.0-42.0-webkit-
  1. 支持justify值但无效果。

示例：


box-align

  • 版本：CSS3
  • 媒体：视觉

语法：

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

默认值：stretch

适用于：伸缩盒容器

继承性：无

动画性：否

计算值：指定值

取值：

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

说明：

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

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-11.0 | 2.0-40.0-moz- | 4.0-45.0-webkit- | 6.0-8.0-webkit- | 15.0-29.0-webkit- | 6.0-8.3-webkit- | 2.1-4.4.4-webkit- | 18.0-42.0-webkit-

示例：


box-flex

  • 版本：CSS3
  • 媒体：视觉

语法：

box-flex：<number>

默认值：0

适用于：伸缩盒子元素

继承性：无

动画性：否

计算值：指定值

取值：

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

说明：

设置或检索伸缩盒对象的子元素如何分配其剩余空间。
  • 效果类似于过渡版本和新版本的flex属性；
  • 示例：将一个容器分成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。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-11.0 | 2.0-40.0-moz- | 4.0-45.0-webkit- | 6.0-8.0-webkit- | 15.0-29.0-webkit- | 6.0-8.3-webkit- | 2.1-4.4.4-webkit- | 18.0-42.0-webkit-

示例：


box-flex-group

  • 版本：CSS3
  • 媒体：视觉

语法：

box-flex-group：<integer>

默认值：1

适用于：伸缩盒子元素

继承性：无

动画性：否

计算值：指定值

取值：

<integer>：
用整数值来定义伸缩盒对象的子元素所在的组。

说明：

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

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-11.0 | 2.0-40.0 | 4.0-45.0-webkit- | 6.0-8.0-webkit- | 15.0-29.0-webkit- | 6.0-8.3-webkit- | 2.1-4.4.4-webkit- | 18.0-42.0-webkit-

示例：


box-ordinal-group

  • 版本：CSS3
  • 媒体：视觉

语法：

box-ordinal-group：<integer>

默认值：1

适用于：伸缩盒子元素

继承性：无

动画性：否

计算值：指定值

取值：

<integer>：
用整数值来定义伸缩盒对象的子元素显示顺序。

说明：

设置或检索伸缩盒对象的子元素的显示顺序。
  • 效果等同于过渡版本的flex-order属性和新版本的order属性；
  • 数值较低的元素显示在数值较高的元素前面；
  • 相同数值的元素，它们的显示顺序取决于它们的代码顺序；
  • 对应的脚本特性为boxOrdinalGroup。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-11.0 | 2.0-40.0-moz- | 4.0-45.0-webkit- | 6.0-8.0-webkit- | 15.0-29.0-webkit- | 6.0-8.3-webkit- | 2.1-4.4.4-webkit- | 18.0-42.0-webkit-

示例：


box-direction

  • 版本：CSS3
  • 媒体：视觉

语法：

box-direction：normal | reverse

默认值：normal

适用于：伸缩盒容器

继承性：无

动画性：否

计算值：指定值

取值：

normal：
设置伸缩盒对象的子元素按正常顺序排列
reverse：
反转伸缩盒对象的子元素的排列顺序

说明：

设置或检索伸缩盒对象的子元素的排列顺序是否反转。
  • 可以通过box-orient:horizontal + box-direction:normal 达到新版本 flex-direction:row 的效果；
  • 可以通过box-orient:horizontal + box-direction:reverse 达到新版本 flex-direction:row-reverse 的效果；
  • 可以通过box-orient:vertical + box-direction:normal 达到新版本 flex-direction:column 的效果；
  • 可以通过box-orient:horizontal + box-direction:reverse 达到新版本 flex-direction:column-reverse 的效果；
  • Firefox设置box-direction为reverse时，在将元素的排列顺序反转的同时也将元素的对齐方式逆转了；Safari和Chrome则只是反转元素排列顺序
  • 对应的脚本特性为boxDirection。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-11.0 | 2.0-40.0-moz- | 4.0-45.0-webkit- | 6.0-8.0-webkit- | 15.0-29.0-webkit- | 6.0-8.3-webkit- | 2.1-4.4.4-webkit- | 18.0-42.0-webkit-

示例：


box-lines

  • 版本：CSS3
  • 媒体：视觉

语法：

box-lines：single | multiple

默认值：single

适用于：伸缩盒容器

继承性：无

动画性：否

计算值：指定值

取值：

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

说明：

设置或检索伸缩盒对象的子元素是否可以换行显示。
  • 效果类似于过渡版本和新版本的flex-wrap属性；
  • 对应的脚本特性为boxLines。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-11.0 | 2.0-40.0 | 4.0-45.0-webkit-#1 | 6.0-8.0-webkit-#1 | 15.0-29.0-webkit-#1 | 6.0-8.3 | 2.1-4.4.4 | 18.0-42.0
  1. 实验性质支持box-lines，但没有实现该属性的效果（相当于不支持），请勿使用该属性

示例：


CSS Flexible Box Layout Module index

CSS3参考手册 » 属性列表 » 新伸缩盒属性
相关内容：
其它伸缩盒属性 选择其它项

CSS Flexible Box Layout Module

  • CSS伸缩盒属性

伸缩盒 Flexible Box Layout

属性 | 版本 | 继承性 | 描述
flex | CSS3 | 无 | 复合属性。设置或检索伸缩盒对象的子元素如何分配空间。
flex-grow | CSS3 | 无 | 设置或检索弹性盒的扩展比率。
flex-shrink | CSS3 | 无 | 设置或检索弹性盒的收缩比率
flex-basis | CSS3 | 无 | 设置或检索弹性盒伸缩基准值。
flex-flow | CSS3 | 无 | 复合属性。设置或检索伸缩盒对象的子元素排列方式。
flex-direction | CSS3 | 无 | 设置或检索伸缩盒对象的子元素在父容器中的位置。
flex-wrap | CSS3 | 无 | 设置或检索伸缩盒对象的子元素超出父容器时是否换行。
align-content | CSS3 | 无 | 设置或检索弹性盒堆叠伸缩行的对齐方式。
align-items | CSS3 | 无 | 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
align-self | CSS3 | 无 | 设置或检索弹性盒子元素自身在侧轴（纵轴）方向上的对齐方式。
justify-content | CSS3 | 无 | 设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
order | CSS3 | 无 | 设置或检索伸缩盒对象的子元素出現的順序。

紫色 链接表示该属性在CSS3有修改或者增加了新的属性值；橙色 链接表示该属性是CSS3新增属性


flex

  • 版本：CSS3
  • 媒体：视觉

语法：

flex：none | <' flex-grow '> <' flex-shrink >'? || <' flex-basis '>

默认值：看各分拆属性

适用于：flex子项

继承性：无

动画性：否

计算值：看各分拆属性

取值：

none：
none关键字的计算值为: 0 0 auto
<' flex-grow '>：
用来指定扩展比率，即剩余空间是正值时此「flex子项」相对于「flex容器」里其他「flex子项」能分配到空间比例。
在「flex」属性中该值如果被省略则默认为「1」
<' flex-shrink '>：
用来指定收缩比率，即剩余空间是负值时此「flex子项」相对于「flex容器」里其他「flex子项」能收缩的空间比例。
在收缩的时候收缩比率会以伸缩基准值加权
在「flex」属性中该值如果被省略则默认为「1」
<' flex-basis '>：
用来指定伸缩基准值，即在根据伸缩比率计算出剩余空间的分布之前，「flex子项」长度的起始数值。
在「flex」属性中该值如果被省略则默认为「0%」
在「flex」属性中该值如果被指定为「auto」，则伸缩基准值的计算值是自身的 <' width '> 设置，如果自身的宽度没有定义，则长度取决于内容。

说明：

复合属性。设置或检索弹性盒模型对象的子元素如何分配空间。
  • 如果缩写「flex: 1」, 则其计算值为「1 1 0%」
  • 如果缩写「flex: auto」, 则其计算值为「1 1 auto」
  • 如果「flex: none」, 则其计算值为「0 0 auto」
  • 如果「flex: 0 auto」或者「flex: initial」, 则其计算值为「0 1 auto」，即「flex」初始值
  • 示例：如下情况每个元素的计算宽是多少

    Code：

    <ul class="flex"> <li>a</li> <li>b</li> <li>c</li> </ul> .flex{display:flex;width:800px;margin:0;padding:0;list-style:none;} .flex :nth-child(1){flex:1 1 300px;} .flex :nth-child(2){flex:2 2 200px;} .flex :nth-child(3){flex:3 3 400px;}

    本例定义了父容器宽（即主轴宽）为800px，由于子元素设置了伸缩基准值flex-basis，相加300+200+400=900，那么子元素将会溢出900-800=100px；
    由于同时设置了收缩因子，所以加权综合可得300*1+200*2+400*3=1900px；
    于是我们可以计算a,b,c将被移除的溢出量是多少：
    a被移除溢出量：(300*1/1900)*100，即约等于16px
    b被移除溢出量：(200*2/1900)*100，即约等于21px
    c被移除溢出量：(400*3/1900)*100，即约等于63px
    最后a,b,c的实际宽度分别为：300-16=284px, 200-21=179px, 400-63=337px

  • 仍然是上面这个例子，不过将容器的宽度改成了1500px

    Code：

    <ul class="flex"> <li>a</li> <li>b</li> <li>c</li> </ul> .flex{display:flex;width:1500px;margin:0;padding:0;list-style:none;} .flex :nth-child(1){flex:1 1 300px;} .flex :nth-child(2){flex:2 2 200px;} .flex :nth-child(3){flex:3 3 400px;}
    本例定义了父容器宽（即主轴宽）为1500px，由于子元素设置了伸缩基准值flex-basis，相加300+200+400=900，那么容器将有1500-900=600px的剩余宽度；
    于是我们可以计算a,b,c将被扩展量是多少：
    a的扩展量：(1/(1+2+3))*600，即约等于100px
    b的扩展量：(2/(1+2+3))*600，即约等于200px
    c的扩展量：(3/(1+2+3))*600，即约等于300px
    最后a,b,c的实际宽度分别为：300+100=400px, 200+200=400px, 400+300=700px
    从本例能看出：

    当「flex-basis」在「flex」属性中不为0时（包括值为auto，此时伸缩基准值等于自身内容宽度），「flex子项」将分配容器的剩余空间（剩余空间即等于容器宽度减去各项的伸缩基准值）

    当「flex-basis」在「flex」属性中等于0时，「flex子项」将分配容器的所有空间（因为各项的伸缩基准值相加等于0，剩余空间等于容器宽度减去各项的伸缩基准值，即减0，最后剩余空间值等于容器宽度），所以可以借助此特性，给各子项定义「flex: n」来进行按比例均分容器总宽度

  • 对应的脚本特性为flex。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-10.0 | 2.0-21.0 | 4.0-20.0 | 6.0 | 15.0+-webkit- | 6.0-6.1 | 2.1-4.3 | 18.0-19.0
 | 11.0+ | 22.0+ | 21.0+-webkit- | 6.1+-webkit- | 17.0+ | 7.0+-webkit- | 4.4+ | 20.0+-webkit-
 |  |  | 29.0+ | 9.0+ |  | 9.0+ |  | 28.0+

示例：

本页最后更新时间：

2015.7.29


flex-grow

  • 版本：CSS3
  • 媒体：视觉

语法：

flex-grow：<number>

默认值：0

适用于：flex子项

继承性：无

动画性：是

计算值：指定值

取值：

<number>：
用数值来定义扩展比率。不允许负值

说明：

设置或检索弹性盒的扩展比率。
  • 根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间。
  • 示例：b,c将按照1:3的比率分配剩余空间

    Code：

    <ul class="flex"> <li>a</li> <li>b</li> <li>c</li> </ul> .flex{display:flex;width:600px;margin:0;padding:0;list-style:none;} .flex li:nth-child(1){width:200px;} .flex li:nth-child(2){flex-grow:1;width:50px;} .flex li:nth-child(3){flex-grow:3;width:50px;}

    flex-grow的默认值为0，如果没有显示定义该属性，是不会拥有分配剩余空间权利的。

    本例中b,c两项都显式的定义了flex-grow，flex容器的剩余空间分成了4份，其中b占1份，c占3分，即1:3

    flex容器的剩余空间长度为：600-200-50-50=300px，所以最终a,b,c的长度分别为：

    a: 50+(300/4)=200px

    b: 50+(300/4*1)=125px

    a: 50+(300/4*3)=275px

  • 对应的脚本特性为flexGrow。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-10.0 | 2.0-21.0 | 4.0-20.0 | 6.0 | 15.0+-webkit- | 6.0-6.1 | 2.1-4.3 | 18.0-19.0
 | 11.0+ | 22.0+ | 21.0+-webkit- | 6.1+-webkit- | 17.0+ | 7.0+-webkit- | 4.4+ | 20.0+-webkit-
 |  |  | 29.0+ | 9.0+ |  | 9.0+ |  | 28.0+

示例：

本页最后更新时间：

2015.7.29


flex-shrink

  • 版本：CSS3
  • 媒体：视觉

语法：

flex-shrink：<number>

默认值：1

适用于：flex子项

继承性：无

动画性：是

计算值：指定值

取值：

<number>：
用数值来定义收缩比率。不允许负值

说明：

设置或检索弹性盒的收缩比率。
  • 根据弹性盒子元素所设置的收缩因子作为比率来收缩空间。
  • 示例：a,b,c将按照1:1:3的比率来收缩空间

    HTML Code：

    <ul class="flex"> <li>a</li> <li>b</li> <li>c</li> </ul> .flex{display:flex;width:400px;margin:0;padding:0;list-style:none;} .flex li{width:200px;} .flex li:nth-child(3){flex-shrink:3;}

    flex-shrink的默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。

    本例中c显式的定义了flex-shrink，a,b没有显式定义，但将根据默认值1来计算，可以看到总共将剩余空间分成了5份，其中a占1份，b占1份，c占3分，即1:1:3

    我们可以看到父容器定义为400px，子项被定义为200px，相加之后即为600px，超出父容器200px。那么这么超出的200px需要被a,b,c消化

    通过收缩因子，所以加权综合可得200*1+200*1+200*3=1000px；
    于是我们可以计算a,b,c将被移除的溢出量是多少：
    a被移除溢出量：(200*1/1000)*200，即约等于40px
    b被移除溢出量：(200*1/1000)*200，即约等于40px
    c被移除溢出量：(200*3/1000)*200，即约等于120px
    最后a,b,c的实际宽度分别为：200-40=160px, 200-40=160px, 200-120=80px

  • 对应的脚本特性为flexGrow。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-10.0 | 2.0-21.0 | 4.0-20.0 | 6.0 | 15.0+-webkit- | 6.0-6.1 | 2.1-4.3 | 18.0-19.0
 | 11.0+ | 22.0+ | 21.0+-webkit- | 6.1+-webkit- | 17.0+ | 7.0+-webkit- | 4.4+ | 20.0+-webkit-
 |  |  | 29.0+ | 9.0+ |  | 9.0+ |  | 28.0+

示例：

本页最后更新时间：

2015.7.29


flex-basis

  • 版本：CSS3
  • 媒体：视觉

语法：

flex-basis：<length> | <percentage> | auto | content

默认值：auto

适用于：flex子项

继承性：无

动画性：是，当值为非关键字时

计算值：指定值

取值：

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

说明：

设置或检索弹性盒伸缩基准值。
  • 如果所有子元素的基准值之和大于剩余空间，则会根据每项设置的基准值，按比率伸缩剩余空间
  • 对应的脚本特性为flexBasis。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-10.0 | 2.0-21.0 | 4.0-20.0 | 6.0 | 15.0+-webkit- | 6.0-6.1 | 2.1-4.3 | 18.0-19.0
 | 11.0+ | 22.0+ | 21.0+-webkit- | 6.1+-webkit- | 17.0+ | 7.0+-webkit- | 4.4+ | 20.0+-webkit-
 |  |  | 29.0+ | 9.0+ |  | 9.0+ |  | 28.0+
content | 6.0-11.0 | 2.0-42.0 | 4.0-47.0 | 6.0-9.0 | 15.0-32.0 | 6.0-9.0 | 2.1-4.4.4 | 18.0-42.0

示例：

本页最后更新时间：

2015.7.29


flex-flow

  • 版本：CSS3
  • 媒体：视觉

语法：

flex-flow：<' flex-direction '> || <' flex-wrap '>

默认值：看各分拆属性

适用于：flex容器

继承性：无

动画性：否

计算值：指定值

取值：

<' flex-direction '>：
定义弹性盒子元素的排列方向。
<' flex-wrap '>：
控制flex容器是单行或者多行。

说明：

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

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-10.0 | 2.0-27.0 | 4.0-20.0 | 6.0 | 15.0+-webkit- | 6.0-6.1 | 2.1-4.3 | 18.0-19.0
 | 11.0 | 28.0+ | 21.0+-webkit- | 6.1+-webkit- | 17.0+ | 7.0+-webkit- | 4.4+ | 20.0+-webkit-
 |  |  | 29.0+ | 9.0+ |  | 9.0+ |  | 28.0+

示例：

本页最后更新时间：

2015.7.29


flex-direction

  • 版本：CSS3
  • 媒体：视觉

语法：

flex-direction：row | row-reverse | column | column-reverse

默认值：row

适用于：flex容器

继承性：无

动画性：否

计算值：指定值

取值：

row：
主轴与行内轴方向作为默认的书写模式。即横向从左到右排列（左对齐）。
row-reverse：
对齐方式与row相反。
column：
主轴与块轴方向作为默认的书写模式。即纵向从上往下排列（顶对齐）。
column-reverse：
对齐方式与column相反。

说明：

该属性通过定义flex容器的主轴方向来决定felx子项在flex容器中的位置。这将决定flex需要如何进行排列
  • 该属性的反转取值不影响元素的绘制，语音和导航顺序，只改变流动方向。这与 <' writing-mode '> 和 <' direction '> 相同。
  • 示例：将一个容器内的子元素反转横向排列

    Code：

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

#box {
    display: flex;
    flex-direction: row-reverse;
    list-style: none;
}

    请自行根据需要补全厂商前缀。flex生效需定义 <' display '> 为flex或inline-flex(box或inline-box，这是旧的方式)

  • 对应的脚本特性为flexDirection。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-10.0 | 2.0-21.0 | 4.0-20.0 | 6.0 | 15.0+-webkit- | 6.0-6.1 | 2.1-4.3 | 18.0-19.0
 | 11.0+ | 22.0+ | 21.0+-webkit- | 6.1+-webkit- | 17.0+ | 7.0+-webkit- | 4.4+ | 20.0+-webkit-
 |  |  | 29.0+ | 9.0+ |  | 9.0+ |  | 28.0+

示例：

本页最后更新时间：

2015.7.29


flex-wrap

  • 版本：CSS3
  • 媒体：视觉

语法：

flex-wrap：nowrap | wrap | wrap-reverse

默认值：nowrap

适用于：flex容器

继承性：无

动画性：否

计算值：指定值

取值：

nowrap：
flex容器为单行。该情况下flex子项可能会溢出容器
wrap：
flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse：
反转 wrap 排列。

说明：

该属性控制flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。
  • 对应的脚本特性为flexWrap。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-10.0 | 2.0-27.0 | 4.0-20.0 | 6.0 | 15.0+-webkit- | 6.0-6.1 | 2.1-4.3 | 18.0-19.0
 | 11.0 | 28.0+ | 21.0+-webkit- | 6.1+-webkit- | 17.0+ | 7.0+-webkit- | 4.4+ | 20.0+-webkit-
 |  |  | 29.0+ | 9.0+ |  | 9.0+ |  | 28.0+

示例：

本页最后更新时间：

2015.7.29


align-content

  • 版本：CSS3
  • 媒体：视觉

语法：

align-content：flex-start | flex-end | center | space-between | space-around | stretch

默认值：stretch

适用于：多行的弹性盒模型容器

继承性：无

动画性：是

计算值：指定值

取值：

flex-start：
各行向弹性盒容器的起始位置堆叠。弹性盒容器中第一行的侧轴起始边界紧靠住该弹性盒容器的侧轴起始边界，之后的每一行都紧靠住前面一行。
flex-end：
各行向弹性盒容器的结束位置堆叠。弹性盒容器中最后一行的侧轴起结束界紧靠住该弹性盒容器的侧轴结束边界，之后的每一行都紧靠住前面一行。
center：
各行向弹性盒容器的中间位置堆叠。各行两两紧靠住同时在弹性盒容器中居中对齐，保持弹性盒容器的侧轴起始内容边界和第一行之间的距离与该容器的侧轴结束内容边界与第最后一行之间的距离相等。（如果剩下的空间是负数，则各行会向两个方向溢出的相等距离。）
space-between：
各行在弹性盒容器中平均分布。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于'flex-start'。在其它情况下，第一行的侧轴起始边界紧靠住弹性盒容器的侧轴起始内容边界，最后一行的侧轴结束边界紧靠住弹性盒容器的侧轴结束内容边界，剩余的行则按一定方式在弹性盒窗口中排列，以保持两两之间的空间相等。
space-around：
各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于'center'。在其它情况下，各行会按一定方式在弹性盒容器中排列，以保持两两之间的空间相等，同时第一行前面及最后一行后面的空间是其他空间的一半。
stretch：
各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于'flex-start'。在其它情况下，剩余空间被所有行平分，以扩大它们的侧轴尺寸。

说明：

当伸缩容器的侧轴还有多余空间时，本属性可以用来调准「伸缩行」在伸缩容器里的对齐方式，这与调准伸缩项目在主轴上对齐方式的 <' justify-content '> 属性类似。请注意本属性在只有一行的伸缩容器上没有效果。
  • 对应的脚本特性为alignContent。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-10.0 | 2.0-45.0 | 4.0-20.0 | 6.0 | 15.0+-webkit- | 6.0-6.1 | 2.1-4.3 | 18.0-19.0
 | 11.0+ |  | 21.0+-webkit- | 6.1+-webkit- | 17.0+ | 7.0+-webkit- | 4.4+ | 20.0+-webkit-
 |  |  | 29.0+ | 9.0+ |  | 9.0+ |  | 28.0+

示例：

本页最后更新时间：

2015.8.10


align-items

  • 版本：CSS3
  • 媒体：视觉

语法：

align-items：flex-start | flex-end | center | baseline | stretch

默认值：stretch

适用于：flex容器

继承性：无

动画性：是

计算值：指定值

取值：

flex-start：
弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：
弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：
弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline：
如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
stretch：
如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。

说明：

定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
  • 对应的脚本特性为alignItems。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-10.0 | 2.0-21.0 | 4.0-20.0 | 6.0 | 15.0+-webkit- | 6.0-6.1 | 2.1-4.3 | 18.0-19.0
 | 11.0+ | 22.0+ | 21.0+-webkit- | 6.1+-webkit- | 17.0+ | 7.0+-webkit- | 4.4+ | 20.0+-webkit-
 |  |  | 29.0+ | 9.0+ |  | 9.0+ |  | 28.0+

示例：

本页最后更新时间：

2015.8.10


align-self

  • 版本：CSS3
  • 媒体：视觉

语法：

align-self：auto | flex-start | flex-end | center | baseline | stretch

默认值：auto

适用于：flex子项

继承性：无

动画性：是

计算值：如果值为「auto」，则计算值为父元素的 <' align-items '> 值，否则为指定值。

取值：

auto：
如果'align-self'的值为'auto'，则其计算值为元素的父元素的'align-items'值，如果其没有父元素，则计算值为'stretch'。
flex-start：
弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：
弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：
弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline：
如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
stretch：
如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。

说明：

定义flex子项单独在侧轴（纵轴）方向上的对齐方式。
  • 对应的脚本特性为alignSelf。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-10.0 | 2.0-21.0 | 4.0-20.0 | 6.0 | 15.0+-webkit- | 6.0-6.1 | 2.1-4.3 | 18.0-19.0
 | 11.0+ | 22.0+ | 21.0+-webkit- | 6.1+-webkit- | 17.0+ | 7.0+-webkit- | 4.4+ | 20.0+-webkit-
 |  |  | 29.0+ | 9.0+ |  | 9.0+ |  | 28.0+

示例：

本页最后更新时间：

2015.8.10


justify-content

  • 版本：CSS3
  • 媒体：视觉

语法：

justify-content：flex-start | flex-end | center | space-between | space-around

默认值：flex-start

适用于：flex容器

继承性：无

动画性：是

计算值：指定值

取值：

flex-start：
弹性盒子元素将向行起始位置对齐。该行的第一个子元素的主起始位置的边界将与该行的主起始位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。
flex-end：
弹性盒子元素将向行结束位置对齐。该行的第一个子元素的主结束位置的边界将与该行的主结束位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。
center：
弹性盒子元素将向行中间位置对齐。该行的子元素将相互对齐并在行中居中对齐，同时第一个元素与行的主起始位置的边距等同与最后一个元素与行的主结束位置的边距（如果剩余空间是负数，则保持两端相等长度的溢出）。
space-between：
弹性盒子元素会平均地分布在行里。如果最左边的剩余空间是负数，或该行只有一个子元素，则该值等效于'flex-start'。在其它情况下，第一个元素的边界与行的主起始位置的边界对齐，同时最后一个元素的边界与行的主结束位置的边距对齐，而剩余的伸缩盒项目则平均分布，并确保两两之间的空白空间相等。
space-around：
弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半。如果最左边的剩余空间是负数，或该行只有一个伸缩盒项目，则该值等效于'center'。在其它情况下，伸缩盒项目则平均分布，并确保两两之间的空白空间相等，同时第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半。

说明：

设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
  • 当弹性盒里一行上的所有子元素都不能伸缩或已经达到其最大值时，这一属性可协助对多余的空间进行分配。当元素溢出某行时，这一属性同样会在对齐上进行控制。
  • 对应的脚本特性为justifyContent。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-10.0 | 2.0-21.0 | 4.0-20.0 | 6.0 | 15.0+-webkit- | 6.0-6.1 | 2.1-4.3 | 18.0-19.0
 | 11.0+ | 22.0+ | 21.0+-webkit- | 6.1+-webkit- | 17.0+ | 7.0+-webkit- | 4.4+ | 20.0+-webkit-
 |  |  | 29.0+ | 9.0+ |  | 9.0+ |  | 28.0+

示例：

本页最后更新时间：

2015.8.10


order

  • 版本：CSS3
  • 媒体：视觉

语法：

order：<integer>

默认值：0

适用于：flex子项和flex容器中的绝对定位子元素

继承性：无

动画性：是

计算值：指定值

取值：

<integer>：
用整数值来定义排列顺序，数值小的排在前面。可以为负值。

说明：

设置或检索弹性盒模型对象的子元素出現的順序。
  • order定义将会影响 <' position '> 值为static元素的层叠级别，数值小的会被数值大的盖住。

    demo：

    .test {
    display: flex;
}
.item2 {
    order: -1;
    margin: -30px;
}

<div class="test">
    <p class="item1">flex item1</p>
    <p class="item2">flex item2</p>
</div>

    此时，item1将会盖在item2之上

  • 对应的脚本特性为order。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-10.0 | 2.0-21.0 | 4.0-20.0 | 6.0 | 15.0+-webkit- | 6.0-6.1 | 2.1-4.3 | 18.0-19.0
 | 11.0+ | 22.0+ | 21.0+-webkit- | 6.1+-webkit- | 17.0+ | 7.0+-webkit- | 4.4+ | 20.0+-webkit-
 |  |  | 29.0+ | 9.0+ |  | 9.0+ |  | 28.0+

示例：

本页最后更新时间：

2015.7.29


Transform index

CSS3参考手册 » 属性列表 » 变换属性
相关内容：
其它变换属性参考 选择其它项

CSS Transform Module

  • CSS变换属性

变换 Transform

属性 | 版本 | 继承性 | 描述
transform | CSS3 | 无 | 检索或设置对象的变换
transform-origin | CSS3 | 无 | 检索或设置对象中的变换所参照的原点
transform-style | CSS3 | 无 | 指定某元素的子元素是否位于三维空间内
perspective | CSS3 | 无 | 指定观察者与「z=0」平面的距离
perspective-origin | CSS3 | 无 | 指定透视点的位置
backface-visibility | CSS3 | 无 | 指定元素背面面向用户时是否可见

紫色 链接表示该属性在CSS3有修改或者增加了新的属性值；橙色 链接表示该属性是CSS3新增属性


transform

  • 版本：CSS3
  • 2015.8.11

语法：

transform：none | <transform-function>+

transform-function list:

matrix() = matrix(<number>[,<number>]{5,5})

matrix3d() = matrix3d(<number>[,<number>]{15,15})

translate() = translate(<translation-value>[,<translation-value>]?)

translate3d() = translate3d(<translation-value>,<translation-value>,<length>)

translatex() = translatex(<translation-value>)

translatey() = translatey(<translation-value>)

translatez() = translatez(<length>)

rotate() = rotate(<angle>)

rotate3d() = rotate3d(<number>,<number>,<number>,<angle>)

rotatex() = rotatex(<angle>)

rotatey() = rotatey(<angle>)

rotatez() = rotatez(<angle>)

scale() = scale(<number>[,<number>]?)

scale3d() = scale3d(<number>,<number>,<number>)

scalex() = scalex(<number>)

scaley() = scaley(<number>)

scalez() = scalez(<number>)

skew() = skew(<angle>[,<angle>]?)

skewx() = skewx(<angle>)

skewy() = skewy(<angle>)

perspective() = perspective(<length>)

<translation-value> = <length> | <percentage>

默认值：none

适用于：所有块级元素及某些内联元素

继承性：无

动画性：是

计算值：指定值，但相对长度会转换为绝对长度

媒体：视觉

取值：

none：
无转换

2D Transform Functions：

matrix()：
以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a,b,c,d,e,f]变换矩阵
translate()：
指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
translatex()：
指定对象X轴（水平方向）的平移
translatey()：
指定对象Y轴（垂直方向）的平移
rotate()：
指定对象的2D rotation（2D旋转），需先有 <' transform-origin '> 属性的定义
scale()：
指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值
scalex()：
指定对象X轴的（水平方向）缩放
scaley()：
指定对象Y轴的（垂直方向）缩放
skew()：
指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
skewx()：
指定对象X轴的（水平方向）扭曲
skewy()：
指定对象Y轴的（垂直方向）扭曲

3D Transform Functions：

matrix3d()：
以一个4x4矩阵的形式指定一个3D变换
translate3d()：
指定对象的3D位移。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略
translatez()：
指定对象Z轴的平移
rotate3d()：
指定对象的3D旋转角度，其中前3个参数分别表示旋转的方向x,y,z，第4个参数表示旋转的角度，参数不允许省略
rotatex()：
指定对象在x轴上的旋转角度
rotatey()：
指定对象在y轴上的旋转角度
rotatez()：
指定对象在z轴上的旋转角度
scale3d()：
指定对象的3D缩放。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略
scalez()：
指定对象的z轴缩放
perspective()：
指定透视距离

说明：

设置或检索对象的转换。
  • 对应的脚本特性为transform。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-8.0 | 2.0-3.0 | 4.0-35.0-webkit- | 6.0-8.0-webkit- | 15.0-22.0-webkit- | 6.0-8.4-webkit- | 2.1-4.4.4-webkit- | 18.0-34.0-webkit-
 | 9.0-ms- | 3.5-15.0-moz- | 36.0+ | 9.0+ | 23.0+ | 9.0+ | 40.0+ | 35.0+
 | 10.0+ | 16.0+

示例：


transform-origin

  • 版本：CSS3
  • 2015.8.11

语法：

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。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-8.0 | 2.0-3.0 | 4.0-35.0-webkit- | 6.0-8.0-webkit- | 15.0-22.0-webkit- | 6.0-8.4-webkit- | 2.1-4.4.4-webkit- | 18.0-34.0-webkit-
 | 9.0-ms- | 3.5-15.0-moz- | 36.0+ | 9.0+ | 23.0+ | 9.0+ | 40.0+ | 35.0+
 | 10.0+ | 16.0+

示例：


transform-style

  • 版本：CSS3
  • 2015.8.11

语法：

transform-style：flat | preserve-3d

默认值：flat

适用于：变换元素

继承性：无

动画性：否

计算值：指定值

媒体：视觉

取值：

flat：
指定子元素位于此元素所在平面内
preserve-3d：
指定子元素定位在三维空间内

说明：

指定某元素的子元素是（看起来）位于三维空间内，还是在该元素所在的平面内被扁平化。
  • 当该属性值为「preserve-3d」时，元素将会创建局部堆叠上下文。
  • 决定一个变换元素看起来是处在三维空间还是平面内，需要该元素的父元素上定义 <' transform-style '> 属性。
  • 对应的脚本特性为transformStyle。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-9.0 | 2.0-9.0 | 4.0-11.0 | 6.0-8.0-webkit- | 15.0-22.0-webkit- | 6.0-8.4-webkit- | 2.1-2.3 | 18.0-34.0-webkit-
 | 10.0-11.0-ms-#1 | 10.0-15.0-moz- | 12.0-35.0-webkit- | 9.0+ | 23.0+ | 9.0+ | 3.0-4.4.4-webkit- | 35.0+
 | Edge | 16.0+ | 36.0+ |  |  |  | 40.0+
  1. 不支持「preserve-3d」属性值

示例：


perspective

  • 版本：CSS3
  • 2015.8.11

语法：

perspective：none | <length>

默认值：none

适用于：变换元素

继承性：无

动画性：当值为<length>时

计算值：绝对长度或「none」

媒体：视觉

取值：

none：
不指定透视
<length>：
指定观察者距离「z=0」平面的距离，为元素及其内容应用透视变换。不允许负值

说明：

指定观察者与「z=0」平面的距离，使具有三维位置变换的元素产生透视效果。「z>0」的三维元素比正常大，而「z<0」时则比正常小，大小程度由该属性的值决定。
  • 当该属性值为「非none」时，元素将会创建局部堆叠上下文。
  • 对应的脚本特性为perspective。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-9.0 | 2.0-9.0 | 4.0-11.0 | 6.0-8.0-webkit- | 15.0-22.0-webkit- | 6.0-8.4-webkit- | 2.1-2.3 | 18.0-34.0-webkit-
 | 10.0-11.0-ms- | 10.0-15.0-moz- | 12.0-35.0-webkit- | 9.0+ | 23.0+ | 9.0+ | 3.0-4.4.4-webkit- | 35.0+
 | Edge | 16.0+ | 36.0+ |  |  |  | 40.0+

示例：


perspective-origin

  • 版本：CSS3
  • 2015.8.11

语法：

perspective-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个参数值。
  • 如果提供两个，第一个用于横坐标，第二个用于纵坐标。
  • 如果只提供一个，该值将用于横坐标；纵坐标将默认为center。
  • 对应的脚本特性为perspactiveOrigin。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-9.0 | 2.0-9.0 | 4.0-11.0 | 6.0-8.0-webkit- | 15.0-22.0-webkit- | 6.0-8.4-webkit- | 2.1-2.3 | 18.0-34.0-webkit-
 | 10.0-11.0-ms- | 10.0-15.0-moz- | 12.0-35.0-webkit- | 9.0+ | 23.0+ | 9.0+ | 3.0-4.4.4-webkit- | 35.0+
 | Edge | 16.0+ | 36.0+ |  |  |  | 40.0+

示例：


backface-visibility

  • 版本：CSS3
  • 2015.8.11

语法：

backface-visibility：visible | hidden

默认值：visible

适用于：变换元素

继承性：无

动画性：否

计算值：指定值

媒体：视觉

取值：

visible：
指定元素背面可见，允许显示正面的镜像。
hidden：
指定元素背面不可见

说明：

指定元素背面面向用户时是否可见。
  • 决定一个元素背面面向用户时是否可见，需要直接在该元素上定义 <' backface-visibility '> 属性，而不能在其父元素上，因为该属性默认为不可继承。
  • 对应的脚本特性为backfaceVisibility。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-9.0 | 2.0-9.0 | 4.0-11.0 | 6.0-8.0-webkit- | 15.0-22.0-webkit- | 6.0-8.4-webkit- | 2.1-2.3 | 18.0-34.0-webkit-
 | 10.0-11.0-ms- | 10.0-15.0-moz- | 12.0-35.0-webkit- | 9.0+ | 23.0+ | 9.0+ | 3.0-4.4.4-webkit- | 35.0+
 | Edge | 16.0+ | 36.0+ |  |  |  | 40.0+

示例：


Transition index

CSS3参考手册 » 属性列表 » 过渡属性
相关内容：
其它过渡属性参考 选择其它项

CSS Transitions Module

  • CSS过渡属性

过渡 Transition

属性 | 版本 | 继承性 | 描述
transition | CSS3 | 无 | 复合属性。检索或设置对象变换时的过渡效果
transition-property | CSS3 | 无 | 检索或设置对象中的参与过渡的属性
transition-duration | CSS3 | 无 | 检索或设置对象过渡的持续时间
transition-timing-function | CSS3 | 无 | 检索或设置对象中过渡的类型
transition-delay | CSS3 | 无 | 检索或设置对象延迟过渡的时间

紫色 链接表示该属性在CSS3有修改或者增加了新的属性值；橙色 链接表示该属性是CSS3新增属性


transition

  • 版本：CSS3
  • 2015.8.12

语法：

transition：<single-transition>[,<single-transition>]*

<single-transition> = [ none | <single-transition-property> ] || <time> || <single-transition-timing-function> || <time>

默认值：看每个独立属性

适用于：所有元素，包含伪对象:after和:before

继承性：无

动画性：否

计算值：看每个独立属性

媒体：交互

取值：

<' transition-property '>：
检索或设置对象中的参与过渡的属性
<' transition-duration '>：
检索或设置对象过渡的持续时间
<' transition-timing-function '>：
检索或设置对象中过渡的动画类型
<' transition-delay '>：
检索或设置对象延迟过渡的时间

说明：

复合属性。检索或设置对象变换时的过渡。
  • 注意：如果只提供一个<time>参数，则为 <' transition-duration '> 的值定义；如果提供二个<time>参数，则第一个为 <' transition-duration '> 的值定义，第二个为 <' 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。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-9.0 | 2.0-3.6 | 4.0-25.0-webkit- | 6.0-webkit- | 15.0+ | 6.0-6.1-webkit- | 2.1-4.3-webkit- | 18.0-24.0-webkit-
 | 10.0+ | 4.0-15.0-moz- | 26.0+ | 6.1+ |  | 7.0+ | 4.4.4+ | 25.0+
 |  | 16.0+

示例：


transition-property

  • 版本：CSS3
  • 2015.8.12

语法：

transition-property：none | <single-transition-property>[ ,<single-transition-property> ]*

<single-transition-property> = all | <IDENT>

默认值：all

适用于：所有元素，包含伪对象:after和:before

继承性：无

动画性：否

计算值：指定值

媒体：视觉

取值：

none：
不指定过渡的css属性
all：
所有可以进行过渡的css属性
<IDENT>：
指定要进行过渡的css属性

说明：

检索或设置对象中的参与过渡的属性。
  • 默认值为：all。默认为所有可以进行过渡的css属性。
  • 如果提供多个属性值，以逗号进行分隔。
  • 对应的脚本特性为transitionProperty。

有过渡效果的属性：

属性名称 | 类型
transform | all
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

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-9.0 | 2.0-3.6 | 4.0-25.0-webkit- | 6.0-webkit- | 15.0+ | 6.0-6.1-webkit- | 2.1-4.3-webkit- | 18.0-24.0-webkit-
 | 10.0+ | 4.0-15.0-moz- | 26.0+ | 6.1+ |  | 7.0+ | 4.4.4+ | 25.0+
 |  | 16.0+

示例：


transition-duration

  • 版本：CSS3
  • 2015.8.12

语法：

transition-duration：<time>[ ,<time> ]*

默认值：0

适用于：所有元素，包含伪对象:after和:before

继承性：无

动画性：否

计算值：指定值

媒体：交互

取值：

<time>：
指定对象过渡的持续时间

说明：

检索或设置对象过渡的持续时间。
  • 如果提供多个属性值，以逗号进行分隔。
  • 对应的脚本特性为transitionDuration。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-9.0 | 2.0-3.6 | 4.0-25.0-webkit- | 6.0-webkit- | 15.0+ | 6.0-6.1-webkit- | 2.1-4.3-webkit- | 18.0-24.0-webkit-
 | 10.0+ | 4.0-15.0-moz- | 26.0+ | 6.1+ |  | 7.0+ | 4.4.4+ | 25.0+
 |  | 16.0+

示例：


transition-timing-function

  • 版本：CSS3
  • 2015.8.12

语法：

transition-timing-function：<single-transition-timing-function>[,<single-transition-timing-function>]*

<single-transition-timing-function> = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>)

默认值：ease

适用于：所有元素，包含伪对象:after和:before

继承性：无

动画性：否

计算值：指定值

媒体：交互

取值：

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)
step-start：
等同于 steps(1, start)
step-end：
等同于 steps(1, end)
steps(<integer>[, [ start | end ] ]?)：
接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。
cubic-bezier(<number>, <number>, <number>, <number>)：
特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

说明：

检索或设置对象中过渡的动画类型。
  • 如果提供多个属性值，以逗号进行分隔。
  • 对应的脚本特性为transitionTimingFunction。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-9.0 | 2.0-3.6 | 4.0-25.0-webkit- | 6.0-webkit- | 15.0+ | 6.0-6.1-webkit- | 2.1-4.3-webkit- | 18.0-24.0-webkit-
 | 10.0+ | 4.0-15.0-moz- | 26.0+ | 6.1+ |  | 7.0+ | 4.4.4+ | 25.0+
 |  | 16.0+

示例：


transition-delay

  • 版本：CSS3
  • 2015.8.12

语法：

transition-delay：<time>[ ,<time> ]*

默认值：0

适用于：所有元素，包含伪对象:after和:before

继承性：无

动画性：否

计算值：指定值

媒体：交互

取值：

<time>：
指定对象过渡的延迟时间

说明：

检索或设置对象延迟过渡的时间。
  • 如果提供多个属性值，以逗号进行分隔。
  • 对应的脚本特性为transitionDelay。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-9.0 | 2.0-3.6 | 4.0-25.0-webkit- | 6.0-webkit- | 15.0+ | 6.0-6.1-webkit- | 2.1-4.3-webkit- | 18.0-24.0-webkit-
 | 10.0+ | 4.0-15.0-moz- | 26.0+ | 6.1+ |  | 7.0+ | 4.4.4+ | 25.0+
 |  | 16.0+

示例：


Animation index

CSS3参考手册 » 属性列表 » 动画属性
相关内容：
其它动画属性参考 选择其它项

CSS Animations Module

  • CSS动画属性

动画 Animation

属性 | 版本 | 继承性 | 描述
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

  • 版本：CSS3
  • 2015.8.13

语法：

animation：<single-animation>[,<single-animation>]*

<single-animation> = <single-animation-name> || <time> || <single-animation-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state>

默认值：看每个独立属性

适用于：所有元素，包含伪对象:after和:before

继承性：无

动画性：否

计算值：看每个独立属性

媒体：视觉

取值：

<' animation-name '>：
检索或设置对象所应用的动画名称
<' animation-duration '>：
检索或设置对象动画的持续时间
<' animation-timing-function '>：
检索或设置对象动画的过渡类型
<' animation-delay '>：
检索或设置对象动画延迟的时间
<' animation-iteration-count '>：
检索或设置对象动画的循环次数
<' animation-direction '>：
检索或设置对象动画在循环中是否反向运动
<' animation-fill-mode '>：
检索或设置对象动画时间之外的状态
<' animation-play-state '>：
检索或设置对象动画的状态。w3c正考虑是否将该属性移除，因为动画的状态可以通过其它的方式实现，比如重设样式

说明：

复合属性。检索或设置对象所应用的动画特效。
  • 如果提供多组属性值，以逗号进行分隔。
  • 注意：如果只提供一个<time>参数，则为 <' animation-duration '> 的值定义；如果提供二个<time>参数，则第一个为 <' animation-duration '> 的值定义，第二个为 <' animation-delay '> 的值定义
  • 对应的脚本特性为animation。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-9.0 | 2.0-4.0 | 4.0-42.0-webkit- | 6.0-8.0-webkit- | 15.0-29.0-webkit- | 6.0-8.4-webkit- | 2.1-3.0-webkit- #1 | 18.0-42.0-webkit-
 | 10.0+ | 5.0-15.0-moz- | 43.0+ | 9.0+ | 30.0+ | 9.0+ | 4.0-40.0-webkit-
 |  | 16.0+
  1. 在一些场景中会有错误行为
  2. 部分浏览器不支持伪元素动画，或者支持得不够好，尽可能不要利用伪元素来做动画

示例：


animation-name

  • 版本：CSS3
  • 2015.8.13

语法：

animation-name：<single-animation-name>[,<single-animation-name>]*

<single-animation-name> = none | <identifier>

默认值：none

适用于：所有元素，包含伪对象:after和:before

继承性：无

动画性：否

计算值：指定值

媒体：视觉

相关属性：[ @keyframes ]

取值：

none：
不引用任何动画名称
<identifier>：
定义一个或多个动画名称(identifier标识)

说明：

检索或设置对象所应用的动画名称，必须与规则@keyframes配合使用，因为动画名称由@keyframes定义
  • 如果提供多个属性值，以逗号进行分隔。
  • 对应的脚本特性为animationName。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-9.0 | 2.0-4.0 | 4.0-42.0-webkit- | 6.0-8.0-webkit- | 15.0-29.0-webkit- | 6.0-8.4-webkit- | 2.1-3.0-webkit- #1 | 18.0-42.0-webkit-
 | 10.0+ | 5.0-15.0-moz- | 43.0+ | 9.0+ | 30.0+ | 9.0+ | 4.0-40.0-webkit-
 |  | 16.0+
  1. 在一些场景中会有错误行为
  2. 部分浏览器不支持伪元素动画，或者支持得不够好，尽可能不要利用伪元素来做动画

示例：


animation-duration

  • 版本：CSS3
  • 2015.8.13

语法：

animation-duration：<time>[,<time>]*

默认值：0s

适用于：所有元素，包含伪对象:after和:before

继承性：无

动画性：否

计算值：指定值

媒体：视觉

取值：

<time>：
指定对象动画的持续时间

说明：

检索或设置对象动画的持续时间
  • 如果提供多个属性值，以逗号进行分隔。
  • 对应的脚本特性为animationDuration。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-9.0 | 2.0-4.0 | 4.0-42.0-webkit- | 6.0-8.0-webkit- | 15.0-29.0-webkit- | 6.0-8.4-webkit- | 2.1-3.0-webkit- #1 | 18.0-42.0-webkit-
 | 10.0+ | 5.0-15.0-moz- | 43.0+ | 9.0+ | 30.0+ | 9.0+ | 4.0-40.0-webkit-
 |  | 16.0+
  1. 在一些场景中会有错误行为
  2. 部分浏览器不支持伪元素动画，或者支持得不够好，尽可能不要利用伪元素来做动画

示例：


animation-timing-function

  • 版本：CSS3
  • 2015.8.13

语法：

animation-timing-function：<single-animation-timing-function>[,<single-animation-timing-function>]*

<single-animation-timing-function> = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>)

默认值：ease

适用于：所有元素，包含伪对象:after和:before

继承性：无

动画性：否

计算值：指定值

媒体：视觉

取值：

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)
step-start：
等同于 steps(1, start)
step-end：
等同于 steps(1, end)
steps(<integer>[, [ start | end ] ]?)：
接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。
cubic-bezier(<number>, <number>, <number>, <number>)：
特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

说明：

检索或设置对象动画的过渡类型
  • 如果提供多个属性值，以逗号进行分隔。
  • 对应的脚本特性为animationTimingFunction。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-9.0 | 2.0-4.0 | 4.0-42.0-webkit- | 6.0-8.0-webkit- | 15.0-29.0-webkit- | 6.0-8.4-webkit- | 2.1-3.0-webkit- #1 | 18.0-42.0-webkit-
 | 10.0+ | 5.0-15.0-moz- | 43.0+ | 9.0+ | 30.0+ | 9.0+ | 4.0-40.0-webkit-
 |  | 16.0+
  1. 在一些场景中会有错误行为
  2. 部分浏览器不支持伪元素动画，或者支持得不够好，尽可能不要利用伪元素来做动画

示例：


animation-delay

  • 版本：CSS3
  • 2015.8.13

语法：

animation-delay：<time>[,<time>]*

默认值：0s

适用于：所有元素，包含伪对象:after和:before

继承性：无

动画性：否

计算值：指定值

媒体：视觉

取值：

<time>：
指定对象动画延迟的时间

说明：

检索或设置对象动画的延迟时间
  • 如果提供多个属性值，以逗号进行分隔。
  • 对应的脚本特性为animationDelay。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-9.0 | 2.0-4.0 | 4.0-42.0-webkit- | 6.0-8.0-webkit- | 15.0-29.0-webkit- | 6.0-8.4-webkit- | 2.1-3.0-webkit- #1 | 18.0-42.0-webkit-
 | 10.0+ | 5.0-15.0-moz- | 43.0+ | 9.0+ | 30.0+ | 9.0+ | 4.0-40.0-webkit-
 |  | 16.0+
  1. 在一些场景中会有错误行为
  2. 部分浏览器不支持伪元素动画，或者支持得不够好，尽可能不要利用伪元素来做动画

示例：


animation-iteration-count

  • 版本：CSS3
  • 2015.8.13

语法：

animation-iteration-count：<single-animation-iteration-count>[,<single-animation-iteration-count>]*

<single-animation-iteration-count> = infinite | <number>

默认值：1

适用于：所有元素，包含伪对象:after和:before

继承性：无

动画性：否

计算值：指定值

媒体：视觉

取值：

infinite：
无限循环
<number>：
指定对象动画的具体循环次数

说明：

检索或设置对象动画的循环次数
  • 如果提供多个属性值，以逗号进行分隔。
  • 对应的脚本特性为animationIterationCount。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-9.0 | 2.0-4.0 | 4.0-42.0-webkit- | 6.0-8.0-webkit- | 15.0-29.0-webkit- | 6.0-8.4-webkit- | 2.1-3.0-webkit- #1 | 18.0-42.0-webkit-
 | 10.0+ | 5.0-15.0-moz- | 43.0+ | 9.0+ | 30.0+ | 9.0+ | 4.0-40.0-webkit-
 |  | 16.0+
  1. 在一些场景中会有错误行为
  2. 部分浏览器不支持伪元素动画，或者支持得不够好，尽可能不要利用伪元素来做动画

示例：


animation-direction

  • 版本：CSS3
  • 2015.8.13

语法：

animation-direction：<single-animation-direction>[,<single-animation-direction>]*

<single-animation-direction> = normal | reverse | alternate | alternate-reverse

默认值：normal

适用于：所有元素，包含伪对象:after和:before

继承性：无

动画性：否

计算值：指定值

媒体：视觉

取值：

normal：
正常方向
reverse：
反方向运行
alternate：
动画先正常运行再反方向运行，并持续交替运行
alternate-reverse：
动画先反运行再正方向运行，并持续交替运行

说明：

检索或设置对象动画在循环中是否反向运动
  • 如果提供多个属性值，以逗号进行分隔。
  • 对应的脚本特性为animationDirection。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-9.0 | 2.0-4.0 | 4.0-42.0-webkit- | 6.0-8.0-webkit- | 15.0-29.0-webkit- | 6.0-8.4-webkit- | 2.1-3.0-webkit- #1 | 18.0-42.0-webkit-
 | 10.0+ | 5.0-15.0-moz- | 43.0+ | 9.0+ | 30.0+ | 9.0+ | 4.0-40.0-webkit-
 |  | 16.0+
  1. 在一些场景中会有错误行为
  2. 部分浏览器不支持伪元素动画，或者支持得不够好，尽可能不要利用伪元素来做动画

示例：


animation-play-state

  • 版本：CSS3
  • 2015.8.13

语法：

animation-play-state：<single-animation-play-state>[,<single-animation-play-state>]*

<single-animation-play-state> = running | paused

默认值：running

适用于：所有元素，包含伪对象:after和:before

继承性：无

动画性：否

计算值：指定值

媒体：视觉

取值：

running：
运动
paused：
暂停

说明：

检索或设置对象动画的状态
  • 如果提供多个属性值，以逗号进行分隔。
  • 对应的脚本特性为animationPlayState。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-9.0 | 2.0-4.0 | 4.0-42.0-webkit- | 6.0-8.0-webkit- | 15.0-29.0-webkit- | 6.0-8.4-webkit- | 2.1-3.0-webkit- #1 | 18.0-42.0-webkit-
 | 10.0+ | 5.0-15.0-moz- | 43.0+ | 9.0+ | 30.0+ | 9.0+ | 4.0-40.0-webkit-
 |  | 16.0+
  1. 在一些场景中会有错误行为
  2. 部分浏览器不支持伪元素动画，或者支持得不够好，尽可能不要利用伪元素来做动画

示例：


animation-fill-mode

  • 版本：CSS3
  • 2015.8.13

语法：

animation-fill-mode：<single-animation-fill-mode>[,<single-animation-fill-mode>]*

<single-animation-fill-mode> = none | forwards | backwards | both

默认值：none

适用于：所有元素，包含伪对象:after和:before

继承性：无

动画性：否

计算值：指定值

媒体：视觉

取值：

none：
默认值。不设置对象动画之外的状态
forwards：
设置对象状态为动画结束时的状态
backwards：
设置对象状态为动画开始时的状态
both：
设置对象状态为动画结束或开始的状态

说明：

检索或设置对象动画时间之外的状态
  • 如果提供多个属性值，以逗号进行分隔。
  • 对应的脚本特性为animationFillMode。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-9.0 | 2.0-4.0 | 4.0-42.0-webkit- | 6.0-8.0-webkit- | 15.0-29.0-webkit- | 6.0-8.4-webkit- | 2.1-3.0-webkit- #1 | 18.0-42.0-webkit-
 | 10.0+ | 5.0-15.0-moz- | 43.0+ | 9.0+ | 30.0+ | 9.0+ | 4.0-40.0-webkit-
 |  | 16.0+
  1. 在一些场景中会有错误行为
  2. 部分浏览器不支持伪元素动画，或者支持得不够好，尽可能不要利用伪元素来做动画

示例：


Printing index

CSS3参考手册 » 属性列表 » 打印属性
相关内容：
其它打印属性参考 选择其它项

CSS Printing Module

  • CSS打印属性

打印 Printing

属性 | 版本 | 继承性 | 描述
page | CSS3 | 无 | 检索或指定显示对象容器时使用的页面类型。
page-break-before | CSS2 | 无 | 检索或设置对象之前出现的页分割符。
page-break-after | CSS2 | 无 | 检索或设置对象之后出现的页分割符。
page-break-inside | CSS2 | 无 | 检索或设置对象容器内部出现的页分割符。

紫色 链接表示该属性在CSS3有修改或者增加了新的属性值；橙色 链接表示该属性是CSS3新增属性


page

  • 版本：CSS3
  • 2015.8.12

语法：

page：auto | <identifier>

默认值：auto

适用于：所有元素

继承性：无

动画性：否

计算值：指定值

媒体：页面

取值：

auto：
参照当前的默认页面
<identifier>：
指定@page规则下的页面类型定义

说明：

检索或指定显示对象容器时使用的页面类型。参阅@page

  • 示例代码：

    @page rotated{size:landscape;}
p{page:rotated;page-break-before:left;}
  • 对应的脚本特性为page。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-7.0 | 2.0+ | 4.0+ | 6.0 | 15.0+ | 6.0+ | 2.1+ | 18.0+
 | 8.0+


page-break-before

  • 版本：CSS2
  • 2015.8.12

语法：

page-break-before：auto | always | avoid | left | right

默认值：auto

适用于：所有元素

继承性：无

动画性：否

计算值：指定值

媒体：页面

取值：

auto：
如果需要，在对象之前插入页分割符
always：
始终在对象之前插入页分割符
avoid：
避免在对象前面插入页分割符
left：
在对象前面插入页分割符直到它到达一个空白的左页边
right：
在对象前面插入页分割符直到它到达一个空白的右页边

说明：

检索或设置对象之前出现的页分割符。
  • 对应的脚本特性为pageBreakBefore。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 6.0 | 15.0+ | 6.0+ | 2.1+ | 18.0+

示例：


page-break-after

  • 版本：CSS2
  • 2015.8.12

语法：

page-break-after：auto | always | avoid | left | right

默认值：auto

适用于：所有元素

继承性：无

动画性：否

计算值：指定值

媒体：页面

取值：

auto：
如果需要，在对象之后插入页分割符
always：
始终在对象之后插入页分割符
avoid：
避免在对象之后插入页分割符
left：
在对象之后插入页分割符直到它到达一个空白的左页边
right：
在对象之后插入页分割符直到它到达一个空白的右页边

说明：

检索或设置对象之后出现的页分割符。
  • 对应的脚本特性为pageBreakAfter。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 6.0 | 15.0+ | 6.0+ | 2.1+ | 18.0+

示例：


page-break-inside

  • 版本：CSS2
  • 2015.8.12

语法：

page-break-inside：auto | avoid

默认值：auto

适用于：所有元素

继承性：无

动画性：否

计算值：指定值

媒体：页面

取值：

auto：
如果需要，在当前对象内部插入页分割符
avoid：
避免在当前对象内部插入页分割符

说明：

检索或设置对象容器内部出现的页分割符。
  • 对应的脚本特性为pageBreakInside。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 6.0 | 15.0+ | 6.0+ | 2.1+ | 18.0+

示例：


Media Queries Index

CSS3参考手册 » 属性列表 » 媒体查询属性
相关内容：
其它媒体查询属性 选择其它项

CSS Media Queries Module

  • CSS媒体查询
  • 媒体：视觉

语法：

<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

媒体特性 | 取值 | 接受min/max | 描述
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-8 | 4 | 5.1.7 | 13 | 11.5
版本 | 9


width of media queries

相关内容：
其它媒体查询属性 选择其它项

Media Queries: width

  • 版本：CSS3
  • 媒体：视觉

语法：

width：<length>

接受min/max前缀：是

取值：

<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" ?>

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-8.0 | 2.0-3.0 | 4.0-25.0#1 | 6.0#1 | 15.0+ | 6.0-6.1#1 | 2.1-4.3#1 | 18.0-24.0#1
 | 9.0#1 #2 | 3.5-9.0#3 | 26.0+ | 6.1+ |  | 7.0+ | 4.4+ | 25.0+
 | 10.0-11.0#1 | 10.0+
  1. 不支持嵌套媒体查询。
  2. 使用width作为媒体查询条件，是包含滚动条在内的
  3. 支持min-width但却无效。

示例：


height of media queries

相关内容：
其它媒体查询属性 选择其它项

Media Queries: 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);

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-8.0 | 2.0-3.0 | 4.0-25.0#1 | 6.0#1 | 15.0+ | 6.0-6.1#1 | 2.1-4.3#1 | 18.0-24.0#1
 | 9.0#1 #2 | 3.5+ | 26.0+ | 6.1+ |  | 7.0+ | 4.4+ | 25.0+
 | 10.0-11.0#1
  1. 不支持嵌套媒体查询。
  2. 使用height作为媒体查询条件，是包含滚动条在内的

示例：


device-width of media queries

相关内容：
其它媒体查询属性 选择其它项

Media Queries: 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" />

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-8.0 | 2.0-3.0 | 4.0-25.0#1 | 6.0#1 | 15.0+ | 6.0-6.1#1 | 2.1-4.3#1 | 18.0-24.0#1
 | 9.0-11.0#1 | 3.5+ | 26.0+ | 6.1+ |  | 7.0+ | 4.4+ | 25.0+
  1. 不支持嵌套媒体查询。

示例：


device-height of media queries

相关内容：
其它媒体查询属性 选择其它项

Media Queries: 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" />

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-8.0 | 2.0-3.0 | 4.0-25.0#1 | 6.0#1 | 15.0+ | 6.0-6.1#1 | 2.1-4.3#1 | 18.0-24.0#1
 | 9.0-11.0#1 | 3.5+ | 26.0+ | 6.1+ |  | 7.0+ | 4.4+ | 25.0+
  1. 不支持嵌套媒体查询。

示例：


orientation of media queries

相关内容：
其它媒体查询属性 选择其它项

Media Queries: orientation

  • 版本：CSS3
  • 媒体：视觉

语法：

orientation：portrait | landscape

接受min/max前缀：是

取值：

portrait：
指定输出设备中的页面可见区域高度大于或等于宽度
landscape：
除portrait值情况外，都是landscape

说明：

定义输出设备中的页面可见区域高度是否大于或等于宽度。
  • 本特性不接受min和max前缀。

    简单列举几个应用示例：

    @media screen and (orientation:portrait){ … }
@import url(example.css) screen and (orientation:landscape);

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-8.0 | 2.0-3.0 | 4.0-25.0#1 | 6.0#1 | 15.0+ | 6.0-6.1#1 | 2.1-4.3#1 | 18.0-24.0#1
 | 9.0-11.0#1 | 3.5+ | 26.0+ | 6.1+ |  | 7.0+ | 4.4+ | 25.0+
  1. 不支持嵌套媒体查询。

示例：


aspect-ratio of media queries

相关内容：
其它媒体查询属性 选择其它项

Media Queries: 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);

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-8.0 | 2.0-3.0 | 4.0-25.0#1 | 6.0#1 | 15.0+ | 6.0-6.1#1 | 2.1-4.3#1 | 18.0-24.0#1
 | 9.0-11.0#1 | 3.5+ | 26.0+ | 6.1+ |  | 7.0+ | 4.4+ | 25.0+
  1. 不支持嵌套媒体查询。

示例：


device-aspect-ratio of media queries

相关内容：
其它媒体查询属性 选择其它项

Media Queries: 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);

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-8.0 | 2.0-3.0 | 4.0-25.0#1 | 6.0#1 | 15.0+ | 6.0-6.1#1 | 2.1-4.3#1 | 18.0-24.0#1
 | 9.0-11.0#1 | 3.5+ | 26.0+ | 6.1+ |  | 7.0+ | 4.4+ | 25.0+
  1. 不支持嵌套媒体查询。

示例：


color of media queries

相关内容：
其它媒体查询属性 选择其它项

Media Queries: 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" />

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-8.0 | 2.0-3.0 | 4.0-25.0#1 | 6.0#1 | 15.0+ | 6.0-6.1#1 | 2.1-4.3#1 | 18.0-24.0#1
 | 9.0-11.0#1 | 3.5+ | 26.0+ | 6.1+ |  | 7.0+ | 4.4+ | 25.0+
  1. 不支持嵌套媒体查询。

示例：


color-index of media queries

相关内容：
其它媒体查询属性 选择其它项

Media Queries: 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" />

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-8.0 | 2.0-3.0 | 4.0-25.0#1 | 6.0#1 | 15.0+ | 6.0-6.1#1 | 2.1-4.3#1 | 18.0-24.0#1
 | 9.0-11.0#1 | 3.5+ | 26.0+ | 6.1+ |  | 7.0+ | 4.4+ | 25.0+
  1. 不支持嵌套媒体查询。

示例：


monochrome of media queries

相关内容：
其它媒体查询属性 选择其它项

Media Queries: monochrome

  • 版本：CSS3
  • 媒体：视觉

语法：

monochrome：<integer>

接受min/max前缀：是

取值：

<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" ?>

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-8.0 | 2.0-3.0 | 4.0-25.0#1 | 6.0#1 | 15.0+ | 6.0-6.1#1 | 2.1-4.3#1 | 18.0-24.0#1
 | 9.0-11.0#1 | 3.5+ | 26.0+ | 6.1+ |  | 7.0+ | 4.4+ | 25.0+
  1. 不支持嵌套媒体查询。

示例：


resolution of media queries

相关内容：
其它媒体查询属性 选择其它项

Media Queries: 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-8 | 4 | 5.1.7 | 13-23 | 11.5
较近版本 | 9

示例：


scan of media queries

相关内容：
其它媒体查询属性 选择其它项

Media Queries: 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-8 | 4 | 5.1.7 | 13-23 | 11.5
较近版本 | 9

示例：


grid of media queries

相关内容：
其它媒体查询属性 选择其它项

Media Queries: 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-8 | 4 | 5.1.7 | 13 | 11.5
较近版本 | 9

示例：


Only IE index

CSS3参考手册 » 属性列表 » Only IE属性
相关内容：
Only IE属性 选择其它项

CSS Only IE Properties

  • Only IE属性

常用IE私有属性

属性 | 版本 | 继承性 | 描述
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

  • 版本：CSS1
  • 媒体：视觉

语法：

scrollbar-3dlight-color：<color>

默认值：threedlightshadow

适用于：除table系外的所有块级元素

继承性：有

动画性：是

计算值：指定值

取值：

<color>：
指定颜色。

说明：

检索或设置对象滚动条3d亮色阴影边框(threedlightshadow)的外观颜色。
  • 对应的脚本特性为scrollbar3dLightColor。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE
Basic Support | 6.0+

示例：


scrollbar-darkshadow-color

  • 版本：CSS1
  • 媒体：视觉

语法：

scrollbar-darkshadow-color：<color>

默认值：threeddarkshadow

适用于：除table系外的所有块级元素

继承性：有

动画性：是

计算值：指定值

取值：

<color>：
指定颜色。

说明：

检索或设置对象滚动条3d暗色阴影边框(threeddarkshadow)的外观颜色。
  • 对应的脚本特性为scrollbarDarkShadowColor。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE
Basic Support | 6.0+

示例：


scrollbar-highlight-color

  • 版本：CSS1
  • 媒体：视觉

语法：

scrollbar-highlight-color：<color>

默认值：threedhighlight

适用于：除table系外的所有块级元素

继承性：有

动画性：是

计算值：指定值

取值：

<color>：
指定颜色。

说明：

检索或设置对象滚动条3d高亮边框(threedhighlight)的外观颜色。
  • 对应的脚本特性为scrollbarHighlightColor。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE
Basic Support | 6.0+

示例：


scrollbar-shadow-color

  • 版本：CSS1
  • 媒体：视觉

语法：

scrollbar-shadow-color：<color>

默认值：threedshadow

适用于：除table系外的所有块级元素

继承性：有

动画性：是

计算值：指定值

取值：

<color>：
指定颜色。

说明：

检索或设置对象滚动条3d阴影边框(threedshadow)的外观颜色。
  • 对应的脚本特性为scrollbarShadowColor。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE
Basic Support | 6.0+

示例：


scrollbar-arrow-color

  • 版本：CSS1
  • 媒体：视觉

语法：

scrollbar-arrow-color：<color>

默认值：buttontext

适用于：除table系外的所有块级元素

继承性：有

动画性：是

计算值：指定值

取值：

<color>：
指定颜色。

说明：

检索或设置对象滚动条方向箭头的颜色。当滚动条出现但不可用时，此属性失效。
  • 对应的脚本特性为scrollbarArrowColor。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE
Basic Support | 6.0+

示例：


scrollbar-face-color

  • 版本：CSS1
  • 媒体：视觉

语法：

scrollbar-face-color：<color>

默认值：threedface

适用于：除table系外的所有块级元素

继承性：有

动画性：是

计算值：指定值

取值：

<color>：
指定颜色。

说明：

检索或设置对象滚动条3D表面的(threedface)的外观颜色。
  • 对应的脚本特性为scrollbarFaceColor。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE
Basic Support | 6.0+

示例：


scrollbar-track-color

  • 版本：CSS1
  • 媒体：视觉

语法：

scrollbar-track-color：<color>

默认值：transparent

适用于：除table系外的所有块级元素

继承性：有

动画性：是

计算值：指定值

取值：

<color>：
指定颜色。

说明：

检索或设置对象滚动条拖动区域的外观颜色。
  • 对应的脚本特性为scrollbarTrackColor。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE
Basic Support | 6.0+

示例：


scrollbar-base-color

  • 版本：CSS1
  • 媒体：视觉

语法：

scrollbar-base-color：<color>

默认值：transparent

适用于：除table系外的所有块级元素

继承性：有

动画性：是

计算值：指定值

取值：

<color>：
指定颜色。

说明：

检索或设置对象滚动条基准颜色。其它界面颜色将据此自动调整。
  • 对应的脚本特性为scrollbarBaseColor。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE
Basic Support | 6.0+

示例：


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。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE
Basic Support | 6.0-9.0
 | 10.0-11.0

示例：


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。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE
Basic Support | 6.0-9.0
 | 10.0-11.0

示例：

div{behavior:url(fly.htc) url(shy.htc);}


Only Webkit index

CSS3参考手册 » 属性列表 » Only Webkit属性
相关内容：
Only Webkit属性 选择其它项

CSS Only Webkit Properties

  • Only Webkit属性

常用Webkit私有属性

属性 | 版本 | 继承性 | 描述
-webkit-text-fill-color | CSS3 | 有 | 定义文字填充色
-webkit-text-stroke | CSS3 | 有 | 复合属性。定义文字的描边样式。
-webkit-text-stroke-width | CSS3 | 有 | 定义文字描边的厚度
-webkit-text-stroke-color | CSS3 | 有 | 定义文字描边的颜色
-webkit-box-reflect | CSS3 | 有 | 为元素设置倒影
-webkit-tap-highlight-color | CSS3 | 无 | 定义元素轻按时高亮
-webkit-user-drag | CSS3 | 无 | 用以设置一个元素和它的内容是否可以被拖拽
-webkit-overflow-scrolling | CSS3 | 无 | 指定元素是否使用native-style（滚动回弹效果）来滚动溢出内容

紫色 链接表示该属性在CSS3有修改或者增加了新的属性值；橙色 链接表示该属性是CSS3新增属性


-webkit-text-fill-color

  • 版本：CSS3
  • 媒体：视觉

语法：

-webkit-text-fill-color：<color>

默认值：transparent

适用于：所有元素

继承性：有

动画性：是

计算值：指定值

取值：

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

说明：

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

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-11.0 | 2.0-40.0 | 4.0-45.0-webkit- | 4.0-8.0-webkit- | 15.0-29.0-webkit- | 4.0-8.3-webkit- | 2.1-4.4.4-webkit- | 18.0-42.0-webkit-

示例：


-webkit-text-stroke

  • 版本：CSS3
  • 媒体：视觉

语法：

-webkit-text-stroke：-webkit-text-stroke-width || -webkit-text-stroke-color

默认值：看每个独立属性

适用于：所有元素

继承性：有

动画性：看每个独立属性

计算值：看每个独立属性

取值：

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

说明：

复合属性。定义文字的描边样式。
  • 通过 -webkit-text-stroke 属性，可以做出描边文字的效果。Demo: 描边文字 See with Webkit
  • 对应的脚本特性为webkitTextStroke。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-11.0 | 2.0-40.0 | 4.0-45.0-webkit- | 4.0-8.0-webkit- | 15.0-29.0-webkit- | 4.0-8.3-webkit- | 2.1-4.4.4-webkit- | 18.0-42.0-webkit-

示例：


-webkit-text-stroke-width

  • 版本：CSS3
  • 媒体：视觉

语法：

-webkit-text-stroke-width：<length>

默认值：0

适用于：所有元素

继承性：有

动画性：是

计算值：指定值

取值：

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

说明：

定义文字描边的厚度
  • 对应的脚本特性为webkitTextStrokeWidth。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-11.0 | 2.0-40.0 | 4.0-45.0-webkit- | 4.0-8.0-webkit- | 15.0-29.0-webkit- | 4.0-8.3-webkit- | 2.1-4.4.4-webkit- | 18.0-42.0-webkit-

示例：


-webkit-text-stroke-color

  • 版本：CSS3
  • 媒体：视觉

语法：

-webkit-text-stroke-color：<color>

默认值：采用文本颜色

适用于：所有元素

继承性：有

动画性：是

计算值：指定值

取值：

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

说明：

定义文字描边的颜色
  • 对应的脚本特性为webkitTextStrokeColor。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-11.0 | 2.0-40.0 | 4.0-45.0-webkit- | 4.0-8.0-webkit- | 15.0-29.0-webkit- | 4.0-8.3-webkit- | 2.1-4.4.4-webkit- | 18.0-42.0-webkit-

示例：


-webkit-box-reflect

  • 版本：CSS3
  • 媒体：视觉

语法：

-webkit-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>：
使用重复的径向(放射性)渐变创建遮罩图像。

说明：

设置或检索对象倒影。
  • 假设定义了 <mask-box-image>，<offset>必须指定，否则可以省略
  • 对应的脚本特性为boxReflect。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-11.0 | 2.0-40.0 | 4.0-45.0-webkit- | 4.0-8.0-webkit- | 15.0-29.0-webkit- | 4.0-8.3-webkit- | 2.1-4.4.4-webkit-#1 | 18.0-42.0-webkit-
  1. 需要注意的是4.0以前的安卓系统需要使用老式的渐变语法，详见<gradient>下的各种渐变支持数据。

示例：


-webkit-tap-highlight-color

  • 版本：CSS3
  • 媒体：视觉

语法：

-webkit-tap-highlight-color：<color>

默认值：由user agent决定

适用于：所有元素

继承性：有

动画性：是

计算值：指定值

取值：

<color>：
指定颜色。

说明：

设置或检索对象的轻按时高亮。
  • 当用户轻按一个链接或者JavaScript可点击元素时给元素覆盖一个高亮色
  • 如果想取消这个高亮，将值设置为全透明即可，比如 transparent
  • 对应的脚本特性为webkitTextHighlightColor。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-11.0 | 2.0-40.0 | 4.0-45.0 | 6.0-8.0 | 15.0-29.0 | 6.0-8.3 -webkit- | 2.1-4.4.4 -webkit- | 18.0-42.0 -webkit-

示例：


-webkit-user-drag

  • 版本：CSS3
  • 媒体：互动

语法：

-webkit-user-drag：auto | element | none

默认值：auto

适用于：所有元素

继承性：有

动画性：否

计算值：指定值

取值：

auto：
使用默认的拖拽行为，这种情况只有图片和链接可以被拖拽。
element：
整个元素（不仅仅只是它的内容）可拖拽。
none：
元素不能被拖动。在通过选中后可拖拽。

说明：

用以设置一个元素和它的内容是否可以被拖拽
  • 对应的脚本特性为webkitUserDrag。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-11.0 | 2.0-40.0 | 4.0-45.0-webkit- | 6.0-8.0-webkit- | 15.0-29.0-webkit- | 6.0-8.3 | 2.1-4.4.4 | 18.0-42.0

示例：


-webkit-overflow-scrolling

  • 版本：CSS3
  • 媒体：视觉

语法：

-webkit-overflow-scrolling：auto | touch

默认值：auto

适用于：块容器，伸缩盒容器，grid容器

继承性：无

动画性：否

计算值：指定值

取值：

auto：
默认值。当手指从触摸屏上移开，滚动会立即停止，相当于普通的滚动效果。
touch：
使用具有回弹效果的滚动，当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆叠上下文。

说明：

指定元素是否使用native-style（滚动回弹效果）来滚动溢出内容。
  • 该属性用来控制元素在移动设备上是否使用滚动回弹效果。
  • 该属性在 iOS UIWebView 中无效。
  • 该属性需与 overflow 属性配合使用，因为必须先定义元素允许滚动，才可以指定它在滚动具有回弹效果。

    CSS：

    .demo { height: 200px; overflow-y: auto; /* 允许元素滚动，值可以是 auto | scroll */ -webkit-overflow-scrolling: touch; /* 定义滚动时回弹效果 */ }

    在移动设备上运行这个示例，将能感受到与 Native 相同的滚动回弹；

  • 对应的脚本特性为webkitOverflowScrolling。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-11.0 | 2.0-40.0 | 4.0-45.0 | 6.0-8.0 | 15.0-29.0 | 5.0+ -webkit- | 4.0+ -webkit- #1 | 18.0-42.0 -webkit- #1
  1. Android 4.0前期增加了快速回弹滚动效果，不过随后这个特性又被移除，目前为止 Android 上所有浏览器支持该属性但未实现回弹效果。

示例：


Selectors index

CSS3参考手册 » 选择符列表
相关内容：
其它选择符参考 选择其它项

CSS Selectors Module

  • 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(fr)
  • E:not(s)
  • 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::placeholder
  • E::selection

紫色 链接表示该属性在CSS3有修改或者增加了新的属性值；橙色 链接表示该属性是CSS3新增属性


Element Selectors index

CSS3参考手册 » 选择符列表 » 元素选择符
相关内容：
其它元素选择符参考 选择其它项

CSS Element Selectors

  • 元素选择符

元素选择符 Element Selectors

选择符 | 名称 | 版本 | 描述
* | 通配选择符(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 (*)

相关内容：
其它元素选择符参考 选择其它项

通配选择符 (*)

  • 版本：CSS2

语法：

* { sRules }

说明：

选定所有对象。
  • 通配选择符(Universal Selector)
  • 通常不建议使用通配选择符，因为它会遍历并命中文档中所有的元素，出于性能考虑，需酌情使用

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0 #1 | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
7.0+
  1. IE6及更早浏览器并不支持通配选择符(*)，而是将它忽略了，所以也变相的能看到效果。

示例：


Type Selector (E)

相关内容：
其它元素选择符参考 选择其它项

类型选择符(E)

  • 版本：CSS1

语法：

E { sRules }

说明：

以文档语言对象类型作为选择符。
  • 类型选择符(Type Selector)

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+

示例：


ID Selector (E#myid)

相关内容：
其它元素选择符参考 选择其它项

ID选择符(E#id)

  • 版本：CSS1

语法：

E#myid { sRules }

说明：

以唯一标识符id属性等于myid的E对象作为选择符。
  • ID选择符(ID Selector)

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+

示例：


Class Selector (E.myclass)

相关内容：
其它元素选择符参考 选择其它项

类选择符(E.class)

  • 版本：CSS1

语法：

E.myclass { sRules }

说明：

以class属性包含myclass的E对象作为选择符。
  • 类选择符(Class Selector)
  • 不同于ID选择符的唯一性，类选择符可以同时定义多个，如：

    定义多个类：

    .a {
    color: #f00;
}
.b {
    font-weight: 700;
}
<div class="a b">给某个div元素定义.a和.b两个类</div>

    注意，id选择符不能在同个元素上定义多个，比如id="a b"就是错误的写法

    类选择符高级用法：多类选择符

    .a.b {
    color: #f00;
}
<div class="a b">多类选择符使用方法</div>

    此例命中同时拥有.a和.b两个类的元素。需要注意的是IE6并不支持多类选择符，如：.a.b{}将会被视为：.b{}

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0 #1 | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
7.0+
  1. 不支持多类选择符，形如：.a.b {}

示例：


Relationship Selectors index

CSS3参考手册 » 选择符列表 » 关系选择符
相关内容：
其它关系选择符参考 选择其它项

CSS Relationship Selectors

  • 关系选择符

关系选择符 Relationship Selectors

选择符 | 名称 | 版本 | 描述
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)

  • 版本：CSS2

语法：

E F { sRules }

说明：

选择所有被E元素包含的F元素。
  • 与 子选择符(E>F) 不同的是，包含选择符将会命中所有符合条件的后代，包括儿子，孙子，孙子的孙子...

    E F VS. E>F：

    <style> /* 包含选择符(E F) */ .demo div { border:1px solid #f00; } /* 子选择符(E>F) */ .demo > div { border:1px solid #f00; } </style> <div class="demo"> <div>0 <div>1</div> <div>2</div> <div>3</div> </div> </div>

    此例，如果是包含选择符，那么 0, 1, 2, 3 都有边框；如果是子选择符，那么只有 0 有边框，即只有子元素会被命中；

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+

示例：


Child combinator (E>F)

相关内容：
其它元素选择符参考 选择其它项

子选择符(E>F)

  • 版本：CSS2

语法：

E>F { sRules }

说明：

选择所有作为E元素的子元素F。
  • 与 包含选择符(E F) 不同的是，子选择符只能命中子元素，而不能命中孙辈。

    示例：

    .demo > div {
    position: relative;
}

<div class="demo">
    <div class="a">
        <div class="b">子选择符</div>
    </div>
</div>

    此例只有 .a 会被命中，因为它是 .demo 的子元素；

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0 | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
7.0+

示例：


Adjacent sibling combinator (E+F)

相关内容：
其它元素选择符参考 选择其它项

相邻选择符(E+F)

  • 版本：CSS2

语法：

E+F { sRules }

说明：

选择紧贴在E元素之后F元素，元素E与F必须同属一个父级。
  • 与 兄弟选择符(E~F) 相同的是，相邻选择符也是选择同级的元素F；不同的是，相邻选择符只会命中符合条件的那个毗邻的兄弟元素（即紧挨着E元素之后的第一个F元素）。

    E~F VS. E+F：

    <style> /* 相邻选择符(E+F) */ h3 + p { color: #f00; } /* 兄弟选择符(E~F) */ h3 ~ p { color: #f00; } </style> <h3>这是一个标题</h3> <p>p1</p> <p>p2</p> <p>p3</p>

    这个例子中，如果是相邻选择符，那么只有 p1 会变成红色；如果是兄弟选择符，那么 p1/p2/p3 都会变成红色；

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0 | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
7.0+

示例：


General sibling combinator (E~F)

相关内容：
其它元素选择符参考 选择其它项

兄弟选择符(E~F)

  • 版本：CSS3

语法：

E~F { sRules }

说明：

选择E元素后面的所有兄弟元素F，元素E与F必须同属一个父级。
  • 需要注意的是，选择的只是同级的元素F，后代中的元素F不会被选择。

    只作用于同级元素

    <style> h3 ~ p { color: #f00; } </style> <h3>这是一个标题</h3> <p>p1</p> <div> <p>p2</p> <p>p3</p> </div>

    这个例子中，只有 p1 会被选中；p2/p3 由于与 h3 并不是同级，所以不会被选中；

  • 只选择E元素之后的元素F，出现在E元素之前的元素F，不会被选择到。

    只作用于同级元素

    <style> h3 ~ p { color: #f00; } </style> <p>p0</p> <h3>这是一个标题</h3> <p>p1</p> <p>p2</p> <p>p3</p>

    这个例子中，p1/p2/p3 都会被选中；而 p0 因为在 h3 之前，所以不会被选中；

  • 与 相邻选择符(E+F) 不同的是，兄弟选择符会命中所有符合条件的兄弟元素，而不强制是紧邻的元素。

    E~F VS. E+F：

    <style> /* 相邻选择符(E+F) */ h3 + p { color: #f00; } /* 兄弟选择符(E~F) */ h3 ~ p { color: #f00; } </style> <h3>这是一个标题</h3> <p>p1</p> <p>p2</p> <p>p3</p>

    这个例子中，如果是相邻选择符，那么只有 p1 会变成红色；如果是兄弟选择符，那么 p1/p2/p3 都会变成红色；

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0 | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ #1 | 18.0+
7.0+
  1. 在Android Browser4.2.*及以下，伪元素:checked与该选择符一起使用会有一个bug，查看详情。

示例：


Attribute Selectors index

CSS3参考手册 » 选择符列表 » 属性选择符
相关内容：
其它属性选择符参考 选择其它项

CSS Attribute Selectors

  • 属性选择符

属性选择符 Attribute Selectors

选择符 | 版本 | 描述
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元素，如果属性值仅为val，也将被选择。

紫色 链接表示该属性在CSS3有修改或者增加了新的属性值；橙色 链接表示该属性是CSS3新增属性


E[att]

  • 版本：CSS2

语法：

E[att] { sRules }

说明：

选择具有att属性的E元素。

例如：

<style>
img[alt] {
    margin: 10px;
}
</style>

<img src="图片url" alt="" />
<img src="图片url" />

此例，将会命中第一张图片，因为匹配到了alt属性

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0 | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
7.0+

示例：


E[att="val"]

  • 版本：CSS2

语法：

E[att="val"] { sRules }

说明：

选择具有att属性且属性值等于val的E元素。

例如：

<style>
input[type="text"] {
    border: 2px solid #000;
}
</style>

<input type="text" />
<input type="submit" />

此例，将会命中第一张input，因为匹配到了type属性，并且属性值为text

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0 | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
7.0+

示例：


E[att~="val"]

  • 版本：CSS2

语法：

E[att~="val"] { sRules }

说明：

选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素（包含只有一个值且该值等于val的情况）。

例如：

<style>
div[class~="a"] {
    border: 2px solid #000;
}
</style>

<div class="a">1</div>
<div class="b">2</div>
<div class="a b">3</div>

此例，将会命中1, 3两个div，因为匹配到了class属性，且属性值中有一个值为a

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0 | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
7.0+

示例：


E[att^="val"]

  • 版本：CSS3

语法：

E[att^="val"] { sRules }

说明：

选择具有att属性且属性值为以val开头的字符串的E元素。

例如：

<style>
div[class^="a"] {
    border: 2px solid #000;
}
</style>

<div class="abc">1</div>
<div class="acb">2</div>
<div class="bac">3</div>

此例，将会命中1, 2两个div，因为匹配到了class属性，且属性值以a开头

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0 | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
7.0+

示例：


E[att$="val"]

  • 版本：CSS3

语法：

E[att$="val"] { sRules }

说明：

选择具有att属性且属性值为以val结尾的字符串的E元素。

例如：

<style>
div[class$="c"] {
    border: 2px solid #000;
}
</style>

<div class="abc">1</div>
<div class="acb">2</div>
<div class="bac">3</div>

此例，将会命中1, 3两个div，因为匹配到了class属性，且属性值以c结尾

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0 | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
7.0+

示例：


E[att*="val"]

  • 版本：CSS3

语法：

E[att*="val"] { sRules }

说明：

选择具有att属性且属性值为包含val的字符串的E元素。

例如：

<style>
div[class*="b"] {
    border: 2px solid #000;
}
</style>

<div class="abc">1</div>
<div class="acb">2</div>
<div class="bac">3</div>

此例，将会命中所有div，因为匹配到了class属性，且属性值中都包含了b

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0 | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
7.0+

示例：


E[att|="val"]

  • 版本：CSS2

语法：

E[att|="val"] { sRules }

说明：

选择具有att属性，其值是以val开头并用连接符"-"分隔的字符串的E元素；如果值仅为val，也将被选择。

这样理解会更简单：如果元素E拥有att属性，并且值为val，或者值是以val-开头的，那么E将会被选择。

例如：

<style>
div[class|="a"] {
    border: 2px solid #000;
}
</style>

<div class="a">0</div>
<div class="a-test">1</div>
<div class="b-test">2</div>
<div class="c-test">3</div>

在这个例子中，前2个div将会被命中：

第1个div，拥有class属性，并且值为a，所以被命中；

第2个div，拥有class属性，值是a开头并紧跟着连接符“-”，所以被命中；

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0 | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
7.0+

示例：


Pseudo-Classes Selectors index

CSS3参考手册 » 选择符列表 » 伪类选择符
相关内容：
其它伪类选择符 选择其它项

CSS Pseudo-Classes Selectors

  • 伪类选择符

伪类选择符 Pseudo-Classes Selectors

选择符 | 版本 | 描述
E:link | CSS1 | 设置超链接a在未被访问前的样式。
E:visited | CSS1 | 设置超链接a在其链接地址已被访问过时的样式。
E:hover | CSS1/2 | 设置元素在其鼠标悬停时的样式。
E:active | CSS1/2 | 设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。
E:focus | CSS1/2 | 设置元素在成为输入焦点（该元素的onfocus事件发生）时的样式。
E:lang(fr) | CSS2 | 匹配使用特殊语言的E元素。
E:not(s) | 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

  • 版本：CSS1

语法：

E:link { sRules }

说明：

设置超链接a在未被访问前的样式。
  • 如果需要给超链接定义：访问前，鼠标悬停，当前被点击，已访问这4种伪类效果，而又没有按照一致的书写顺序，不同的浏览器可能会有不同的表现
  • 超链接的4种状态，需要有特定的书写顺序才能生效。

    超链接状态顺序：

    a:link {}
a:visited {}
a:hover {}
a:active {}

    注意，a:hover 必须位于 a:link 和 a:visited 之后，a:active 必须位于 a:hover 之后
    可靠的顺序是：l(link)ov(visited)e h(hover)a(active)te, 即用喜欢(love)和讨厌(hate)两个词来概括

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+

示例：


E:visited

  • 版本：CSS1

语法：

E:visited { sRules }

说明：

设置超链接a在其链接地址已被访问过时的样式。
  • 如果需要给超链接定义：访问前，鼠标悬停，当前被点击，已访问这4种伪类效果，而又没有按照一致的书写顺序，不同的浏览器可能会有不同的表现
  • 超链接的4种状态，需要有特定的书写顺序才能生效。

    超链接状态顺序：

    a:link {}
a:visited {}
a:hover {}
a:active {}

    注意，a:hover 必须位于 a:link 和 a:visited 之后，a:active 必须位于 a:hover 之后
    可靠的顺序是：l(link)ov(visited)e h(hover)a(active)te, 即用喜欢(love)和讨厌(hate)两个词来概括

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+

示例：


E:hover

  • 版本：CSS1/2

语法：

E:hover { sRules }

说明：

设置元素在其鼠标悬停时的样式。
  • 如果需要给超链接定义：访问前，鼠标悬停，当前被点击，已访问这4种伪类效果，而又没有按照一致的书写顺序，不同的浏览器可能会有不同的表现
  • 超链接的4种状态，需要有特定的书写顺序才能生效。

    超链接状态顺序：

    a:link {}
a:visited {}
a:hover {}
a:active {}

    注意，a:hover 必须位于 a:link 和 a:visited 之后，a:active 必须位于 a:hover 之后
    可靠的顺序是：l(link)ov(visited)e h(hover)a(active)te, 即用喜欢(love)和讨厌(hate)两个词来概括

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0 #1 | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
IE7.0+
  1. IE6及更早浏览器只支持a元素的:hover，从IE7开始支持其它元素的:hover。

示例：


E:active

  • 版本：CSS1/2

语法：

E:active { sRules }

说明：

设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。
  • 如果需要给超链接定义：访问前，鼠标悬停，当前被点击，已访问这4种伪类效果，而又没有按照一致的书写顺序，不同的浏览器可能会有不同的表现
  • 超链接的4种状态，需要有特定的书写顺序才能生效。

    超链接状态顺序：

    a:link {}
a:visited {}
a:hover {}
a:active {}

    注意，a:hover 必须位于 a:link 和 a:visited 之后，a:active 必须位于 a:hover 之后
    可靠的顺序是：l(link)ov(visited)e h(hover)a(active)te, 即用喜欢(love)和讨厌(hate)两个词来概括

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-7.0 #1 | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
IE8.0+
  1. IE7及更早浏览器只支持a元素的:active，从IE8开始支持其它元素的:active。

示例：


E:focus

  • 版本：CSS1/2

语法：

E:focus { sRules }

说明：

设置对象在成为输入焦点（该对象的onfocus事件发生）时的样式。
  • webkit内核浏览器会默认给:focus状态的元素加上outline的样式。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-7.0 | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
IE8.0+

示例：


E:lang(fr)

  • 版本：CSS2

语法：

E:lang(fr) { sRules }

说明：

匹配使用特殊语言的E元素。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-7.0 | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
IE8.0+

示例：


E:not(s)

  • 版本：CSS3

语法：

E:not(s) { sRules }

说明：

匹配不含有s选择符的元素E。

  • 有了这个选择符，那么你将可以很好的处理类似这样的场景：假定有个列表，每个列表项都有一条底边线，但是最后一项不需要底边线

    示例：

    .demo li:not(:last-child) {
    border-bottom: 1px solid #ddd;
}

    上述代码的意思是：给该列表中除最后一项外的所有列表项加一条底边线

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-8.0 | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
IE9.0+

示例：


E:root

  • 版本：CSS3

语法：

E:root { sRules }

说明：

匹配E元素在文档的根元素。在HTML中，根元素永远是HTML

  • 根据这个特性，可以做IE8的Hack

    示例：

    .test {
    color: black;
    color: yellow\0;
    *color: blue;
    _color: red;
}
html:root .test {
    color: purple\0;
}

    上述代码：非IE文本将为black，IE9及以上为purple，IE8为yellow，IE7为blue，IE6为red

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-8.0 | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
IE9.0+

示例：


E:first-child

  • 版本：CSS2

语法：

E:first-child { sRules }

说明：

匹配父元素的第一个子元素E。
  • 要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素
  • 这里可能存在误解：

    示例代码：

    <ul> <li>列表项一</li> <li>列表项二</li> <li>列表项三</li> <li>列表项四</li> </ul>

    在上述代码中，如果我们要设置第一个li的样式，那么代码应该写成li:first-child{sRules}，而不是ul:first-child{sRules}。

  • 来看这样一段代码：

    示例代码：

    p:first-child{color:#f00;} <div> <p>我是一个p</p> </div>

    这段代码你能看到p元素被命中变成了红色

  • 假设将代码简单地修改一下：

    示例代码：

    p:first-child{color:#f00;} <div> <h2>我是一个标题</h2> <p>我是一个p</p> </div>

    只是在p前面加了一个h2标签，你会发现选择器失效了，没有命中p，why?

  • E:first-child选择符，E必须是它的兄弟元素中的第一个元素，换言之，E必须是父元素的第一个子元素。与之类似的伪类还有E:last-child，只不过情况正好相反，需要它是最后一个子元素。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0 | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
IE7.0+

示例：


E:last-child

  • 版本：CSS3

语法：

E:last-child { sRules }

说明：

匹配父元素的最后一个子元素E。
  • 要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素
  • E:last-child选择符，E必须是它的兄弟元素中的最后一个元素，换言之，E必须是父元素的最后一个子元素。与之类似的伪类还有E:first-child，只不过情况正好相反，需要它是第一个子元素。
  • 通过具体的例子来进行理解：

    有效的代码：

    p:last-child{color:#f00;} <div> <h2>我是一个标题</h2> <p>我是一个p</p> </div>

    无效的代码：

    p:last-child{color:#f00;} <div> <p>我是一个p</p> <h2>我是一个标题</h2> </div>

    在上述代码中，如果我们要设置第一个li的样式，那么代码应该写成li:first-child{sRules}，而不是ul:first-child{sRules}。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-8.0 | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
IE9.0+

示例：


E:only-child

  • 版本：CSS3

语法：

E:only-child { sRules }

说明：

匹配父元素仅有的一个子元素E。
  • 要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-8.0 | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
IE9.0+

示例：


E:nth-child(n)

  • 版本：CSS3

语法：

E:nth-child(n) { sRules }

说明：

匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效。
  • 要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素
  • 该选择符允许使用一个乘法因子(n)来作为换算方式，比如我们想选中所有的偶数子元素E，那么选择符可以写成：E:nth-child(2n)
  • 使用E:nth-child(n)实现奇偶：

    示例代码：

    <style> li:nth-child(2n){color:#f00;} /* 偶数 */ li:nth-child(2n+1){color:#000;} /* 奇数 */ </style> <ul> <li>列表项一</li> <li>列表项二</li> <li>列表项三</li> <li>列表项四</li> </ul>

    因为(n)代表一个乘法因子，可以是0, 1, 2, 3, ..., 所以(2n)换算出来会是偶数，而(2n+1)换算出来会是奇数

  • 该选择符允许使用一些关键字，比如：odd, even

    使用odd, even实现奇偶：

    <style> li:nth-child(even){color:#f00;} /* 偶数 */ li:nth-child(odd){color:#000;} /* 奇数 */ </style> <ul> <li>列表项一</li> <li>列表项二</li> <li>列表项三</li> <li>列表项四</li> </ul>

    关键字odd代表奇数，even代表偶数

  • 有一点需要注意的是：

    HTML示例代码：

    <div> <p>第1个p</p> <p>第2个p</p> <span>第1个span</span> <p>第3个p</p> <span>第2个span</span> <p>第4个p</p> <p>第5个p</p> </div>

    CSS Case 1：

    p:nth-child(2){color:#f00;}

    很明显第2个p会被命中然后变成红色

    CSS Case 2：

    p:nth-child(3){color:#f00;}

    这是会命中第3个p么？如果你这么认为那就错了，这条选择符就不会命中任何一个元素。

    CSS Case 3：

    p:nth-child(4){color:#f00;}

    这时你以为会命中第4个p，但其实命中的却是第3个p，因为它是第4个子元素

    E:nth-child(n)会选择父元素的第n个子元素E，如果第n个子元素不是E，则是无效选择符，但n会递增。

    假设不确定第1个子元素是否为E，但是又想命中第1个E，应该这样写：

    p:first-of-type{color:#f00;}

    或者这样写：

    p:nth-of-type(1){color:#f00;}

    参考 E:first-of-type 和 E:nth-of-type(n)

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-8.0 | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
IE9.0+

示例：


E:nth-last-child(n)

  • 版本：CSS3

语法：

E:nth-last-child(n) { sRules }

说明：

匹配父元素的倒数第n个子元素E，假设该子元素不是E，则选择符无效。
  • 要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素
  • 该选择符允许使用一个乘法因子(n)来作为换算方式，比如我们想选中倒数第一个子元素E，那么选择符可以写成：E:nth-last-child(1)
  • 有一点需要注意的是：

    HTML示例代码：

    <div> <p>第1个p</p> <p>第2个p</p> <span>第1个span</span> <p>第3个p</p> <span>第2个span</span> </div>

    如上HTML，假设要命中倒数第一个p(即正数第3个p)，那么CSS选择符应该是：

    p:nth-last-child(2){color:#f00;}

    而不是：

    p:nth-last-child(1){color:#f00;}

    因为倒数第1个p，其实是倒数第2个子元素。基于选择符从右到左解析，首先要找到第1个子元素，然后再去检查该子元素是否为p，如果不是p，则n递增，继续查找

    假设不确定倒数第1个子元素是否为E，但是又想命中倒数第1个E，应该这样写：

    p:last-of-type{color:#f00;}

    或者这样写：

    p:nth-last-of-type(1){color:#f00;}

    参考 E:last-of-type 和 E:nth-last-of-type(n)

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-8.0 | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
IE9.0+

示例：


E:first-of-type

  • 版本：CSS3

语法：

E:first-of-type { sRules }

说明：

匹配同类型中的第一个同级兄弟元素E。
  • 要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是html，即E可以是html的子元素，也就是说E可以是body
  • 该选择符总是能命中父元素的第1个为E的子元素，不论第1个子元素是否为E

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-8.0 | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
IE9.0+

示例：


E:last-of-type

  • 版本：CSS3

语法：

E:last-of-type { sRules }

说明：

匹配同类型中的最后一个同级兄弟元素E。
  • 要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是html，即E可以是html的子元素，也就是说E可以是body
  • 该选择符总是能命中父元素的倒数第1个为E的子元素，不论倒数第1个子元素是否为E

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-8.0 | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
IE9.0+

示例：


E:only-of-type

  • 版本：CSS3

语法：

E:only-of-type { sRules }

说明：

匹配同类型中的唯一的一个同级兄弟元素E。
  • 要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是html，即E可以是html的子元素，也就是说E可以是body
  • 该选择符总是能命中父元素的唯一同类型子元素E，不论该元素的位置

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-8.0 | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
IE9.0+

示例：


E:nth-of-type(n)

  • 版本：CSS3

语法：

E:nth-of-type(n) { sRules }

说明：

匹配同类型中的第n个同级兄弟元素E。
  • 要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是html，即E可以是html的子元素，也就是说E可以是body
  • 该选择符总是能命中父元素的第n个为E的子元素，不论第n个子元素是否为E
  • 有一点需要注意的是：

    HTML示例代码：

    <div> <p>第1个p</p> <p>第2个p</p> <span>第1个span</span> <p>第3个p</p> <span>第2个span</span> </div>

    如上HTML，假设要命中第一个span：

    span:nth-of-type(1){color:#f00;}

    如果使用E:nth-child(n)：

    span:nth-child(3){color:#f00;}

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-8.0 | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
IE9.0+

示例：


E:nth-last-of-type(n)

  • 版本：CSS3

语法：

E:nth-last-of-type(n) { sRules }

说明：

匹配同类型中的倒数第n个同级兄弟元素E。
  • 要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是html，即E可以是html的子元素，也就是说E可以是body
  • 该选择符总是能命中父元素的倒数第n个为E的子元素，不论倒数第n个子元素是否为E

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-8.0 | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
IE9.0+

示例：


E:empty

  • 版本：CSS3

语法：

E:empty { sRules }

说明：

匹配没有任何子元素（包括text节点）的元素E。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-8.0 | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
IE9.0+

示例：


E:checked

  • 版本：CSS3

语法：

E:checked { sRules }

说明：

匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-8.0 | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
IE9.0+

示例：


E:enabled

  • 版本：CSS3

语法：

E:enabled { sRules }

说明：

匹配用户界面上处于可用状态的元素E。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-8.0 | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
IE9.0+

示例：


E:disabled

  • 版本：CSS3

语法：

E:disabled { sRules }

说明：

匹配用户界面上处于禁用状态的元素E。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-8.0 | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
IE9.0+

示例：


E:target

  • 版本：CSS3

语法：

E:target { sRules }

说明：

匹配相关URL指向的E元素。

解释：URL后面跟锚点#，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)，:target选择器用于选取当前活动的目标元素。

示例代码：

#demo:target{color:#f00;} <div id="demo"> <p>E:target伪类使用方法</p> </div>

假设上述代码在页面 a.html 中，那么当访问 a.html#demo 时，这个div元素将会被:target命中

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-8.0 | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
IE9.0+

示例：


@page :first

  • 版本：CSS2

语法：

@page :first { sRules }

说明：

设置在打印时页面容器第一页使用的样式。仅用于@page规则。
  • 该伪类选择符只允许定义margin, orphans, widows 和 page breaks相关属性
  • 相关查看：@page, :left, :right

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
  • 灰色 = 未知
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-7.0 | 2.0-38.0 | 4.0+ | 3.1-8.1 | 15.0+ | 3.2-8.1 | 2.1-4.4.4 | 18.0+
IE9.0+

示例：


@page :left

  • 版本：CSS2

语法：

@page :left { sRules }

说明：

设置页面容器位于装订线左边的所有页面使用的样式。仅用于@page规则。
  • 该伪类选择符只允许定义margin, padding, border 和 background属性
  • 相关查看：@page, :first, :right

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
  • 灰色 = 未知
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-7.0 | 2.0-38.0 | 4.0+ | 3.1-8.1 | 15.0+ | 3.2-8.1 | 2.1-4.4.4 | 18.0+
IE9.0+

示例：


@page :right

  • 版本：CSS2

语法：

@page :right { sRules }

说明：

设置页面容器位于装订线右边的所有页面使用的样式。仅用于@page规则。
  • 该伪类选择符只允许定义margin, padding, border 和 background属性
  • 相关查看：@page, :first, :left

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
  • 灰色 = 未知
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-7.0 | 2.0-38.0 | 4.0+ | 3.1-8.1 | 15.0+ | 3.2-8.1 | 2.1-4.4.4 | 18.0+
IE9.0+

示例：


Pseudo-Element Selectors index

CSS3参考手册 » 选择符列表 » 伪对象选择符
相关内容：
其它伪对象选择符 选择其它项

CSS Pseudo-Element Selectors

  • 伪对象选择符

伪对象选择符 Pseudo-Element Selectors

选择符 | 版本 | 描述
E:first-letter/E::first-letter | CSS1/3 | 设置对象内的第一个字符的样式。
E:first-line/E::first-line | CSS1/3 | 设置对象内的第一行的样式。
E:before/E::before | CSS2/3 | 设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用
E:after/E::after | CSS2/3 | 设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用
E::placeholder | CSS3 | 设置对象文字占位符的样式。
E::selection | CSS3 | 设置对象被选择时的颜色。

* CSS3将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes Selectors)，但以前的写法仍然有效。

紫色 链接表示该属性在CSS3有修改或者增加了新的属性值；橙色 链接表示该属性是CSS3新增属性


E:first-letter/E::first-letter

  • 版本：CSS1/3

语法：

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

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Selector | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0 #1 | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
 | 7.0+
::first-letter | 6.0
 | 7.0-8.0 #2
 | 9.0+
  1. E:first-letter选择符不能紧挨着规则集大括号，需留有空格或换行。
  2. 本质上并不支持伪元素的双冒号(::)写法，而是忽略掉了其中的一个冒号，仍以单冒号来解析，所以等同变相支持了E::first-letter。

示例：


E:first-line/E::first-line

  • 版本：CSS1/3

语法：

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

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Selector | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0 #1 | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
 | 7.0+
::first-letter | 6.0
 | 7.0-8.0 #2
 | 9.0+
  1. E:first-line选择符不能紧挨着规则集大括号，需留有空格或换行。
  2. 本质上并不支持伪元素的双冒号(::)写法，而是忽略掉了其中的一个冒号，仍以单冒号来解析，所以等同变相支持了E::first-line。

示例：


E:before/E::before

  • 版本：CSS2/3

语法：

E:before/E::before { sRules }

说明：

设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用，并且必须定义content属性

  • CSS3将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes Selectors)，但以前的写法仍然有效。

    即E:before可转化为E::before

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Selector | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-7.0 | 2.0-3.0 #2 | 4.0+ | 3.1+ | 15.0+ | 3.2+ | 2.1+ | 18.0+
 | 8.0+ | 3.5+
::before | 6.0-7.0 | 2.0-3.0 #2
 | 8.0 #1 | 3.5+
 | 9.0+
应用动画 | 6.0-9.0 | 2.0-3.5 | 4.0-25.0 | 3.1-6.0 | 15.0+ | 3.2-6.1 | 2.1-3.0 | 18.0-25.0
 | 10.0+ #3 | 4.0+ | 26.0+ | 6.1+ |  | 7.0+ | 4.0+ | 26.0+
  1. 本质上并不支持伪元素的双冒号(::)写法，而是忽略掉了其中的一个冒号，仍以单冒号来解析，所以等同变相支持了E::before。
  2. 不支持设置属性position, float, list-style-*和一些display值，Firefox3.5开始取消这些限制。

  3. IE10在使用伪元素动画有一个问题：

    例如：

    .test:hover {} .test:hover::before { /* 这时animation和transition才生效 */ }

    需要使用一个空的:hover来激活

示例：


E:after/E::after

  • 版本：CSS2/3

语法：

E:after/E::after { sRules }

说明：

设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用，并且必须定义content属性

  • CSS3将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes Selectors)，但以前的写法仍然有效。

    即E:after可转化为E::after

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Selector | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0-7.0 | 2.0-3.0 #2 | 4.0+ | 3.1+ | 15.0+ | 3.2+ | 2.1+ | 18.0+
 | 8.0+ | 3.5+
::after | 6.0-7.0 | 2.0-3.0 #2
 | 8.0 #1 | 3.5+
 | 9.0+
应用动画 | 6.0-9.0 | 2.0-3.5 | 4.0-25.0 | 3.1-6.0 | 15.0+ | 3.2-6.1 | 2.1-3.0 | 18.0-25.0
 | 10.0+ #3 | 4.0+ | 26.0+ | 6.1+ |  | 7.0+ | 4.0+ | 26.0+
  1. 本质上并不支持伪元素的双冒号(::)写法，而是忽略掉了其中的一个冒号，仍以单冒号来解析，所以等同变相支持了E::after。
  2. 不支持设置属性position, float, list-style-*和一些display值，Firefox3.5开始取消这些限制。

  3. IE10在使用伪元素动画有一个问题：

    例如：

    .test:hover {} .test:hover::after { /* 这时animation和transition才生效 */ }

    需要使用一个空的:hover来激活

示例：


E::placeholder

  • 版本：CSS3

语法：

E::placeholder { sRules }

说明：

设置对象文字占位符的样式。
  • ::placeholder 伪元素用于控制表单输入框占位符的外观，它允许开发者/设计师改变文字占位符的样式，默认的文字占位符为浅灰色。
  • 当表单背景色为类似的颜色时它可能效果并不是很明显，那么就可以使用这个伪元素来改变文字占位符的颜色。
  • 需要注意的是，除了Firefox是 ::[prefix]placeholder，其他浏览器都是使用 ::[prefix]input-placeholder
  • Firefox支持该伪元素使用text-overflow属性来处理溢出问题。

  • ::placeholder的使用示例:

    <input type="text" placeholder="占位符" />

input::-webkit-input-placeholder {
    color: #999;
}
input:-ms-input-placeholder { // IE10+
    color: #999;
}
input:-moz-placeholder { // Firefox4-18
    color: #999;
}
input::-moz-placeholder { // Firefox19+
    color: #999;
}

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-9.0 | 2.0-3.6 | 4.0-43.0 -webkit- | 3.1-4.0 | 15.0-28.0 -webkit- | 3.2-4.1 | 2.1-4.4.4 -webkit- | 18.0-40.0 -webkit-
10.0-11.0 -ms- | 4.0-18.0 -moz- #1 |  | 5.0-8.1 -webkit- |  | 4.3-8.1 -webkit-
 | 19.0-38.0 -moz-
  1. ::-moz-placeholder 伪元素在Firefox 19+替代了之前的 :-moz-placeholder 伪类

示例：


E::selection

  • 版本：CSS3

语法：

E::selection { sRules }

说明：

设置对象被选择时的样式。
  • 需要注意的是，::selection只能定义被选择时的background-color，color及text-shadow(IE11尚不支持定义该属性)。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-8.0 | 2.0-38.0 -moz- | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
9.0+

示例(Firefox需将以下的代码复制到本地测试)：


Rules and Syntax index

CSS3参考手册 » 语法与规则列表
相关内容：
其它语法与规则参考 选择其它项

CSS Rules and Syntax

  • 语法与规则

语法与规则 Rules and Syntax

名称 | 版本 | 描述
!important | CSS1 | 提升指定样式条目的应用优先权。
/*comment*/ | CSS1 | CSS中的注释 /* 这里是注释内容 */
@import | CSS1/3 | 指定导入的外部样式表及目标媒体。该规则必须在样式表头部最先声明
@charset | CSS2 | 在外部样式表文件内使用。指定该样式表使用的字符编码。
@media | CSS2/3 | 指定样式表规则用于指定的媒体类型和条件。
@font-face | CSS3 | 设置嵌入HTML文档的OpenType字体。
@page | CSS2 | 设置页面容器的版式，方向，边空等。
@keyframes | CSS3 | 指定动画名称和动画效果。
@supports | CSS3 | 检测是否支持某特性。

紫色 链接表示该属性在CSS3有修改或者增加了新的属性值；橙色 链接表示该属性是CSS3新增属性


!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 | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0 #1 | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
7.0+
  1. IE6及更早浏览器下，!important在同一条规则集内不生效。

示例：


comment

  • 版本：CSS1

语法：

/* 这里是注释内容 */

说明：

用于注释CSS中的某些内容。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+

示例：


@import

  • 版本：CSS1/3

语法：

@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);

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 3.1+ | 15.0+ | 3.2+ | 2.1+ | 18.0+
媒体类型 | 6.0-7.0
 | 8.0+
媒体查询 | 6.0-8.0
 | 9.0+

示例：


@charset

  • 版本：CSS2

语法：

@charset <charset>;

取值：

<charset>：
字符编码。如：@charset "utf-8";

说明：

在外部样式表文件内使用。指定该样式表使用的字符编码。
  • 该规则后面的分号是必需的，如果省略了此分号，会生成错误信息。
  • 在外部css文件中写法如下：

    示例代码：

    @charset "utf-8";
body { sRules }
div { sRules }
...

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+


@media

  • 版本：CSS2/3

语法：

@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 | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-8.0 | 2.0+ | 4.0+ | 3.1+ | 15.0+ | 3.2+ | 2.1+ | 18.0+
9.0+

示例：


@font-face

  • 版本：CSS3

语法：

@font-face {
    font-family: <identifier>;
    src: <fontsrc> [, <fontsrc>]*;
    <font>;
}

<fontsrc> = <url> [format(<string>)]

取值：

<identifier>：
字体名称
<url>：
此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝路径
<string>：
此值指的是你自定义的字体的格式，主要用来帮助浏览器识别，其值主要有以下几种类型：truetype, opentype, embedded-opentype, svg等
<font>：
定义字体相关样式

说明：

设置嵌入HTML文档的字体。
  • 需要兼容当前的主流浏览器，需同时使用TureTpe(.ttf)、Web Open Font Format(.woff)、Embedded Open Type(.eot)、SVG(.svg)四种字体格式。
  • 嵌入HTML文档的字体是指将OpenType字体（压缩的TrueType字体）文件映射到客户端系统，用来提供HTML文档使用该字体，或取代客户端系统已有的同名字体。即让客户端显示客户端所没有安装的字体。
  • .eot(Embedded Open Type)为IE的私有字体格式。Safari3.1开始支持.ttf(TrueType)和.otf(OpenType)。
  • 未来.woff(Web Open Font Format)将会取代.ttf(TrueType)和.otf(OpenType)两种字体格式。
  • 示例：使用一个全浏览器兼容的自定义字体

    代码如下：

    @font-face {
    font-family: 'diyfont';
    src: url('diyfont.eot'); /* IE9+ */
    src: url('diyfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('diyfont.woff') format('woff'), /* chrome、firefox */
         url('diyfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
         url('diyfont.svg#fontname') format('svg'); /* iOS 4.1- */
}

    你需要同时提供4种格式的字体

兼容性（同时支持.woff,.ttf,.otf,.svg格式的版本将被视为完全实现该属性）：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 3.1+ | 15.0+ | 3.2+ | 2.1+ | 18.0+
eot | 6.0+ | 2.0-38.0 | 4.0-43.0 | 3.1-8.1 | 5.0-28.0 | 3.2-8.1 | 2.1-4.4.4 | 18.0-40.0
ttf/otf | 6.0-8.0 | 2.0-3.0 | 4.0+ | 3.1+ | 15.0+ | 3.2-4.1 | 2.1 | 18.0+
 | 9.0+ | 3.5+ |  |  |  | 4.3+ | 2.2+
woff | 6.0-8.0 | 2.0-3.5 | 4.0 | 3.1-5.0 | 15.0+ | 3.2-4.3 | 2.1-4.3 | 18.0+
 | 9.0+ | 3.6+ | 5.0+ | 5.1+ |  | 5.0+ | 4.4+
svg | 6.0-11.0 | 2.0-38.0 | 4.0-37.0 | 3.1 | 15.0-24.0 | 3.2+ | 2.1-2.3 | 18.0-37.0
 |  |  | 38.0-43.0 #1 | 3.2+ | 25.0-28.0 #1 |  | 3.0+ | 38.0-43.0 #1
  1. 策略修改为只支持windows vista/xp上的svg fonts

示例：


@page

  • 版本：CSS2

语法：

@page <label> <pseudo-classes>{ sRules }

取值：

<label>：
页面标识符
<pseudo-class>：
打印伪类:first, :left, :right

说明：

设置页面容器的版式，方向，边空等。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-7.0 | 2.0-18.0 | 4.0+ | 3.1+ | 15.0+ | 3.2+ | 2.1+ | 18.0+
9.0+ | 19.0+

示例：


@keyframes

  • 版本：CSS3
  • 2015.9.6

语法：

@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(20px, 20px); }
    40% { transform: translate(40px, 0); }
    60% { transform: translate(60px, 20); }
    80% { transform: translate(80px, 0); }
    to { transform: translate(100px, 20px); }
}
  • 当然，也可以不使用关键字from和to，而都使用<percentage>：

    示例代码：

    @keyframes testanimations{
    0% { transform: translate(0, 0); }
    20% { transform: translate(20px, 20px); }
    40% { transform: translate(40px, 0); }
    60% { transform: translate(60px, 20px); }
    80% { transform: translate(80px, 0); }
    100% { transform: translate(100px, 20px); }
}

    注意，这里的0%不能简写成0，0是非标准语法（虽然被某些浏览器所支持）。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-9.0 | 2.0-4.0 | 4.0-43.0 -webkit- | 3.1-3.2 | 15.0-29.0 -webkit- | 3.2-8.1 -webkit- | 2.1-3.0 -webkit- | 18.0-40.0 -webkit-
10.0+ | 5.0-15.0 -moz- |  | 4.0-8.1 -webkit- |  |  | 4.0+ -webkit-
 | 16.0

示例：


@supports

  • 版本：CSS3
  • 2015.9.6

语法：

@supports (rule)[operator (rule)]* { sRules }

operator：or | and | not

取值：

rule：
指定一条具体的CSS规则，必须使用括号包裹
operator：
使用or | and | not等操作符指定多条规则。

说明：

检测是否支持某CSS特性
  • 定义支持和不支持flex标准写法的浏览器分别使用不同的规则：

    示例代码：

    @supports ( display: flex ) {
    body {
        display: flex;
    }
    #aside {
        width: 210px;
    }
    #main {
        flex: auto;
    }
}

@supports not ( display: flex ) {
    #aside {
        float: left;
        width: 210px;
    }
    #main {
        overflow: hidden;
        *zoom: 1;
    }
}

    我们可以通过类似这样的写法来给不同的终端使用差异化的方案。

  • 你也可以写多重规则来进行过滤：

    示例代码：

    @supports ( box-shadow: 2px 2px ) or
        ( -moz-box-shadow: 2px 2px ) or
        ( -webkit-box-shadow: 2px 2px ) {
    .demo {
        -moz-box-shadow: 2px 2px 0 rgba(0, 0, 0, .3);
        -webkit-box-shadow: 2px 2px 0 rgba(0, 0, 0, .3);
        box-shadow: 2px 2px 0 rgba(0, 0, 0, .3);
    }
}

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-11.0 | 2.0-21.0 | 4.0-27.0 | 6.0-8.0 | 15.0+ | 6.0-8.4 | 2.1-4.3 | 18.0-26.0
12.0+ | 22.0+ | 28.0+ | 9.0+ |  | 9.0+ | 4.4+ | 27.0+

示例：


CSS Values and Units Module index

CSS3参考手册 » 取值与单位列表
相关内容：
其它取值与单位参考 选择其它项

CSS Values and Units Module

  • CSS取值与单位

长度值与单位 Length Data Types and Units

  • <length>
  • em
  • ex
  • ch
  • rem
  • vw
  • vh
  • vmax
  • vmin
  • cm
  • mm
  • q
  • in
  • pt
  • pc
  • px

角度值与单位 Angle Data Types and Units

  • <angle>
  • deg
  • grad
  • rad
  • turn

时间值与单位 Time Data Types and Units

  • <time>
  • s
  • ms

频率值与单位 Frequency Data Types and Units

  • <frequency>
  • Hz
  • kHz

特殊布局值与单位 Layout-specific Data Types and Units

  • <fraction>
  • <grid>
  • fr
  • gr

分辨率值与单位 Resolution Data Types and Units

  • <resolution>
  • dpi
  • dpcm
  • dppx

颜色值 Color Data Types

  • <color>
  • Color Name
  • HEX
  • RGB
  • RGBA
  • HSL
  • HSLA
  • transparent
  • currentColor

文本值 Textual Data Types

  • inherit
  • initial
  • unset
  • <string>
  • <url>
  • <identifier>

函数值 Functional Notations Data Types

  • calc()
  • toggle()

生成内容值 Content Notations Data Types

  • counter()
  • counters()
  • attr()

图像值 Image Data Types

  • <image>
  • image()
  • image-set()
  • <gradient>
  • linear-gradient()
  • radial-gradient()
  • repeating-linear-gradient()
  • repeating-radial-gradient()

数字值 Numeric Data Types

  • <number>
  • <integer>
  • <percentage>

紫色 链接表示该属性在CSS3有修改或者增加了新的属性值；橙色 链接表示该属性是CSS3新增属性


Length Data Types and Units index

CSS3参考手册 » 取值与单位列表 » 长度值与单位
相关内容：
长度值与单位参考 选择其它项

CSS Length Data Types and Units

  • CSS长度值与单位

长度取值 Length Data Types

长度取值 | 版本 | 描述
<length> | CSS2 | <number>接长度单位。

长度单位 Length Units

长度单位 | 版本 | 描述
文本相对长度单位 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
vmax | CSS3 | 相对于视口的宽度或高度，总是相对于大的那个。视口的宽度或高度被均分为100单位的vmax
vmin | CSS3 | 相对于视口的宽度或高度，总是相对于小的那个。视口的宽度或高度被均分为100单位的vmin
绝对长度单位 Absolute Length Units
cm | CSS1 | 厘米
mm | CSS1 | 毫米
q | CSS3 | 1/4毫米（quarter-millimeters）; 1q = 0.25mm
in | CSS1 | 英寸（inches）; 1in = 2.54cm
pt | CSS1 | 点（points）; 1pt = 1/72in
pc | CSS1 | 派卡（picas）; 1pc = 12pt
px | CSS1 | 像素（pixels）; 1px = 1/96in

紫色 链接表示该属性在CSS3有修改或者增加了新的属性值；橙色 链接表示该属性是CSS3新增属性


<length>

  • 版本：CSS2

说明：

<number>接长度单位。
  • 特殊值0可以省略单位。例如：margin:0px可以写成margin:0
  • 一些属性可能允许有负长度值，或者有一定的范围限制。如果不支持负长度值，那应该变换到能够被支持的最近的一个长度值。
  • 长度单位包括包括：相对单位和绝对单位。
  • 相对长度单位包括有： em, ex, ch, rem, vw, vh, vmax, vmin
  • 绝对长度单位包括有： cm, mm, q, in, pt, pc, px

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+


em

  • 版本：CSS1

说明：

相对长度单位。相对于当前对象内文本的字体尺寸。
  • 如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+

示例：


ex

  • 版本：CSS1

说明：

相对长度单位。相对于字符“x”的高度。通常为字体高度的一半。
  • 如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+

示例：


ch

  • 版本：CSS3

说明：

数字“0”的宽度

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-8.0 | 2.0+ | 4.0-26.0 | 3.1-6.1 | 15.0+ | 3.2-7.0 | 2.1-4.4.4 | 18.0-26.0
9.0+ |  | 27.0+ | 7.0+ |  | 7.1+ |  | 27.0+

示例：


rem

  • 版本：CSS3

说明：

相对长度单位。相对于根元素(即html元素)font-size计算值的倍数

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-8.0 | 2.0-3.5 | 4.0+ | 3.1-4.0 | 15.0+ | 3.2 | 2.1+ | 18.0+
9.0+ | 3.6+ |  | 5.0+ |  | 4.1+

示例：


vw

  • 版本：CSS3

说明：

相对于视口的宽度。视口被均分为100单位的vw

示例代码：

h1 {
    font-size: 8vw;
}

如果视口的宽度是200mm，那么上述代码中h1元素的字号将为16mm，即(8x200)/100

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-8.0 | 2.0-18.0 | 4.0-25.0 | 3.1-5.1 | 15.0+ | 3.2-5.1 | 2.1-4.3 | 18.0-25.0
9.0+ | 19.0+ | 26.0+ | 6.0+ |  | 6.0+ | 4.4+ | 26.0+

示例：


vh

  • 版本：CSS3

说明：

相对于视口的高度。视口被均分为100单位的vh

示例代码：

h1 {
    font-size: 8vh;
}

如果视口的高度是200mm，那么上述代码中h1元素的字号将为16mm，即(8x200)/100

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-8.0 | 2.0-18.0 | 4.0-25.0 | 3.1-5.1 | 15.0+ | 3.2-5.1 | 2.1-4.3 | 18.0-25.0
9.0+ | 19.0+ | 26.0+ | 6.0+ |  | 6.0+ | 4.4+ | 26.0+

示例：


vmax

  • 版本：CSS3

说明：

相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax

示例代码：

h1 {
    font-size: 8vmax;
}

如果视口的宽度是300mm，高度是200mm，那么上述代码中h1元素的字号将为24mm，即(8x300)/100，因为宽度比高度要大，所以计算的时候相对于宽度。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-11.0 | 2.0-18.0 | 4.0-25.0 | 3.1-6.0 | 15.0+ | 3.2-7.1 | 2.1-4.3 | 18.0-25.0
 | 19.0+ | 26.0+ | 6.1+ |  | 8.0+ | 4.4+ | 26.0+

示例：


vmin

  • 版本：CSS3

说明：

相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin

示例代码：

h1 {
    font-size: 8vm;
    font-size: 8vmin;
}

如果视口的宽度是300mm，高度是200mm，那么上述代码中h1元素的字号将为16mm，即(8x200)/100，因为高度比宽度要小，所以计算的时候相对于高度。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-8.0 | 2.0-18.0 | 4.0-25.0 | 3.1-5.1 | 15.0+ | 3.2-5.1 | 2.1-4.3 | 18.0-25.0
9.0+ #1 | 19.0+ | 26.0+ | 6.0+ |  | 6.0+ | 4.4+ | 26.0+
  1. IE9仅支持使用 vm 代替vmin

示例：


cm

  • 版本：CSS1

说明：

厘米（Centimeters）。绝对长度单位。
  • 1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

示例代码：

div {
    font-size: 1cm;
}
p {
    height: 10cm;
}

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+

示例：


mm

  • 版本：CSS1

说明：

毫米（Millimeters）。绝对长度单位。
  • 1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

示例代码：

div {
    font-size: 10mm;
}
p {
    height: 100mm;
}

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+

示例：


q

  • 版本：CSS3

说明：

1/4毫米（quarter-millimeters）。绝对长度单位。
  • 1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

示例代码：

div {
    font-size: 20q;
}
p {
    height: 1000q;
}

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-11.0 | 2.0-38.0 | 4.0-43.0 | 3.1-8.1 | 5.0-28.0 | 3.2-8.1 | 2.1-4.4.4 | 18.0-40.0

示例：


in

  • 版本：CSS1

说明：

英寸（Inches）。绝对长度单位。
  • 1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

示例代码：

div {
    font-size: 1in;
}
p {
    height: 10in;
}

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+

示例：


pt

  • 版本：CSS1

说明：

点（Points）。绝对长度单位。
  • 1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

示例代码：

div{font-size:10pt;} p{height:100pt;}

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+

示例：


pc

  • 版本：CSS1

说明：

派卡（Picas）。绝对长度单位。相当于我国新四号铅字的尺寸。
  • 1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

示例代码：

div{font-size:1pc;} p{height:10pc;}

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+

示例：


px

  • 版本：CSS1

说明：

绝对长度单位。像素（Pixels）。
  • 1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

示例代码：

div{font-size:12px;} p{text-indent:24px;}

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+

示例：


Angle Data Types and Units index

CSS3参考手册 » 取值与单位列表 » 角度值与单位
相关内容：
角度值与单位参考 选择其它项

CSS Angle Data Types and Units

  • CSS角度值与单位

角度取值 Angle Data Types

角度取值 | 版本 | 描述
<angle> | CSS3 | <number>接角度单位。

角度单位 Angle Units

角度单位 | 版本 | 描述
deg | CSS3 | 度（Degrees）
grad | CSS3 | 梯度（Gradians）
rad | CSS3 | 弧度（Radians）
turn | CSS3 | 转、圈（Turns）

紫色 链接表示该属性在CSS3有修改或者增加了新的属性值；橙色 链接表示该属性是CSS3新增属性


<angle>

  • 版本：CSS3

说明：

<number>接角度单位。
  • 角度值的正常范围应在[0-360deg]内，例如：-10deg与350deg是等价的
  • 角度单位包括有： deg, grad, rad, turn

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-8.0 | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
9.0+


deg

  • 版本：CSS3

说明：

度（Degrees）。一个圆共360度

90deg = 100grad = 0.25turn ≈ 1.570796326794897rad

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-8.0 | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
9.0+

示例：


grad

  • 版本：CSS3

说明：

梯度（Gradians）。一个圆共400梯度

90deg = 100grad = 0.25turn ≈ 1.570796326794897rad

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-8.0 | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
9.0+

示例：


rad

  • 版本：CSS3

说明：

弧度（Radians）。一个圆共2π弧度

90deg = 100grad = 0.25turn ≈ 1.570796326794897rad

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-8.0 | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
9.0+

示例：


turn

  • 版本：CSS3

说明：

转、圈（Turns）。一个圆共1圈

90deg = 100grad = 0.25turn ≈ 1.570796326794897rad

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-8.0 | 2.0-12.0 | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
9.0+ | 13.0+

示例：


Time Data Types and Units index

CSS3参考手册 » 取值与单位列表 » 时间值与单位
相关内容：
时间值与单位参考 选择其它项

CSS Time Data Types and Units

  • CSS时间值与单位

时间取值 Time Data Types

时间取值 | 版本 | 描述
<time> | CSS3 | <number>接时间单位。

时间单位 Time Units

时间单位 | 版本 | 描述
s | CSS3 | 秒
ms | CSS3 | 毫秒

紫色 链接表示该属性在CSS3有修改或者增加了新的属性值；橙色 链接表示该属性是CSS3新增属性


<time>

  • 版本：CSS3

说明：

<number>接时间单位。
  • 时间值不允许有负值。
  • 时间单位包括有： ms, s
  • 单位换算：1s = 1000ms

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-8.0 | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
9.0+


s

  • 版本：CSS3

说明：

秒
  • 1s = 1000ms

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-8.0 | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
9.0+

示例：


ms

  • 版本：CSS3

说明：

毫秒
  • 1s = 1000ms

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-8.0 | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
9.0+

示例：


Frequency Data Types and Units index

CSS3参考手册 » 取值与单位列表 » 频率值与单位
相关内容：
频率值与单位参考 选择其它项

CSS Frequency Data Types and Units

  • CSS频率值与单位

频率取值 Frequency Data Types

频率取值 | 版本 | 描述
<frequency> | CSS3 | <number>接频率单位。

频率单位 Frequency Units

频率单位 | 版本 | 描述
Hz | CSS3 | 赫兹
kHz | CSS3 | 千赫兹

紫色 链接表示该属性在CSS3有修改或者增加了新的属性值；橙色 链接表示该属性是CSS3新增属性


<frequency>

  • 版本：CSS3

说明：

<number>接频率单位。
  • 频率值不允许有负值。
  • 频率单位包括有： Hz, kHz
  • 举例说明：200Hz(或200hz)表示一个低音，6kHz(或6khz)表示一个高音。
  • 单位换算：1kHz = 1000 Hz

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-11.0 | 2.0-38.0 | 4.0-43.0 | 3.1-8.1 | 15.0-28.0 | 3.2-8.1 | 2.1-4.4.4 | 18.0-40.0


Hz

  • 版本：CSS3

说明：

赫兹
  • 1kHz = 1000Hz

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-11.0 | 2.0-38.0 | 4.0-43.0 | 3.1-8.1 | 15.0-28.0 | 3.2-8.1 | 2.1-4.4.4 | 18.0-40.0

示例：

strong {
    voice-pitch: 75Hz;
}


kHz

  • 版本：CSS3

说明：

千赫兹
  • 1kHz = 1000Hz

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-11.0 | 2.0-38.0 | 4.0-43.0 | 3.1-8.1 | 15.0-28.0 | 3.2-8.1 | 2.1-4.4.4 | 18.0-40.0

示例：

strong {
    voice-pitch: 1kHz;
}


Layout-specific Data Types and Units index

CSS3参考手册 » 取值与单位列表 » 特殊布局值与单位
相关内容：
布局值与单位参考 选择其它项

CSS Layout-specific Data Types and Units

  • CSS特殊布局值与单位

特殊布局取值 Layout-specific Data Types

特殊布局取值 | 版本 | 描述
<fraction> | CSS3 | <number>接剩余空间数单位。
<grid> | CSS3 | <number>接网格数单位。

特殊布局单位 Layout-specific Units

特殊布局单位 | 版本 | 描述
fr | CSS3 | 剩余空间分配数
gr | CSS3 | 网格数

紫色 链接表示该属性在CSS3有修改或者增加了新的属性值；橙色 链接表示该属性是CSS3新增属性


<fraction>

  • 版本：CSS3

说明：

<number>接剩余空间数单位。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-11.0 | 2.0-38.0 | 4.0-43.0 | 3.1-8.1 | 15.0-28.0 | 3.2-8.1 | 2.1-4.4.4 | 18.0-40.0


<grid>

  • 版本：CSS3

说明：

<number>接网格数单位。
  • 网格由不可见的横向和纵向线条组成用来对齐内容。在CSS3中，网格可以被隐式或显式的创建。网格线间的距离由fr来设定。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-11.0 | 2.0-38.0 | 4.0-43.0 | 3.1-8.1 | 15.0-28.0 | 3.2-8.1 | 2.1-4.4.4 | 18.0-40.0


fr

  • 版本：CSS3

说明：

剩余空间分配数
  • fr单位被用于在一系列长度值中分配剩余空间，如果多个已指定了多个部分，则剩下的空间根据各自的数字按比例分配。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-11.0 | 2.0-38.0 | 4.0-43.0 | 3.1-8.1 | 15.0-28.0 | 3.2-8.1 | 2.1-4.4.4 | 18.0-40.0

示例：

border-parts: 10px 1fr 10px;
border-parts: 10px 1fr 10px 1fr 10px;
border-parts: 10px 2fr 10px 2fr 10px;


gr

  • 版本：CSS3

说明：

网格数

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-11.0 | 2.0-38.0 | 4.0-43.0 | 3.1-8.1 | 15.0-28.0 | 3.2-8.1 | 2.1-4.4.4 | 18.0-40.0

示例：

img {
    float: top left multicol;
    float-offset: 2gr;
    width: 1gr;
}


Resolution Data Types and Units index

CSS3参考手册 » 取值与单位列表 » 分辨率值与单位
相关内容：
分辨率值与单位参考 选择其它项

CSS Resolution Data Types and Units

  • CSS分辨率值与单位

分辨率取值 Resolution Data Types

分辨率取值 | 版本 | 描述
<resolution> | CSS3 | <number>接分辨率单位。

分辨率单位 Resolution Units

分辨率单位 | 版本 | 描述
dpi | CSS3 | 每英寸包含点的数量（dots per inch）
dpcm | CSS3 | 每厘米包含点的数量（dots per centimeter）
dppx | CSS3 | 每像素包含点的数量（dots per pixel）

紫色 链接表示该属性在CSS3有修改或者增加了新的属性值；橙色 链接表示该属性是CSS3新增属性


<resolution>

  • 版本：CSS3

说明：

<number>接分辨率单位。
  • 分辨率值不允许有负值。
  • 频率单位包括有： dpi, dpcm, dppx

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-8.0 | 2.0-3.4 | 4.0-28.0 | 3.1-8.1 | 15.0+ | 3.2-8.1 | 2.1-4.4.4 | 18.0-29.0
9.0+ | 3.5+ | 29.0+ |  |  |  |  | 29.0+


dpi

  • 版本：CSS3

说明：

每英寸包含点的数量（dots per inch）
  • 普通屏幕通常包含96dpi，一般将2倍于此的屏幕称之为高分屏，即大于等于192dpi的屏幕，比如Mac视网膜屏就达到了192dpi（即2dppx），打印时一般会需要更大的dpi；
  • 1dppx = 96dpi
  • 1dpi ≈ 0.39dpcm
  • 1dpcm ≈ 2.54dpi
  • 1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

示例代码：

@media screen and (min-resolution: 96dpi) { ... } @media print and (min-resolution: 300dpi) { ... }

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-8.0 | 2.0-3.4 | 4.0-28.0 | 3.1-8.1 | 15.0+ | 3.2-8.1 | 2.1-4.4.4 | 18.0-29.0
9.0+ | 3.5+ | 29.0+ |  |  |  |  | 29.0+

示例：


dpcm

  • 版本：CSS3

说明：

每厘米包含点的数量（dots per centimeter）
  • 普通屏幕通常包含96dpi，一般将2倍于此的屏幕称之为高分屏，即大于等于192dpi的屏幕，比如Mac视网膜屏就达到了192dpi（即2dppx），打印时一般会需要更大的dpi；
  • 1dppx = 96dpi
  • 1dpi ≈ 0.39dpcm
  • 1dpcm ≈ 2.54dpi
  • 1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

示例代码：

@media screen and (min-resolution: 28dpcm) { ... } @media print and (min-resolution: 118dpcm) { ... }

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-8.0 | 2.0-3.4 | 4.0-28.0 | 3.1-8.1 | 15.0+ | 3.2-8.1 | 2.1-4.4.4 | 18.0-29.0
9.0+ | 3.5+ | 29.0+ |  |  |  |  | 29.0+

示例：


dppx

  • 版本：CSS3

说明：

每像素包含点的数量（dots per pixel）
  • 普通屏幕通常包含96dpi，一般将2倍于此的屏幕称之为高分屏，即大于等于192dpi的屏幕，比如Mac视网膜屏就达到了192dpi（即2dppx），打印时一般会需要更大的dpi；
  • 1dppx = 96dpi
  • 1dpi ≈ 0.39dpcm
  • 1dpcm ≈ 2.54dpi
  • 1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

示例代码：

@media screen and (min-resolution: 2dppx) { ... } @media screen and (min-resolution: 1dppx) and (max-resolution: 1.9dppx) { ... }

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-8.0 | 2.0-15.0 | 4.0-28.0 | 3.1-8.1 | 15.0+ | 3.2-8.1 | 2.1-4.4.4 | 18.0-29.0
9.0+ | 16.0+ | 29.0+ |  |  |  |  | 29.0+

示例：


Color Data Types index

CSS3参考手册 » 取值与单位列表 » 颜色值
相关内容：
其它颜色值参考 选择其它项

CSS Color Data Types

  • CSS颜色取值

颜色值 Color Data Types

名称 | 版本 | 描述
<color> | CSS1/CSS3 | 用来表示颜色的关键字或者数值规则
Color Name | CSS1 | 用颜色名称来指定颜色。包括基本颜色关键字、系统颜色、SVG颜色关键字等
HEX | CSS1 | 十六进制记法。语法如：#rrggbb或#rgb
RGB | CSS2 | rgb记法
RGBA | CSS3 | rgba记法
HSL | CSS3 | hsl记法
HSLA | CSS3 | hsla记法
transparent | CSS1/CSS3 | 全透明
currentColor | CSS3 | 当前颜色

紫色 链接表示该属性在CSS3有修改或者增加了新的属性值；橙色 链接表示该属性是CSS3新增属性


<color>

  • 版本：CSS1/CSS3

说明：

<color> 可以是一个关键字或者数值规则。
  • <color> 包括 Color Name(颜色名称), HEX, RGB, RGBA, HSL, HSLA, transparent, currentColor

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
Basic Support | 6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
transparent | 6.0-8.0
 | 9.0+
RGBA, HSL, HSLA | 6.0-8.0
 | 9.0+
currentColor | 6.0+


Color Name

  • 版本：CSS1

说明：

用颜色关键字来指定颜色。参阅：基础颜色关键字，系统颜色关键字，扩展颜色关键字

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
  1. color的部分关键字可能不被某些浏览器支持；

示例：


hex

  • 版本：CSS1

说明：

#RRGGBB 或 #RGB

取值：

RR：
红色值。十六进制正整数
GG：
绿色值。十六进制正整数
BB：
蓝色值。十六进制正整数

说明：

十六进制记法
  • 以上三个参数，取值范围为：00 - FF。
  • 参数必须是两位数。对于只有一位的，应在前面补零。
  • 如果每个参数各自在两位上的数字都相同，那么本单位也可缩写为 #RGB 的方式。例如：#FF8800 可以缩写为 #F80。
  • 此色彩模式与RGB色彩模式不同。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+

示例：


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 | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+

示例：


rgba

  • 版本：CSS3

说明：

RGBA(R,G,B,A)

取值：

R：
红色值。正整数 | 百分数
G：
绿色值。正整数 | 百分数
B：
蓝色值。正整数 | 百分数
A：
Alpha透明度。取值0 - 1之间。

说明：

RGBA记法。
  • 此色彩模式与RGB相同，只是在RGB模式上新增了Alpha透明度。
  • IE6.0-8.0不支持使用 rgba 模式实现透明度，可使用 IE 滤镜处理，如：

    示例代码：

    filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#88000000, endColorstr=#88000000);

    #88000000 的前两位数字控制透明度，取值16进制从00 -> FF（越小越透明），00表示完全透明，FF就是全不透明，后面六位是色值。

    扩展知识：

    progid:DXImageTransform.Microsoft.Gradient()滤镜里的 startColorstr 参数值是 #AARRGGBB 形式的， 其中的AA是代表不透明度的十六进制，00表示完全透明，FF就是全不透明，化成十进制的范围就是0~255，剩下的 RRGGBB 就是颜色的十六进制代码。

    举例如：background: rgba(125, 0, 0, .3); 表示的是30%不透明度的红色背景。把30%的不透明度转换成十六制呢的方法如下：先计算#AA的的十进制x，x/255 = 3/10，解得x=3*255/10，然后再把x换算成十六进制，约等于4C。

    常用透明度对应16进制关系：

    .0（00） .1（19） .05（0C） .15（26）
.2（33） .3（4C） .25（3F） .35（59）
.4（66） .5（7F） .45（72） .55（8C）
.6（99） .7（B2） .65（A5） .75（BF）
.8（CC） .9（E5） .85（D8） .95（F2）

    自动转换：

    请输入请输入0-1之间的任意数字：

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-8.0 | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
9.0+

示例：


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 | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-8.0 | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
9.0+

示例：


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 | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-8.0 | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
9.0+

示例：


transparent

  • 版本：CSS1/3

说明：

RGBA(R,G,B,A)

取值：

R：
红色值。正整数 | 百分数
G：
绿色值。正整数 | 百分数
B：
蓝色值。正整数 | 百分数
A：
Alpha透明度。取值0 - 1之间。

说明：

用来指定全透明色彩。
  • 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作为参数值。
  • 在CSS3中，transparent被延伸到任何一个有color值的属性上。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0 #1 #2 | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
7.0-8.0 #2
9.0+
  1. border-color 不接受该值，如果使用了该值，则使用 currentColor；
  2. color 不接受该值，如果使用了该值，则使用 currentColor；

示例：


currentColor

  • 版本：CSS3

说明：

在CSS1和CSS2中定义了border-color属性的默认值是color属性的值，但却没有为此定义一个相应的关键字。

这个问题在 SVG 中被意识到了，于是在 SVG 1.0 中引入了currentColor关键字。

在CSS3中扩展了颜色值包含currentColor关键字，并用于所有接受颜色的属性上。

currentColor是 color 属性的值，具体意思是指：currentColor关键字的使用值是color属性值的计算值。
  • 如果currentColor关键字被应用在color属性自身，则相当于是color: inherit。

  • 上述这些话都是什么意思呢？先看个例子

    示例代码：

    div {
    border: 1px solid;
    color: red;
}

    如果你能立马知道上述代码的运行结果，那么就差不多理解 currentColor 关键字的意思了。

    上述代码将会让div拥有一个红色的边框，这就解释了 border-color 属性的默认值是 color 属性的值；

    如果将上述代码中的color属性定义删除，那么边框的颜色将取决于父元素的 color 计算值，因为 color 拥有继承性；

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-8.0 #1 | 2.0+ | 4.0+ | 4.0+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
9.0+
  1. 不支持currentColor关键字，但支持以不定义该值的方式达到相同的效果；


Textual Data Types index

CSS3参考手册 » 取值与单位列表 » 文本值
相关内容：
其它文本值参考 选择其它项

CSS Textual Data Types

  • CSS文本取值

文本值 CSS Textual Data Types

名称 | 版本 | 描述
inherit | CSS2.1 | 该值使得属性能够继承祖先设置。
initial | CSS3 | 属性初始值。
unset | CSS3 | 擦除属性申明。
<string> | CSS2 | 字符串(含转义字符串)。
<url> | CSS2 | 在网页上提供一个资源地址。（图像，声频，视频或浏览器支持的其他任何资源）
<identifier> | CSS2 | 使用用户自定义标识名作为组件取值。

紫色 链接表示该属性在CSS3有修改或者增加了新的属性值；橙色 链接表示该属性是CSS3新增属性


inherit

  • 版本：CSS2.1

说明：

该值使得属性能够继承祖先设置。
  • inherit属于CSS-wide关键字，这表示所有的属性都可以接受该值，本手册为了与规范保持一致，未将该值放置到各属性的取值中。

  • 如何让一个不具备继承特性的属性可以继承父元素的定义？

    示例代码：

    div {
    position: relative;
}
div a {
    position: inherit;
}

    上述代码，超链接 a 将会继承父元素的position定义，也会定义为relative

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-7.0 | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
8.0+


initial

  • 版本：CSS3

说明：

属性初始值。
  • initial属于CSS-wide关键字，这表示所有的属性都可以接受该值，本手册为了与规范保持一致，未将该值放置到各属性的取值中。
  • 如果你想重置某个属性为UA默认设置，那么就可以使用该值
  • 正常工作的例子：

    示例代码：

    ul {
    list-style: none;
}
.news-list {
    list-style: initial;
}

    如上述代码，ul会被reset掉list-style，如果你想某个地方需要UA初始定义，那么就可以直接设置为initial

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-11.0 | 2.0-18.0 | 4.0+ | 3.1+ | 15.0+ | 3.2+ | 2.1+ | 18.0+
 | 19.0+


unset

  • 版本：CSS3
  • 2015.9.6

说明：

擦除属性申明。
  • 一个属性定义了unset值，如果该属性是默认继承属性，该值等同于inherit，如果该属性是非继承属性，该值等同于initial
  • unset属于CSS-wide关键字，这表示所有的属性都可以接受该值，本手册为了与规范保持一致，未将该值放置到各属性的取值中。
  • 正常工作的例子：

    示例代码：

    div {
    border: unset;
}
div {
    border: initial;
}

    如上述代码，2条规则的结果是相同的

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-13.0 | 2.0-26.0 | 4.0-40.0 | 6.0-9.0 | 15.0-27.0 | 6.0-9.0 | 2.1-4.4.4 | 18.0-39.0
 | 27.0+ | 41.0+ |  | 28.0+ |  | 44.0+ | 40.0+


<string>

  • 版本：CSS2

说明：

字符串(含转义字符串)。
  • 字符串可以由双引号或单引号包起来。
  • 转义字符串由 反斜杠(\) 开始，如：\', \"
  • 2个常规字符串例子。请看下述代码：

    示例代码：

    div:after {
    content: "任意字符串";
}
a[title="external"] {
    /*...*/
}
  • 2个转义字符串例子。请看下述代码：

    示例代码：

    div:after {
    content: "任意字符串\"String\"";
}
div {
    /* \5b8b\4f53 = 宋体 */
    font-family:'\5b8b\4f53';
}

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+


<url>

  • 版本：CSS2

语法：

URL 是对一个资源的指针，它使用函数符号 <url> 来表示，语法如下：

<url> = url( <string> <url-modifier>* )

说明：

在网页上提供一个资源地址。（图像，声频，视频或浏览器支持的其他任何资源）

  • 由于历史原因， <url> 可以不加引号，所以对于 <url> 的处理，有引号和无引号都是正确的，示例代码如下：

    示例代码：

    div {
    background-image: url("1.gif");
}
div {
    background-image: url(1.gif);
}

    以上2个定义是等价的。

  • 使用在@import上时，可以使用 <string> 来表示一个 <url>，也就是说可以省略 url() 符号，直接是一个资源地址，示例代码如下：

    示例代码：

    @import url(global.css); @import "global.css"; // 使用 string 表示 url

    以上2种方式都有效。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+


<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 | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-7.0 | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
8.0+


Functional Notations Data Types index

CSS3参考手册 » 取值与单位列表 » 函数值
相关内容：
其它函数值参考 选择其它项

CSS Functional Notations Data Types

  • CSS函数值

函数值 CSS Functional Notations Data Types

名称 | 版本 | 描述
calc() | CSS3 | 用于动态计算长度值。
toggle() | CSS3 | 允许子孙元素使用取值序列中的值循环替换继承而来的值。

紫色 链接表示该属性在CSS3有修改或者增加了新的属性值；橙色 链接表示该属性是CSS3新增属性


calc()

  • 版本：CSS3

语法：

calc() = calc(四则运算)

说明：

用于动态计算长度值。
  • 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
  • 任何长度值都可以使用calc()函数进行计算；
  • calc()函数支持 "+", "-", "*", "/" 运算；
  • calc()函数使用标准的数学运算优先级规则；

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-8.0 | 2.0-3.6 | 4.0-18.0 | 3.1-5.1 | 15.0+ | 3.2-5.1 | 2.1-4.3 | 18.0
9.0 #1 | 4.0-15.0 -moz- | 19.0-25.0 -webkit- | 6.0 -webkit- |  | 6.0-6.1 -webkit- | 4.4-4.4.4 #2 | 19.0-25.0 -webkit-
10.0+ | 16.0+ | 26.0+ | 6.1+ |  | 7.0+ |  | 26.0+
  1. 当在 background-position中使用calc()时将会导致浏览器崩溃；
  2. 部分版本在使用calc()时，乘法和除法可能无效；

示例：


toggle()

  • 版本：CSS3

语法：

toggle() = toggle(<value>#)

说明：

允许子孙元素使用取值序列中的值循环替换继承而来的值。

  • 每级ul使用不同的标记：

    示例代码：

    ul {
    list-style-type: toggle(disk, circle, square, box);
}
em {
    font-style: toggle(italic, normal);
}

    在上述代码中，定义一个多级的ul，第一级使用disk markers，子孙级依次使用circle, square, box。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-11.0 | 2.0-38.0 | 4.0-43.0 | 3.1-8.1 | 5.0-28.0 | 3.2-8.1 | 2.1-4.4.4 | 18.0-40.0


Content Notations Data Types index

CSS3参考手册 » 取值与单位列表 » 生成内容
相关内容：
其它生成内容值参考 选择其它项

CSS Content Notations Data Types

  • CSS生成内容值

生成内容值 CSS Content Notations Data Types

名称 | 版本 | 描述
counter() | CSS2/3 | 插入计数器。
counters() | CSS2/3 | 重复插入的计数器。
attr() | CSS2/3 | 插入元素的属性值。

紫色 链接表示该属性在CSS3有修改或者增加了新的属性值；橙色 链接表示该属性是CSS3新增属性


counter()

  • 版本：CSS2/3

语法：

counter() = [ counter(name) | counters(name, list-style-type) ]{1,}

说明：

插入计数器。
  • 在CSS2.1中counter()只能被使用在content属性上。
  • 如果想重复多次计数器可以使用 counters()

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-7.0 | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
8.0+

示例：


counters()

  • 版本：CSS2/3

语法：

counters() = [ counters(name, string) | counters(name, string, list-style-type) ]{1,}

说明：

重复插入计数器。
  • 在CSS2.1中counters()只能被使用在content属性上。

  • counters()类似于重复使用了counter()，来看个示例

    HTML：

    <ol class="test"> <li>Node <ol> <li>Node</li> <li>Node</li> </ol> </li> <li>Node</li> <li>Node</li> </ol>

    counters()：

    ol {
    counter-reset: item;
}
li:before {
    counter-increment: item;
    content: counters(item, ".");
}

    counter()：

    .test2 {
    counter-reset: item;
}
.test2 li {
    counter-increment: item;
}
.test2 li:before {
    content: counter(item)".";
}
.test2 li li {
    counter-increment: subitem;
}
.test2 li li:before {
    content: counter(item)"."counter(subitem);
}

    从上述代码可以看出，counters()适合使用在需要继承的章节上，而counter()更适合用在独立的计数场景上。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-7.0 | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+
8.0+

示例：


attr()

  • 版本：CSS2/3

语法：

attr() = attr(attr-name)

说明：

插入元素的属性值。
  • 在CSS2.1中attr()总是返回一个字符串。在CSS3中attr()可以返回多种不同的类型。
  • 在CSS2.1中可以这样使用：

    示例代码：

    a:after {
    content: "("attr(href)")";
    font-size: 12px;
}

<a href="http://css.doyoe.com/">CSS参考手册</a>

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-7.0 | 2.0+ | 4.0+ | 3.1+ | 15.0+ | 3.2+ | 2.1+ | 18.0+
8.0+

示例：


Image Data Types index

CSS3参考手册 » 取值与单位列表 » 图像值
相关内容：
其它图像值参考 选择其它项

CSS Image Data Types

  • CSS图像值

图像值 CSS Image Data Types

名称 | 版本 | 描述
<image> | CSS1/CSS3 | 用来表示一个2D图像。
image() | CSS3 | 用于指定图像或者图像替代。
image-set() | CSS3 | 根据用户设备的分辨率匹配合适的图像。
<gradient> | CSS3 | 使用简单的语法实现颜色渐变，以便UA在渲染页面自动生成图像。
linear-gradient() | CSS3 | 用线性渐变创建图像。
radial-gradient() | CSS3 | 用径向渐变创建图像。
repeating-linear-gradient() | CSS3 | 用重复的线性渐变创建图像。
repeating-radial-gradient() | CSS3 | 用重复的径向渐变创建图像。

紫色 链接表示该属性在CSS3有修改或者增加了新的属性值；橙色 链接表示该属性是CSS3新增属性


<image>

  • 版本：CSS3

语法：

<image> = <url> | image() | image-set() | element() | cross-fade() | <gradient>

说明：

<image> 值表示一个2D图像，可以是url引用，图像符号，渐变符号。
  • <image> 可以用在包括：border-image-source, background-image, list-style-image, cursor 等属性上，它被用来取代 <url> 属性值，因为 <image> 值已包含了 <url> 在内。
  • 有些场景下，图像可能是无效，比如当 <url> 指向的是一个无效的图像资源时。一个无效的图像将表现为全透明，但是当无效的图像需要一些特殊行为时，可以使用 image()


image()

  • 版本：CSS3

语法：

image() = image( [ [ <image> | <string> ]? , <color>? ]! )

说明：

image() 用于指定图像或者图像替代。允许作者这样做：

  • 使用媒体片段（media fragments）裁减图像的部分区域;

    我们知道假设是使用背景图的话，可以通过 background-position 来决定从背景图的哪个位置开始显示

    div {
    background-image: url(test.png);
    background-position: 10px 10px;
}

    上述代码会以图像 test.png 的 (10,10) 位置作为圆点以进行显示，但如果你只想显示图像一部分，就变得有点困难。

    所以之后可以这么做：

    div {
    background-image: image(test.png#xywh=10,10,20,20);
}

    上述代码会以图像 test.png 的 (10,10) 位置作为圆点，截取一个 20x20 的矩形以进行显示。

  • 使用纯色作为图像；

    示例：

    div {
    background-image: image(black), url(test.png);
}

    可以使用 image() 来指定使用纯色作为图像，但此时 background-color 将不再生效，因为背景色总是在所有的背景图之下。

  • 当指定的图像不能下载或者正确解码时，回退使用纯色图像；

    之前的语法中，有一个不太恰当的场景与之类似，如下代码：

    body { background: white; color: black; } div { background: url(black.png) black; color: white; }

    上述代码能保证当 black.png 加载失败，文本也仍然是可读的，因为被纯黑色的背景替代了图像，所以白色的文本仍然可见。唯一的问题是，如果图像不是矩形的，或者图像是半透明的，那么这时图像下面的黑色背景会被看到。

    所以 image() 能更好的解决这个问题，如下代码：

    body { background: white; color: black; } div { background: image(black.png, black); color: white; }

    本例的代码能保证当图像无法加载时，使用黑色背景替代，并且如果当图像正确加载时，黑色背景将不渲染，很好的解决了之前例子中存在的问题。

  • 在图像元数据中自动遵循图像的定位；

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-11.0 | 2.0-38.0 | 4.0-43.0 | 3.1-8.1 | 5.0-28.0 | 3.2-8.1 | 2.1-4.4.4 | 18.0-40.0


image-set()

  • 版本：CSS3

语法：

image-set() = image-set( <image-set-option># )

<image-set-option> = [ <image> | <string> ] <resolution>

说明：

image-set() 可以根据用户设备的分辨率匹配合适的图像。

  • 为不同的设备分配合适得图像;

    示例

    div {
    background-image: image-set( "test.png" 1x, "test-2x.png" 2x, "test-print.png" 600dpi );
}

    上述代码将会为普通屏幕使用 test.png，为高分屏使用 test-2x.png，如果更高的分辨率则使用 test-print.png，比如印刷。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-11.0 | 2.0-38.0 | 4.0-20.0 | 3.1-5.1 | 15.0-28.0-webkit- #1 | 3.2-5.1 | 2.1-4.3 | 18.0-20.0
 |  | 21.0-43.0-webkit- #1 | 6.0-8.1-webkit- #1 |  | 6.0-8.1-webkit- #1 | 4.4-4.4.4-webkit- #1 | 21.0-43.0-webkit- #1

  1. 需要注意的是，目前这些浏览器支持的语法是：image-set( <url> | <string> )，写法如下：

    示例

    div {
    background-image: image-set( url(test.png) 1x, url(test-2x.png) 2x );
}


<gradient>

  • 版本：CSS3

语法：

<gradient> = linear-gradient() | repeating-linear-gradient() | radial-gradient() | repeating-radial-gradient()

说明：

<gradient> 允许使用简单的语法实现颜色渐变，以便UA在渲染页面自动生成图像。
  • 渐变在一个拥有尺寸的盒子中被生成，被称之为渐变盒，但是渐变本身并没有内在的尺寸，也就说如果在一个没有尺寸的容器上定义渐变，将无法被呈现。

  • <gradient> 可以应用在所有接受图像的属性上

    示例：

    background-image: linear-gradient(white, gray); list-style-image: radial-gradient(circle, #006, #00a 90%, #0000af 100%, white 100%);

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-9.0 | 2.0-3.5 | 4.0-9.0 -webkit- | 3.1-3.2 | 15.0+ | 3.2-4.3 -webkit- | 2.1-3.0 -webkit- | 10.0-25.0 -webkit-
10.0+ | 3.6-15.0 -moz- | 10.0-25.0 -webkit- | 4.0-5.0 -webkit- |  | 5.0-6.1 | 4.0-4.3 -webkit- | 26.0+
 | 16.0+ | 26.0+ | 5.1-6.0 -webkit- |  | 7.0+ | 4.4+
 |  |  | 6.1+


linear-gradient()

  • 版本：CSS3

语法：

<linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)

<side-or-corner> = [left | right] || [top | bottom]

<color-stop> = <color> [ <length> | <percentage> ]?

取值：

下述值用来表示渐变的方向，可以使用角度或者关键字来设置：

<angle>：
用角度值指定渐变的方向（或角度）。
to left：
设置渐变为从右到左。相当于: 270deg
to right：
设置渐变从左到右。相当于: 90deg
to top：
设置渐变从下到上。相当于: 0deg
to bottom：
设置渐变从上到下。相当于: 180deg。这是默认值，等同于留空不写。

<color-stop> 用于指定渐变的起止颜色：

<color>：
指定颜色。
<length>：
用长度值指定起止色位置。不允许负值
<percentage>：
用百分比指定起止色位置。

说明：

用线性渐变创建图像。
  • 如果想创建以对角线方式渐变的图像，可以使用 to top left 这样的多关键字方式来实现。

  • 用默认的渐变方向绘制一个最简单的线性渐变

    示例代码：

    （图一）

    linear-gradient(#fff, #333);
linear-gradient(to bottom, #fff, #333);
linear-gradient(to top, #333, #fff);
linear-gradient(180deg, #fff, #333);
linear-gradient(to bottom, #fff 0%, #333 100%);

    以上几句代码都可以实现如（图一）的渐变效果

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-9.0 #2 | 2.0-3.5 | 4.0-9.0 -webkit- #1 | 3.1-3.2 | 15.0+ | 3.2-4.3 -webkit- #1 | 2.1-3.0 -webkit- #1 | 10.0-25.0 -webkit- #1
10.0+ | 3.6-15.0 -moz- | 10.0-25.0 -webkit- | 4.0-5.0 -webkit- #1 |  | 5.0-6.1 | 4.0-4.3 -webkit- | 26.0+
 | 16.0+ | 26.0+ | 5.1-6.0 -webkit- |  | 7.0+ | 4.4+
 |  |  | 6.1+
  1. 使用过时的语法：-webkit-gradient(linear,…)
  2. IE6.0-9.0使用私有滤镜来实现该效果: progid:DXImageTransform.Microsoft.Gradient()

示例：


radial-gradient()

  • 版本：CSS3

语法：

<radial-gradient> = radial-gradient([ [ <shape> || <size> ] [ at <position> ]? , | at <position>, ]?<color-stop>[ , <color-stop> ]+)

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

<shape> = circle | ellipse

<size> = <extent-keyword> | [ <circle-size> || <ellipse-size> ]

<extent-keyword> = closest-side | closest-corner | farthest-side | farthest-corner

<circle-size> = <length>

<ellipse-size> = [ <length> | <percentage> ]{2}

<shape-size> = <length> | <percentage>

<color-stop> = <color> [ <length> | <percentage> ]?

取值：

<position> 确定圆心的位置。如果提供2个参数，第一个表示横坐标，第二个表示纵坐标；如果只提供一个，第二值默认为50%，即center

<percentage>①：
用百分比指定径向渐变圆心的横坐标值。可以为负值。
<length>①：
用长度值指定径向渐变圆心的横坐标值。可以为负值。
left：
设置左边为径向渐变圆心的横坐标值。
center①：
设置中间为径向渐变圆心的横坐标值。
right：
设置右边为径向渐变圆心的横坐标值。
<percentage>②：
用百分比指定径向渐变圆心的纵坐标值。可以为负值。
<length>②：
用长度值指定径向渐变圆心的纵坐标值。可以为负值。
top：
设置顶部为径向渐变圆心的纵坐标值。
center②：
设置中间为径向渐变圆心的纵坐标值。
bottom：
设置底部为径向渐变圆心的纵坐标值。

<shape> 确定圆的类型

circle：
指定圆形的径向渐变
ellipse：
指定椭圆形的径向渐变。

<extent-keyword> circle | ellipse 都接受该值作为 size

closest-side：
指定径向渐变的半径长度为从圆心到离圆心最近的边
closest-corner：
指定径向渐变的半径长度为从圆心到离圆心最近的角
farthest-side：
指定径向渐变的半径长度为从圆心到离圆心最远的边
farthest-corner：
指定径向渐变的半径长度为从圆心到离圆心最远的角

<circle-size> circle 接受该值作为 size

<length>：
用长度值指定正圆径向渐变的半径长度。不允许负值。

<ellipse-size> ellipse 接受该值作为 size

<length>：
用长度值指定椭圆径向渐变的横向或纵向半径长度。不允许负值。
<percentage>：
用百分比指定椭圆径向渐变的横向或纵向半径长度。不允许负值。

<color-stop> 用于指定渐变的起止颜色：

<color>：
指定颜色。
<length>：
用长度值指定起止色位置。不允许负值
<percentage>：
用百分比指定起止色位置。不允许负值

说明：

用径向渐变创建图像。

  • 用默认的渐变方向绘制一个最简单的径向渐变

    示例代码：

    （图一）

    radial-gradient(circle, #f00, #ff0, #080);
radial-gradient(circle at center, #f00, #ff0, #080);
radial-gradient(circle at 50%, #f00, #ff0, #080);
radial-gradient(circle farthest-corner, #f00, #ff0, #080);

    以上几句代码都可以实现如（图一）的渐变效果

  • <shape> 和 <size> 使用注意：

    错误代码：

    radial-gradient(circle 50px 50px, #f00, #ff0, #080);

    因为 circle 是正圆，一个值就能表示其直径长度，所以此时 <size> 只能是一个值。

    错误代码：

    radial-gradient(circle 50%, #f00, #ff0, #080);

    circle 不接受 <size> 的值是 <percentage>。

  • 不通过 <shape> 来表示圆和椭圆的方法：

    以下2行代码都可以表示一个圆：

    radial-gradient(100px, #f00, #ff0, #080); /* 1 */ radial-gradient(100px 100px, #f00, #ff0, #080); /* 2 */ radial-gradient(50px 100px, #f00, #ff0, #080); /* 3 */

    代码1：只给出100px，所以被当成是正圆的半径，于是就能确定一个直径为100px的圆；

    代码2：给出了2个值，按理应该是要画一个椭圆的，但2个值相等，所以这个椭圆其实此时是个正圆形态。需要注意的是，代码2如果加上 circle，那将是错误语法，因为这是2个值只有椭圆才接受；

    代码3：表示了一个水平半径为50px，垂直半径为100px的椭圆

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-9.0 | 2.0-3.5 | 4.0-9.0 -webkit- #1 | 3.1-3.2 | 15.0+ | 3.2-4.3 -webkit- #1 | 2.1-3.0 -webkit- #1 | 10.0-25.0 -webkit- #1
10.0+ | 3.6-15.0 -moz- | 10.0-25.0 -webkit- | 4.0-5.0 -webkit- #1 |  | 5.0-6.1 | 4.0-4.3 -webkit- | 26.0+
 | 16.0+ | 26.0+ | 5.1-6.0 -webkit- |  | 7.0+ | 4.4+
 |  |  | 6.1+
  1. 使用过时的语法：-webkit-gradient(radial,…)

示例：


repeating-linear-gradient()

  • 版本：CSS3

语法：

<repeating-linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)

<side-or-corner> = [left | right] || [top | bottom]

<color-stop> = <color> [ <length> | <percentage> ]?

取值：

下述值用来表示渐变的方向，可以使用角度或者关键字来设置：

<angle>：
用角度值指定渐变的方向（或角度）。
to left：
设置渐变为从右到左。相当于: 270deg
to right：
设置渐变从左到右。相当于: 90deg
to top：
设置渐变从下到上。相当于: 0deg
to bottom：
设置渐变从上到下。相当于: 180deg。这是默认值，等同于留空不写。

<color-stop> 用于指定渐变的起止颜色：

<color>：
指定颜色。
<length>：
用长度值指定起止色位置。不允许负值
<percentage>：
用百分比指定起止色位置。

说明：

用重复的线性渐变创建图像。
  • repeating-linear-gradient()的语法与linear-gradient()相同。

  • 示例代码：

    （图一）

    repeating-linear-gradient(#f00, #ff0 10%, #f00 15%);
repeating-linear-gradient(to bottom, #f00, #ff0 10%, #f00 15%);
repeating-linear-gradient(180deg, #f00, #ff0 10%, #f00 15%);
repeating-linear-gradient(to top, #f00, #ff0 10%, #f00 15%);

    以上几句代码都可以实现如（图一）的渐变效果

  • 其实可以使用 linear-gradient() 做出 repeating-linear-gradient() 的效果

    暴力实现上述（图一）的效果：

    repeating-linear-linear-gradient(#f00, #ff0 10%, #f00 15%, #ff0 25%, #f00 30%, #ff0 40%, #f00 45%, #ff0 55%, #f00 60%, #ff0 70%, #f00 75%, #ff0 85%, #f00 90%, #ff0);

    以上几句代码都可以实现如（图一）的渐变效果

    利用 background-size 实现上述（图一）的效果：

    background: linear-gradient(#f00, #ff0 67%, #f00); background-size: 100% 15%;

    使用 background-size 约束渐变图像的大小，然后通过 background-repeat 来纵向平铺

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-9.0 | 2.0-3.5 | 4.0-9.0 -webkit- #1 | 3.1-3.2 | 15.0+ | 3.2-4.3 -webkit- #1 | 2.1-3.0 -webkit- #1 | 10.0-25.0 -webkit- #1
10.0+ | 3.6-15.0 -moz- | 10.0-25.0 -webkit- | 4.0-5.0 -webkit- #1 |  | 5.0-6.1 | 4.0-4.3 -webkit- | 26.0+
 | 16.0+ | 26.0+ | 5.1-6.0 -webkit- |  | 7.0+ | 4.4+
 |  |  | 6.1+
  1. 使用过时的语法：-webkit-gradient(linear,…)

示例：


repeating-radial-gradient()

  • 版本：CSS3

语法：

<repeating-radial-gradient> = radial-gradient([ [ <shape> || <size> ] [ at <position> ]? , | at <position>, ]?<color-stop>[ , <color-stop> ]+)

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

<shape> = circle | ellipse

<size> = <extent-keyword> | [ <circle-size> || <ellipse-size> ]

<extent-keyword> = closest-side | closest-corner | farthest-side | farthest-corner

<circle-size> = <length>

<ellipse-size> = [ <length> | <percentage> ]{2}

<shape-size> = <length> | <percentage>

<color-stop> = <color> [ <length> | <percentage> ]?

取值：

<position> 确定圆心的位置。如果提供2个参数，第一个表示横坐标，第二个表示纵坐标；如果只提供一个，第二值默认为50%，即center

<percentage>①：
用百分比指定径向渐变圆心的横坐标值。可以为负值。
<length>①：
用长度值指定径向渐变圆心的横坐标值。可以为负值。
left：
设置左边为径向渐变圆心的横坐标值。
center①：
设置中间为径向渐变圆心的横坐标值。
right：
设置右边为径向渐变圆心的横坐标值。
<percentage>②：
用百分比指定径向渐变圆心的纵坐标值。可以为负值。
<length>②：
用长度值指定径向渐变圆心的纵坐标值。可以为负值。
top：
设置顶部为径向渐变圆心的纵坐标值。
center②：
设置中间为径向渐变圆心的纵坐标值。
bottom：
设置底部为径向渐变圆心的纵坐标值。

<shape> 确定圆的类型

circle：
指定圆形的径向渐变
ellipse：
指定椭圆形的径向渐变。

<extent-keyword> circle | ellipse 都接受该值作为 size

closest-side：
指定径向渐变的半径长度为从圆心到离圆心最近的边
closest-corner：
指定径向渐变的半径长度为从圆心到离圆心最近的角
farthest-side：
指定径向渐变的半径长度为从圆心到离圆心最远的边
farthest-corner：
指定径向渐变的半径长度为从圆心到离圆心最远的角

<circle-size> circle 接受该值作为 size

<length>：
用长度值指定正圆径向渐变的半径长度。不允许负值。

<ellipse-size> ellipse 接受该值作为 size

<length>：
用长度值指定椭圆径向渐变的横向或纵向半径长度。不允许负值。
<percentage>：
用百分比指定椭圆径向渐变的横向或纵向半径长度。不允许负值。

<color-stop> 用于指定渐变的起止颜色：

<color>：
指定颜色。
<length>：
用长度值指定起止色位置。不允许负值
<percentage>：
用百分比指定起止色位置。不允许负值

说明：

用重复的径向渐变创建图像。
  • repeating-radial-gradient()的语法与radial-gradient()相同。

  • 示例代码：

    （图一）

    repeating-radial-gradient(circle closest-side, #f00, #ff0 10%, #f00 15%);

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0-9.0 | 2.0-3.5 | 4.0-9.0 -webkit- #1 | 3.1-3.2 | 15.0+ | 3.2-4.3 -webkit- #1 | 2.1-3.0 -webkit- #1 | 10.0-25.0 -webkit- #1
10.0+ | 3.6-15.0 -moz- | 10.0-25.0 -webkit- | 4.0-5.0 -webkit- #1 |  | 5.0-6.1 | 4.0-4.3 -webkit- | 26.0+
 | 16.0+ | 26.0+ | 5.1-6.0 -webkit- |  | 7.0+ | 4.4+
 |  |  | 6.1+
  1. 使用过时的语法：-webkit-gradient(radial,…)

示例：


Numeric Data Types index

CSS3参考手册 » 取值与单位列表 » 数字值
相关内容：
其它数字值参考 选择其它项

CSS Numeric Data Types

  • CSS数字值

数字值 CSS Numeric Data Types

名称 | 版本 | 描述
<number> | CSS2 | 浮点数。
<integer> | CSS2 | 整数。
<percentage> | CSS2 | <number>接%

紫色 链接表示该属性在CSS3有修改或者增加了新的属性值；橙色 链接表示该属性是CSS3新增属性


<number>

  • 版本：CSS2

说明：

浮点数。
  • Number值可能是约束在一定范围内的，如果超过了这个范围，申明将被忽略。
  • 列举几个使用场景。请看下述代码：

    示例代码：

    div {
    line-height: 1.5;
}
div {
    opacity: .5;
}

    在上述代码中，opacity属性的值就是被约束在[0.0-1.0]这个范围内的，如果超过了这个范围，其计算结果将截取到与之最相近的值。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+


<integer>

  • 版本：CSS2

说明：

整数。
  • Integer值可能是约束在一定范围内的，如果超过了这个范围，申明将被忽略。
  • 列举几个使用场景。请看下述代码：

    示例代码：

    div {
    z-index: 10;
    border-image-slice: 5;
}

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+


<percentage>

  • 版本：CSS2

说明：

<number>接%
  • 百分比总是相对于另外一个值才存在的。

    示例代码：

    div {
    font-size: 12px;
}
.test {
    font-size: 200%;
}
  • 百分比的单位是：%

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome
6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+


Appendix index

CSS3参考手册 » 附录列表
相关内容：
其它附录参考 选择其它项

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附录参考 选择其它项

CSS Media Types

  • 媒体类型

媒体类型 Media Types

媒体类型 | 版本 | 兼容性 | 描述
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 | 用于凸点字符（盲文）印刷设备
speech | CSS2 | Opera | 用于语音类型
all | CSS2 | 所有浏览器 | 用于所有媒体设备类型


CSS Hack Index

CSS3参考手册 » CSS Hack列表
相关内容：
CSS 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失效等系列问题。


IE Conditions Hack

相关内容：
CSS 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及以上，推荐酌情忽略低版本，把精力花在为使用高级浏览器的用户提供更好的体验上

IE10及以上版本已将条件注释特性移除，使用时需注意。

说明：

用于选择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

  • CSS内部属性级Hack

语法：

selector{<hack>?property:value<hack>?;}

取值：

_：
选择IE6及以下。连接线（中划线）（-）亦可使用，为了避免与某些带中划线的属性混淆，所以使用下划线（_）更为合适。
*：
选择IE7及以下。诸如：（+）与（#）之类的均可使用，不过业界对（*）的认知度更高
\9：
选择IE6+
\0：
选择IE8+和Opera15以下的浏览器

说明：

选择不同的浏览器及版本
  • 尽可能减少对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

  • 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-cmn-Hans) { 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

CSS3参考手册 » CSS 问题和经验列表
相关内容：
其它问题和经验参考 选择其它项

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. 如何让层在flash上显示？
  2. 如何使用标准的方法在页面上插入flash？
  3. 如何在点文字时也选中复选框或单选框？
  4. IE下如何对Standard Mode与Quirks Mode进行切换？
  5. 如何区别display:none与visibility:hidden？
  6. 如何设置IE下的iframe背景透明？


CSS3 Quick Search index

相关内容：
参考资源列表 选择其它项

Resource Reference

  • 其它技巧和经验集合

参考资源列表

  • css3files
  • Mozilla CSS
  • Safari CSS
  • css3免前缀方案
  • IE下css3解决方案
  • IE下transform属性兼容方案

渐变色资源

  • 本手册示例
  • 详细的渐变色讲解及示例
  • Mozilla 的实现原理
  • Safari 的实现原理
  • 简单入门
  • CSS3背景样式图库
  • 简单背景渐变实例

动画资源

  • 本手册示例
  • Animatable 动画效果39例

在线css3代码生成器

  • css3代码生成器
  • 在线渐变色生成器
  • css3代码可视化编辑
  • 仿ps界面代码生成器
  • border-image生成器


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. 如何让层在flash上显示？

    方法：

    <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

待续及修订。。。


CSS参考手册_web前端开发参考手册系列

CSS参考手册

web前端开发参考手册系列

  • 当前版本：v4.2.4
  • 下载最新chm版
  • 在线资源 选择其它项
    • CSS探索之旅
    • web前端实验室
    • CSS参考手册
  • 关于 选择其它项
    • 关于飘零雾雨
    • 新浪微博
    • Github
  • 捐赠
  • CSS(Contain CSS3)
    • 速查总表 Quick Search
    • 简介 Introduction
      • 更新历史
      • 关于本手册
      • 关于样式表
      • 关于作者
      • 阅读及使用指引
      • 鸣谢
      • 捐赠
    • 属性 Properties
      • 定位(Positioning)
        • position
        • z-index
        • top
        • right
        • bottom
        • left
        • clip
      • 布局(Layout)
        • display
        • float
        • clear
        • visibility
        • overflow
        • overflow-x
        • overflow-y
      • 尺寸(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-radius
        • border-top-left-radius
        • border-top-right-radius
        • border-bottom-right-radius
        • border-bottom-left-radius
        • box-shadow
        • border-image
        • border-image-source
        • border-image-slice
        • border-image-width
        • border-image-outset
        • border-image-repeat
      • 背景(Background)
        • background
        • background-color
        • background-image
        • background-repeat
        • background-attachment
        • background-position
        • background-origin
        • background-clip
        • background-size
      • 颜色(Color)
        • color
        • opacity
      • 字体(Font)
        • font
        • font-style
        • font-variant
        • font-weight
        • font-size
        • font-family
        • font-stretch
        • font-size-adjust
      • 文本(Text)
        • text-transform
        • white-space
        • tab-size
        • word-break
        • word-wrap
        • overflow-wrap
        • text-align
        • text-align-last
        • text-justify
        • word-spacing
        • letter-spacing
        • text-indent
        • vertical-align
        • line-height
        • text-size-adjust
      • 文本装饰(Text Decoration)
        • text-decoration
        • text-decoration-line
        • text-decoration-color
        • text-decoration-style
        • text-decoration-skip
        • text-underline-position
        • text-shadow
      • 书写模式(Writing Modes)
        • direction
        • unicode-bidi
        • writing-mode
      • 列表(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)
        • appearance
        • text-overflow
        • 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
        • user-select
        • pointer-events
      • 多列(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
      • 伸缩盒(Flexible Box)(旧)
        • box-orient
        • box-pack
        • box-align
        • box-flex
        • box-flex-group
        • box-ordinal-group
        • box-direction
        • box-lines
      • 伸缩盒(Flexible Box)(新)
        • flex
        • flex-grow
        • flex-shrink
        • flex-basis
        • flex-flow
        • flex-direction
        • flex-wrap
        • align-content
        • align-items
        • align-self
        • justify-content
        • order
      • 变换(Transform)
        • transform
        • transform-origin
        • transform-style
        • perspective
        • perspective-origin
        • backface-visibility
      • 过渡(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 webkit
        • -webkit-text-fill-color
        • -webkit-text-stroke
        • -webkit-text-stroke-width
        • -webkit-text-stroke-color
        • -webkit-box-reflect
        • -webkit-tap-highlight-color
        • -webkit-user-drag
        • -webkit-overflow-scrolling
    • 选择符 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(fr)
        • E:not(s)
        • 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::placeholder
        • E::selection
    • 语法与规则 Rules
      • !important
      • /*comment*/
      • @import
      • @charset
      • @media
      • @font-face
      • @page
      • @keyframes
      • @supports
    • 取值与单位 Values and Units
      • 长度(Length)
        • <length>
        • em
        • ex
        • ch
        • rem
        • vw
        • vh
        • vmax
        • vmin
        • cm
        • mm
        • q
        • in
        • pt
        • pc
        • px
      • 角度(Angle)
        • <angle>
        • deg
        • grad
        • rad
        • turn
      • 时间(Time)
        • <time>
        • s
        • ms
      • 频率(Frequency)
        • <frequency>
        • Hz
        • kHz
      • 布局(Layout-specific)
        • <fraction>
        • <grid>
        • fr
        • gr
      • 分辨率(Resolution)
        • <resolution>
        • dpi
        • dpcm
        • dppx
      • 颜色(Color)
        • <color>
        • Color Name
        • HEX
        • RGB
        • RGBA
        • HSL
        • HSLA
        • transparent
        • currentColor
      • 文本(Textual)
        • inherit
        • initial
        • unset
        • <string>
        • <url>
        • <identifier>
      • 函数(Functional)
        • calc()
        • toggle()
      • 生成内容(Content)
        • counter()
        • counters()
        • attr()
      • 图像(Image)
        • <image>
        • image()
        • image-set()
        • <gradient>
        • linear-gradient()
        • radial-gradient()
        • repeating-linear-gradient()
        • repeating-radial-gradient()
      • 数字(Numeric)
        • <number>
        • <integer>
        • <percentage>
    • 附录 Appendix
      • 颜色关键字(Color Keywords)
      • 媒体类型(Media Types)
    • CSS Hack
      • 条件Hack
      • 属性级Hack
      • 选择符级Hack
    • 问题和经验
      • 参考资源列表
      • Bugs和解决方案
      • 技巧和经验
      • 其它经验

贡献

×

  • 支付宝：dooyoe@gmail.com
  • 姓　名：杜瑶
  • 备　注：捐赠金额不限
支付宝扫码支付

支持开源，
CSS参考手册因你而更精彩！

Because Of You