前言

本文对所有的css3特性浏览器的支持性进行了全量枚举，希望对项目的技术选型以及兼容方案有所帮助，对css3采用正确的打开方式。

测试环境：

Chrome, Firefox, Internet Explorer 8 ，IE-Test（IE6-IE11）

说明：

1、IE9+（ 指包括IE9以及IE9以上浏览器 ）
2、本文档只提供css3新增属性或属性值在各浏览器的支持情况，不提供其语法和兼容性解决方案。
3、主要作用是提供相对完整的css3属性和属性值查询，使用时Ctrl+F键入搜索内容即可（不区分大小写），避免网上搜索时比对很多资料，节省时间。
4、如有错误，请及时反馈更正。

属性部分

CSS3 布局

  • display：新增属性值（尚无浏览器支持以下相关的参数值）
  • run-in：分配对象为块对象或基于内容之上的内联对象（CSS3）
  • ruby：将对象作为表格脚注组显示（CSS3）
  • ruby-base：将对象作为表格脚注组显示（CSS3）
  • ruby-text：将对象作为表格脚注组显示（CSS3）
  • ruby-base-group：将对象作为表格脚注组显示（CSS3）
  • ruby-text-group：将对象作为表格脚注组显示（CSS3）
  • box：将对象作为弹性盒模型显示（CSS3）
  • inline-box：将对象作为内联块级弹性盒模型显示（CSS3）
  • overflow-x：Internet Explorer 6+、Firefox、Chrome、Safari Opera

  • overflow-y：Internet Explorer 6+、Firefox、Chrome、Safari Opera

    CSS3 弹性盒模型

  • box-orient：目前没有浏览器支持 box-orient 属性，Firefox 支持替代的 -moz-box-orient 属性，Safari、Opera 以及 Chrome 支持替代的 -webkit-box-orient 属性。（IE6-10都不支持，IE10+可能支持-ms-box-orient ）

  • box-pack：目前没有浏览器支持 box-pack属性，Firefox 支持替代的 -moz-box-pack属性，Safari、Opera 以及 Chrome 支持替代的 -webkit-box-pack属性。 Firefox4.0-9.0不支持box-pack的justify属性值。
  • box-align：目前没有浏览器支持 box-align属性，Firefox 支持替代的 -moz-box-align属性，Safari、 Opera 以及 Chrome 支持替代的 -webkit-box-align属性。
  • box-flex：目前没有浏览器支持 box-flex属性，Firefox 支持替代的 -moz-box-flex属性，Safari、Opera 以及 Chrome 支持替代的 -webkit-box-flex属性。
  • box-flex-group：目前没有浏览器支持 box-flex-group 属性，Safari、Opera 以及 Chrome 支持替代的 -webkit-box-flex-group 属性。 （该属性各资料的解释不同，还未验证，慎用）
  • box-ordinal-group：目前没有浏览器支持 box-ordinal-group 属性，Firefox 支持替代的 -moz-box-ordinal-group属性，Safari、Opera 以及 Chrome 支持替代的 -webkit-box-ordinal-group 属性。
  • box-direction：目前没有浏览器支持 box-direction 属性，Firefox 支持替代的 -moz-box-direction 属性，Safari、Opera 以及 Chrome 支持替代的 -webkit-box-direction 属性。

  • box-lines：目前没有浏览器支持 box-lines 属性。（虽Safari和Chrome已经支持box-lines，但没有实现该属性的效果，请勿使用该属性。）

    CSS3 边框

  • border-radius：Internet Explorer 9+ ，FF, Chrome , Safari Opera。

  • border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius：Internet Explorer 9+ ，FF, Chrome , Safari Opera。
  • box-shadow：IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。
  • border-color （不是新属性，css1属性）：
    注意：

    Internet Explorer6（和更早版本）不支持”transparent”属性值；
    IE7和更早的版本不支持”继承”的值；
    IE8需要定义！DOCTYPE；
    IE9支持”继承”；
    FF的私有写法不支持缩写，如: -moz-border-colors: #333 #444 #555；。

  • border-image：Firefox, Chrome, 和 Safari 6支持border-image属性，Opera通过私有属性-O-border-image支持，Safari和Chrome通过私有属性-WebKit-border-image支持；IE不支持。
  • border-image-source：请参考border-image属性
  • border-image-slice ：请参考border-image属性
  • border-image-width：请参考border-image属性
  • border-image-outset ：请参考border-image属性
  • border-image-repeat：请参考border-image属性
  • box-reflect：设置或检索对象倒影 未查找到更多相关资料
  • Safari、Opera 以及 Chrome 支持替代的 -webkit-box-reflect属性。 （该属性各资料的解释不同，还未验证，慎用）

  • border-corner-image：未查找到相关资料。

    CSS3 背景

  • background-image（CSS3/CSS1）：所有浏览器都支持 background-image 属性。
    注意：
    IE7和更早的版本不支持”继承”的值。
    IE8及更早浏览器不支持CSS3 background-image，即不支持多背景和使用渐变作为背景图像。I且需要定义！DOCTYPE。
    IE9支持”继承”，IE9不支持CSS3新增参数值： | | | 作为背景图像。
    Opera11.50-11.51不支持CSS3新增参数值： | 作为背景图像。

  • background-repeat（CSS3/CSS1）：所有浏览器都支持 background-repeat 属性。
    注意：
    > IE8及更早浏览器不支持为background-repeat定义2个参数值；不支持CSS3新增参数值round | space。

    Firefox4.0-8.0不支持为background-repeat定义2个参数值；不支持CSS3新增参数值round | space。
    Safari5.1已接受CSS3新增参数值round | space，但还未实现支持。
    Chrome13.0-16.0已接受CSS3新增参数值round | space，但还未实现支持。

  • background-attachment（CSS3/CSS1）：所有浏览器都支持 background-attachment 属性。
    注意：

    IE8及更早浏览器不支持CSS3新增参数值：local。

    1. Firefox4.0-8.0不支持CSS3新增参数值：local。<br />
  • background-position（CSS3/CSS1）：所有浏览器都支持 background-position 属性。
    注意： IE8及更早浏览器不支持CSS3 Background-position定义多组位置，只支持单组。
  • background-size：Internet Explorer 9+、Firefox、Chrome、Safari Opera
  • background-origin （ 指定背景图片从哪里开始显示，必须先指定background属性 ）：
    Internet Explorer 9+、Firefox、Chrome、Safari Opera

  • background-clip：(指定背景图片从什么位置开始裁切，必须先指定background属性)
    IE9+、Firefox、Chrome Safari Opera
    注意：IE9, Firefox4.0-9.0, Opera11.50-11.60尚未支持text属性值。

    CSS3 颜色

  • opacity：Internet Explorer 9+、Firefox、Chrome、Safari、Opera
    兼容性使用：

    1. opacity: 0.5;
    2. filter: alpha(opacity=50); /* for IE6, 7 */
    3. -ms-filter(opacity=50); /* for IE8 */
    4. Hsl/ hsla/rgba 未查找到相关资料

    CSS3 文本效果

  • text-shadow：Internet Explorer 10、Firefox、Chrome、Safari 以及 Opera；Internet Explorer9 以及更早的版本，不支持 text-shadow

  • word-wrap:所有主流浏览器都支持 word-wrap 属性
  • word-break:所有主流浏览器都支持 word-break 属性。
  • text-overflow:所有主流浏览器都支持 text-overflow 属性。（火狐4-6不支持）
  • text-outline:所有主流浏览器都不支持 text-outline 属性。
  • text-wrap :目前主流浏览器都不支持 text-wrap 属性。
  • text-emphasis:目前主流浏览器都不支持 text-emphasis 属性。
  • punctuation-trim:目前主流浏览器都不支持 punctuation-trim 属性。
  • hanging-punctuation:目前主流浏览器都不支持 hanging-punctuation 属性。
  • text-justify:只有 Internet Explorer 支持 text-justify 属性。
  • text-align-last:设置如何对齐最后一行或紧挨着强制换行符之前的行。
  • text-decoration：所有主流浏览器都支持text-decoration属性。
  • 注意：
    • IE7和更早的版本不支持”inherit”的值。IE8需要定义！DOCTYPE。IE9支持”inherit”。IE9及更早浏览器、Safari5.1、Chrome13.0不支持blink，IE9及更早浏览器、Firefox4.0-9.0、Safari5.1、Chrome13.0、Opera11.50-11.60不支持CSS3下的text-decoration复合属性属写法。
      说明：
    • 该属性在css1相当于text-decoration-style/在css3是复合属性。
    • text-decoration-style：Firefox 支持-moz-text-decoration-style 属性；其余浏览器均不支持。
    • text-decoration-color：Firefox 支持-moz-text-decoration-color属性；其余浏览器均不支持。
    • text-decoration-line：Firefox 支持-moz- text-decoration-line属性；其余浏览器均不支持。
  • text-underline-mode：指线的模式，其他未知。

  • text-underline-position：指线的位置，其他未知。

    CSS3 字体

    @font-face:Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 类型的字体，Internet Explorer 9+仅支持 .eot 类型的字体 (Embedded OpenType)；Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则。
    font-effect：搜索不到相关内容。
    font-emphasize-style：搜索不到相关内容。
    font-emphasize-position：搜索不到相关内容。
    font-stretch：IE及Firefox已支持font-stretch，但显示效果与正常文字并无不同（勿用）。

    CSS3 转换

    transform：Internet Explorer 10、Firefox 以及 Opera （Opera 只支持 2D 转换）支持 transform 属性，Chrome 和 Safari 需要 -webkit-transform （支持 2D 和3D转换），Internet Explorer 9 需要 -ms-transform（仅适用于 2D 转换）。
    transform-origin ：Internet Explorer 10、Firefox、Opera （Opera 只支持 2D 转换）支持 transform-origin 属性，Chrome 和 Safari 需要 -webkit-transform-origin （支持 2D 和3D转换），nternet Explorer 9 需要 -ms-transform-origin （仅适用于 2D 转换）

    CSS3 3D转换

  • transform-style：Firefox 支持 transform-style 属性，Chrome、Safari 和 Opera 支持替代的 -webkit-transform-style 属性（是不是支持3d尚不清楚），ie不支持transform-style属性。

  • Perspective：Chrome 和 Safari 支持替代的 -webkit-perspective 属性；其余浏览器不支持。
  • perspective-origin：Chrome 和 Safari 支持替代的 -webkit-perspecitve-origin 属性；其余浏览器不支持。

  • backface-visibility ： Internet Explorer 10+ 和 Firefox 支持 backface-visibility 属性，Chrome 、Safari 和Opera 15+支持替代的 -webkit-backface-visibility 属性。

    CSS3 过渡

    transition：Internet Explorer 10、Firefox、Chrome（Chrome 25 以及更早的版本，需要前缀 -webkit-。） 以及 Opera 支持 transition 属性，Safari 需要前缀 -webkit- ；Internet Explorer 9 以及更早的版本，不支持 transition 属性。

  • transition-property：Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition-property 属性，Safari 支持替代的 -webkit-transition-property 属性，Internet Explorer 9 以及更早版本的浏览器不支持 transition-property 属性。

  • transition-duration：Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition-duration 属性，Safari 支持替代的 -webkit-transition-duration 属性；Internet Explorer 9 以及更早版本的浏览器不支持 transition-duration 属性。
  • transition-timing-function：Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition-timing-function 属性，Safari 支持替代的 -webkit-transition-timing-function 属性；Internet Explorer 9 以及更早版本的浏览器不支持 transition-timing-function 属性。

  • transition-delay：Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition-delay 属性，Safari 支持替代的 -webkit-transition-delay 属性；Internet Explorer 9 以及更早版本的浏览器不支持 transition-delay属性。

    CSS3 动画

    @keyframe：目前浏览器都不支持 @keyframes 规则（但还是要先写上），Chrome和Safari 支持替代的 @-webkit-keyframes 规则，Firefox 支持替代的 @-moz-keyframes 规则，Opera 支持替代的 @-o-keyframes 规则。
    animation：Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性，Safari 和 Chrome 支持替代的 -webkit-animation 属性；Internet Explorer 9 以及更早的版本不支持 animation 属性。

  • animation-name：Internet Explorer 10、Firefox 以及 Opera 支持 animation-name 属性，Safari 和 Chrome 支持替代的 -webkit-animation-name 属性；Internet Explorer 9 以及更早的版本不支持 animation-name 属性。

  • animation-duration：Internet Explorer 10、Firefox 以及 Opera 支持 animation-duration 属性，
    Safari 和 Chrome 支持替代的 -webkit-animation-duration 属性；Internet Explorer 9 以及更早的版本不支持 animation-duration 属性。
  • animation-timing-function：Internet Explorer 10、Firefox 以及 Opera 支持animation-timing-function 属性，Safari 和 Chrome 支持替代的-webkit-animation-timing-function属性；Internet Explorer 9 以及更早的版本不支持 animation-timing-function 属性。
  • animation-delay：Internet Explorer 10、Firefox 以及 Opera 支持 animation-delay 属性，Safari 和 Chrome 支持替代的 -webkit-animation-delay 属性；Internet Explorer 9 以及更早的版本不支持 animation-delay 属性。
  • animation-iteration-count：Internet Explorer 10、Firefox 以及 Opera 支持 animation-iteration-count 属性，Safari 和 Chrome 支持替代的 -webkit-animation-iteration-count 属性；Internet Explorer 9 以及更早的版本不支持 animation-iteration-count 属性。
  • animation-direction：Internet Explorer 10、Firefox 以及 Opera 支持 animation-direction 属性，Safari 和 Chrome 支持替代的 -webkit-animation-direction 属性；Internet Explorer 9 以及更早的版本不支持 animation-direction 属性。
  • animation-play-state：Internet Explorer 10、Firefox 以及 Opera 支持 animation-play-state 属性，Safari 和 Chrome 支持替代的 -webkit-animation-play-state 属性；Internet Explorer 9 以及更早的版本不支持 animation-play-state 属性。

  • animation-fill-mode：Internet Explorer 10、Firefox 以及 Opera 支持 animation-fill-mode 属性，Safari 和 Chrome 支持替代的 -webkit-animation-fill-mode 属性；Internet Explorer 9 以及更早的版本不支持 animation-fill-mode 属性。

    CSS3 多列

  • column-count ：Internet Explorer 10 和 Opera 支持 column-count 属性，Firefox 支持替代的 -moz-column-count 属性，Safari 和 Chrome 支持替代的 -webkit-column-count 属性；Internet Explorer 9 以及更早版本的浏览器不支持 column-count 属性。

  • column-gap：Internet Explorer 10 和 Opera 支持 column-gap 属性，Firefox 支持替代的 -moz-column-gap 属性，Safari 和 Chrome 支持替代的 -webkit-column-gap 属性；Internet Explorer 9 以及更早版本的浏览器不支持 column-gap 属性。
  • column-rule：Internet Explorer 10 和 Opera 支持 column-rule 属性，Firefox 支持替代的 -moz-column-rule 属性，Safari 和 Chrome 支持替代的 -webkit-column-rule 属性；Internet Explorer 9 以及更早版本的浏览器不支持 column-rule 属性。
  • column-rule-color：Internet Explorer 10 和 Opera 支持 column-rule-color 属性，Firefox 支持替代的 -moz-column-rule-color 属性，Safari 和 Chrome 支持替代的 -webkit-column-rule-color 属性；Internet Explorer 9 以及更早版本的浏览器不支持 column-rule-color 属性。
  • column-rule-style ：Internet Explorer 10 和 Opera 支持 column-rule-style 属性，Firefox 支持替代的 -moz-column-rule-style 属性，Safari 和 Chrome 支持替代的 -webkit-column-rule-style 属性；Internet Explorer 9 以及更早版本的浏览器不支持 column-rule-style 属性。
  • column-rule-width：Internet Explorer 10 和 Opera 支持 column-rule-width 属性，Firefox 支持替代的 -moz-column-rule-width 属性，Safari 和 Chrome 支持替代的 -webkit-column-rule-width 属性；Internet Explorer 9 以及更早版本的浏览器不支持 column-rule-width 属性。
  • column-span：Internet Explorer 10 和 Opera 支持 column-span 属性，Safari 和 Chrome 支持替代的 -webkit-column-span 属性；Firefox、Internet Explorer 9 以及更早版本的浏览器不支持 column-span 属性。
  • column-width：Internet Explorer 10 和 Opera 支持 column-width 属性，Firefox 支持替代的 -moz-column-width 属性，Safari 和 Chrome 支持替代的 -webkit-column-width 属性；Internet Explorer 9 以及更早版本的浏览器不支持 column-width 属性。

  • columns：Internet Explorer 10 和 Opera 支持 columns 属性，Firefox 支持替代的 -moz-columns 属性，Safari 和 Chrome 支持替代的 -webkit-columns 属性；Internet Explorer 9 以及更早版本的浏览器不支持 columns 属性。

    CSS3 用户界面

  • Resize：（ 必须将元素的overflow属性设置为auto或hidden, 该属性才能起作用 ）
    Firefox 4+、Chrome 以及 Safari 支持； resize；ie和Opera 不支持。

  • box-sizing：(控制盒模型的组成模式)
    Internet Explorer、Firefox（ 需要前缀 -moz- ）、Chrome、Safari 以及Opera支持 box-sizing 属性。
  • outline-offset：所有主流浏览器都支持 outline-offset 属性，除了 Internet Explorer。
  • appearance：所有主流浏览器都不支持 appearance 属性，Firefox 支持替代的 -moz-appearance 属性，Safari 和 Chrome 支持替代的 -webkit-appearance 属性。（其余两个搜索不到，可能就是不支持吧）
  • nav-up、nav-right、nav-down、nav-left、nav-index:（规定在使用方向键时向何处导航）
    目前只有 Opera 支持 nav-down 属性。
  • icon：目前没有浏览器支持 icon 属性。

  • column-fill ：主流浏览器都不支持 column-fill 属性。

    参考网站：

  • http://www.w3school.com.cn

  • http://www.w3chtml.com/
  • http://www.runoob.com/
  • http://www.css88.com/
  • http://caniuse.com