css3新特性，兼容性，兼容方法总结 css3手册 css3手册
边框 border-radius 用于添加圆角效果
语法: border-radius：[ | ]{1,4} [ / [ | ]{1,4} ]? ： 用长度值设置对象的圆角半径长度。不允许负值
： 用百分比设置对象的圆角半径长度。不允许负值
实例: border-radius:10px;
border-radius:5px 10px 15px 20px; //顺序是顺时针 border-radius:26px 106px 162px 32px/28px 80px 178px 26px; //标准语法格式 border-radius:50%; //是相对于元素占据尺寸的百分比，即包含边框和padding后的尺寸
.radius{ border-top-left-radius:5px; //左上角，注意顺序是先上下后左右 border-top-right-radius:10px; //左上角 border-bottom-left-radius:15px; //左下角 border-bottom-left-radius:20px; //右上角 background-color:red; //即使元素没有边框，圆角也可以用到 background 上面，具体效果受 background-clip 影响。}
兼容性： ie9+,firefox4+,chrome5+,safari5+,opera01.5+,ios safari4+,android browser2.2+ ,android chrome18+
兼容方法： 低版本的chrome: -webkit-border-radius:10px; 低版本的firefox: -moz-border-radius:10px; ie6/7/8:引入ie-css3兼容文件,不支持除了黑色(#000)以外的其他颜色
详情参阅 让ie6/ie7/ie8浏览器支持css3属性
详情参阅 border-radius
box-shadow 用于添加阴影效果
语法： box-shadow：none|[inset? && [???]]# inset：设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影
: 这是第一个 length值设置水平偏移量，如果是负值则阴影位于元素左边。
: 这是第二个 length值设置垂直偏移量，如果是负值则阴影位于元素上面。
:这是第三个 length值。值越大，糊糊面积越大，阴影就越大越淡。 不能为负值。默认为0，此时阴影边缘锐利。
：设置对象的阴影的颜色。
实例： box-shadow: 10px 10px 5px #888;
box-shadow: 3px 3px green, -1em 0 0.4em gold; 兼容性： ie9.0+,firefox4.0+,chrome10.0+,safari5.1+,opera10.5+,ios safari5.0+,android browser4.0+,android chrome18.0+
兼容方法： 低版本的chrome: -webkit-box-shadow:10px 10px 5px #888; 低版本的firefox: -moz-box-shadow:10px 10px 5px #888; ie6/7/8:引入ie-css3兼容文件,不支持除了黑色(#000)以外的其他颜色
详情参阅 让ie6/ie7/ie8浏览器支持css3属性
详情参阅 box-shadow
border-image 用来给元素边框添加背景图片
语法： border-image： || [ / | / ? / ]? ||
：设置或检索对象的边框是否用图像定义样式或图像来源路径。
： 设置或检索对象的边框背景图的分割方式,该属性指定从上，右，下，左方位来分隔图像，将图像分成4个角，4条边和中间区域共9份，中间区域始终是透明的（即没图像填充），除非加上关键字 fill。
： 设置或检索对象的边框厚度。
：设置或检索对象的边框图像可超出边框盒的大小。
：设置或检索对象的边框图像的平铺方式repeat,round,stretch。
实例： border-image:url(http://www.w3school.com.cn/i/border.png) 30 30 round;
border-image:url(http://www.w3school.com.cn/i/border.png) 30 30 stretch; 兼容性： ie11+, firefox15+, chrome16+ , safari6+,opera15+,ios safari6+,android browser4.4+, android chrome18+
兼容方法： 低版本的chrome: -webkit-border-image:url(http://www.w3school.com.cn/i/border.png) 30 30 stretch; 低版本的firefox: -moz-border-image:url(http://www.w3school.com.cn/i/border.png) 30 30 stretch; 低版本的opera: -o-border-image:url(http://www.w3school.com.cn/i/border.png) 30 30 stretch; ie未解决
详情参阅 border-image , border-image
背景 background-size 设置背景图片大小。
语法： background-size：# = [ | | auto ]{1,2} | cover | contain ： 用长度值指定背景图像大小。不允许负值。
： 用百分比指定背景图像大小。不允许负值。
auto：背景图像的真实大小。
cover：将背景图像等比缩放到 完全覆盖容器 ，背景图像有可能超出容器。
contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被 包含在容器内 。
实例： background-size: cover;
background-size: contain; 兼容性： ie9+,firefox4+, chrome15+,safari7+, opera15+, ios safari7+, android browser4.4+, android chrome18+
兼容方法： 低版本的chrome: -webkit-background-size:10px 10px 5px #888; 不支持background简写
低版本的firefox: -moz-background-size:10px 10px 5px #888; ie8：
方法一(推荐)、引入backgroundsize.min.htc兼容文件
.size {width: 400px;height: 400px;margin: 20px auto 0;background: green url(img/1.jpg) no-repeat scroll center 0;background-size: cover;-ms-behavior: url(js/backgroundsize.min.htc);}
方法二、针对ie8的hack

详情参阅 background-size
background-origin 指定背景图片background-image 属性的原点位置的背景相对区域,当使用 background-attachment 为fixed时，该属性将被忽略不起作用
语法： background-origin：# = border-box | padding-box | content-box padding-box：从padding区域（含padding）开始显示背景图像。
border-box： 从border区域（含border）开始显示背景图像。
content-box：从content区域开始显示背景图像
实例： background-origin:content-box;padding:10px;
111111111111111111111111111
background-origin:border-box;padding:10px;border:15px solid transparent; 111111111111111111
兼容性： ie9+,firefox4.0+ chrome4.0+ safari6.0+, ios safari6.0+, android browser3.0+, android chrome18+
兼容方法： firefox4.0以下： -moz-background-origin:padding | border; 没有content
ie8下background-origin默认为padding-box
详情参阅 background-origin
background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框下面。
语法： background-clip：# = border-box | padding-box | content-box | inherit border-box背景延伸到边框外沿（但是在边框之下）。
padding-box边框下面没有背景，即背景延伸到内边距外沿。
content-box背景裁剪到内容区 (content-box) 外沿。
实例： background-clip:border-box;
111111111111111
兼容性： ie9+,firefox4.0+, chrome4.0+, safari6.0+,ios safari6.0+, android browser3.0+, android chrome18.0+
兼容方法： firefox4.0以下： -moz-background-origin:padding | border; 没有content
ie8下background-origin默认为padding-box
multiple backgrounds 语法： background：[ , ]* = || [ / ]? || || || || =||[/]?||||||||||
实例： 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;
兼容性： ie9+,firefox3.6+, chrome4.0+, safari3.1+
兼容方法： 未解决
文本 text-shadow 为文字添加阴影
语法： textshadow：none | [inset? && [ ?? ] ]# inset：设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影
: 这是第一个 length值设置水平偏移量，如果是负值则阴影位于元素左边。
: 这是第二个 length值设置垂直偏移量，如果是负值则阴影位于元素上面。
:这是第三个 length值。值越大，糊糊面积越大，阴影就越大越淡。 不能为负值。默认为0，此时阴影边缘锐利。
：设置对象的阴影的颜色。
实例： text-shadow:1px 1px 2px red;
12212121
兼容性： ie10+, firefox3.5+, chrome4.0+, safari6.0+
兼容方法： 低版本的chrome: -webkit-text-shadow:1px 1px 1px #000; 低版本的firefox: -moz-text-shadow:1px 1px 1px #000; ie6/7/8:引入ie-css3兼容文件,不支持除了黑色(#000)以外的其他颜色
详情参阅 让ie6/ie7/ie8浏览器支持css3属性
word-wrap 浏览器是否允许单词中断换行
word-wrap 属性原本属于微软的一个私有属性，在 css3 现在的文本规范草案中已经被重名为 overflow-wrap
当你使用 时，最好同时使用 作为备选，作向前兼容。
语法： word-wrap：normal | break-word
实例： word-wrap: break-word;
fstrprivfinändg (gesetz zur änderung des fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher vorschriften)
兼容性： ie6+,firefox3.5+, chrome4+, safari6+, ios safari6+, android browser2.1+, android chrome18+
兼容方法： 文字 @font-face 能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。
语法： @font-face { font-family: ; src: [][, []]*; [font-weight: ]; [font-style: ];}
实例： @font-face { font-family: 'yourwebfontname'; src: url('yourwebfontname.eot'); /* ie9 compat modes */ src: url('yourwebfontname.eot?#iefix') format('embedded-opentype'), /* ie6-ie8 */ url('yourwebfontname.woff') format('woff'), /* modern browsers */ url('yourwebfontname.ttf') format('truetype'), /* safari, android, ios */ url('yourwebfontname.svg#yourwebfontname') format('svg'); /* legacy ios */ font-weight: normal; font-style: normal;}
兼容性： 几乎所有浏览器也支持的网络字体@font-face的用法
兼容方法： 详情参阅 @font-face
2d3d转换 transform 元素可以按照设定的值变形、旋转、缩放、倾斜
语法： transform ： none | [ ]* transform-function list:
matrix() = matrix([,]{5,5}) matrix3d() = matrix3d([,]{15,15}) translate() = translate([,]?) translate3d() = translate3d(,,) translatex() = translatex() translatey() = translatey() translatez() = translatez() rotate() = rotate() rotate3d() = rotate3d(,,,) rotatex() = rotatex() rotatey() = rotatey() rotatez() = rotatez() scale() = scale([,]?) scale3d() = scale3d(,,) scalex() = scalex() scaley() = scaley() scalez() = scalez() skew() = skew([,]?) skewx() = skewx() skewy() = skewy() perspective() = perspective() <translation-value> = <length> | <percentage>
实例： transform:none;
transform:rotate(30deg) scale(0.5);//大家记住了是空格隔开 transform:skew(45deg); transform:translate(100px 20px); 兼容性： ie9+, firefox3.5+, chrome4.0+, safari6.0+, ios safari8.4+, android browser4.4+, android chrome34+
兼容方法： .transform{ -webkit-transform: x,y; -moz-transform: x,y; -ms-transform: x,y; -o-transform: x,y; transform: x,y;}
ie9以下不支持
详情参阅 transform
过渡 transition css的属性值在一定的时间区间内平滑地过渡
语法： transition ：[ || || || [, [ || || || ]]* transition-property ： none | all | [ ] [ ',' ]* 检索或设置对象中的参与过渡的属性
transition-duration ： [, ]* 检索或设置对象过渡的持续时间
transition-timing-function ： ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , ) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , )]* 检索或设置对象中过渡的动画类型
transition-delay ： [, ]* 检索或设置对象延迟过渡的时间
实例： transition: all .5s ease-in-out 1s;
兼容性： ie10+, firefox16+, chrome26+ ,safari6.1+ , ios safari7+, android browser4.4+, android chrome25+
兼容方法： p { -webkit-transition: all .5s ease-in-out 1s; -moz-transition: all .5s ease-in-out 1s; -o-transition: all .5s ease-in-out 1s; transition: all .5s ease-in-out 1s;}
ie9以及更早的版本，不支持 transition 属性。
详情参阅 transition
动画 animation 检索或设置对象所应用的动画特效。
语法： animation：[,]* = || || || || || || || ：检索或设置对象所应用的动画名称
：检索或设置对象动画的持续时间
：检索或设置对象动画的过渡类型
：检索或设置对象动画延迟的时间
：检索或设置对象动画的循环次数
：检索或设置对象动画在循环中是否反向运动
：检索或设置对象动画时间之外的状态
：检索或设置对象动画的状态。
实例： .animation:hover{ -webkit-animation:animated_div 5s 1; -moz-animation:animated_div 5s 1; animation:animated_div 5s 1;}@keyframes animated_div{ 0% {transform: rotate(0deg);left:0px;} 25% {transform: rotate(20deg);left:0px;} 50% {transform: rotate(0deg);left:500px;} 55% {transform: rotate(0deg);left:500px;} 70% {transform: rotate(0deg);left:500px;background:#1ec7e6;} 100% {transform: rotate(-360deg);left:0px;}}
兼容性： ie10+,firefox16+, chrome43+, safari9+
兼容方法： 低版本的chrome:-webkit-
低版本的firefox：-moz-
ie9及以下不支持
详情参阅 animation
@keyframes 用于创建动画
语法： @keyframes ident { 0% { properties:properties value; } percentage { properties:properties value; } 100% { properties:properties value; }}
实例： 见上例
兼容性： ie10+,firefox16+, chrome43+, safari9+
兼容方法： 低版本的chrome:-webkit-
低版本的firefox：-moz-
ie9及以下不支持
详情参阅 animation
颜色 linear-gradient radial-gradient 实现真实的渐变效果。
语法： = linear-gradient([ [ | to ] ,]? [, ]+) = [left | right] || [top | bottom] = [ | ]? ：用角度值指定渐变的方向（或角度）。 用于指定渐变的起止颜色：
实例： background:linear-gradient(to bottom, #fff 0%, red 100%);
background:radial-gradient(#fff 0%, red 100%); 兼容性： ie10+, firefox16+, chrome26+, safari6.1+
兼容方法： 低版本的chrome:-webkit-
低版本的firefox：-moz-
ie9及以下不支持
详情参阅 gradient
rgba(r,g,b,a) 设置颜色red+green+blue+alpha
语法： rgba(r,g,b,alpha)
实例： rgba(255,0,0,.2)
兼容性： ie9+, firefox2+, chrome4+, safari3+, ios safari3.2+, android browser2.1+, android chrome18+
兼容方法： ie6/7/8不支持使用 rgba 模式实现透明度，可使用 ie 滤镜处理
-m-filter:progid:dximagetransform.microsoft.gradient(startcolorstr=#7f000000,endcolorstr=#7f000000); 详情参阅 ie8下兼容rgba颜色的半透明背景
flex布局 flex元素是可以让你的布局根据浏览器的大小变化进行自动伸缩。
flex 设置或检索弹性盒模型对象的子元素如何分配空间。用在子容器上
语法： flex：none | '? || 默认值为0 1 auto，建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。 flex-grow：设置或检索弹性盒的扩展比率。默认为0,如果所有子容器的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个子容器的flex-grow属性为2，其他都为1，则前者占据的剩余空间将比其他项多一倍。 flex-shrink：设置或检索弹性盒的收缩比率。如果所有子容器的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个子容器的flex-shrink属性为0，其他子容器都为1，则空间不足时，前者不缩小。 flex-basis： | | auto | content 定义了在分配多余空间之前，子容器占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即子容器的本来大小。
实例： .parent{ display:-webkit-flex; //低版本的chrome display:-moz-box; //低版本的firefox display:-ms-flexbox; //ie10 display:flex; width:600px; height:100px;border:1px solid #000; }.parent div{ -webkit-flex:1; -moz-box-flex:1; -ms-flex:1; flex:1; border:1px solid red;}
children1
children2
children3
兼容性： ie11+,firefox22+, chrome21+, safari6.1+
兼容方法： 低版本的chrome:-webkit- 或者 -webkit-box-flex
低版本的firefox：-moz-box-flex:1;
ie10:-ms-flex:1;
box-flex效果类似于过渡版本和新版本的flex属性；
详情参阅 flex
flex-flow 设置或检索弹性盒模型对象的子元素排列方式。用在父容器上
语法： flex-flow： || ：定义弹性盒子元素的排列方向。 flex-direction：row | row-reverse | column | column-reverse
row：主轴与行内轴方向作为默认的书写模式。即横向从左到右排列（左对齐）。 row-reverse：对齐方式与row相反。 column：主轴与块轴方向作为默认的书写模式。即纵向从上往下排列（顶对齐）。 column-reverse：对齐方式与column相反。 控制flex容器是单行或者多行. flex-wrap：nowrap | wrap | wrap-reverse
nowrap：flex容器为单行。该情况下flex子项可能会溢出容器 wrap：flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行 wrap-reverse：反转 wrap 排列。 实例： flex-flow:row nowrap a b c flex-flow:row wrap-reverse a b c flex-flow:column wrap-reverse; a b c 兼容性： ie11+, firefox28+, chrome29+, safari9+
兼容方法： 可以通过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 的效果；
box-lines效果类似于过渡版本和新版本的flex-wrap属性
justify-content 设置或检索弹性盒子元素在主轴（横轴）方向上的定位方式。
语法： justify-content：flex-start | flex-end | center | space-between | space-around
flex-start（默认值）：左对齐 flex-end：右对齐 center： 居中 space-between：两端对齐，项目之间的间隔都相等。 space-around：每个子元素两侧的间隔相等。所以，子元素之间的间隔比子元素与边框的间隔大一倍 实例：
兼容性： ie11+, firefox22+, chrome29+, safari9+
兼容方法： 详情参阅 justify-content
align-content 调整伸缩子元素在侧轴(纵轴)上的定位方式，如果子元素只有一根轴线，该属性不起作用
语法： align-content：flex-start | flex-end | center | space-between | space-around | stretch
flex-start：与交叉轴的起点对齐。 flex-end：与交叉轴的终点对齐。 center：与交叉轴的中点对齐。 space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。 space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。 stretch（默认值）：轴线占满整个交叉轴。 实例：
兼容性： ie11+, firefox22+, chrome29+, safari9+
兼容方法： 低版本的chrome：-webkit-
box-pack效果等同于过渡版本的flex-pack属性和新版本的justify-content属性；
详情参阅 align-content
align-items 定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的定位方式。
语法： align-items：flex-start | flex-end | center | baseline | stretch
flex-start：交叉轴的起点对齐。 flex-end：交叉轴的终点对齐。 center：交叉轴的中点对齐。 baseline: 项目的第一行文字的基线对齐。 stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。 实例：
兼容性： ie11+, firefox22+, chrome29+, safari9+
兼容方法： 低版本的chrome：-webkit-
box-align效果等同于过渡版本的flex-align属性和新版本的align-items属性；
详情参阅 align-items
align-self 定义flex子项单独在侧轴（纵轴）方向上的对齐方式。align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
语法： align-self：auto | flex-start | flex-end | center | baseline | stretch
实例：
兼容性： ie11+, firefox22+, chrome29+, safari9+
兼容方法： 低版本的chrome：-webkit-
详情参阅 align-self
order 设置或检索弹性盒模型对象的子元素的排列顺序。数值越小，排列越靠前，默认为0。
语法： order：<integer>默认为0
实例：
兼容性： ie11+, firefox22+, chrome29+, safari9+
兼容方法： 低版本的chrome：-webkit-
box-oridinal-group效果等同于过渡版本的flex-order属性和新版本的order属性；
详情参阅 order
其他 box-sizing 用来改变默认的 css 盒模型 对元素宽高的计算方式
语法： box-sizing：content-box | border-box content-box：
padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( element width = width + border + padding )
border-box：
padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( element width = width )
实例： box-sizing：content-box
box-sizing：border-box 兼容性： ie8+, firefox29+, chrome10+, safari6+
兼容方法： 详情参阅 box-sizing
resize 设置或检索对象的区域是否允许用户缩放，调节元素尺寸大小。多用于textarea元素
语法： resize：none | both | horizontal | vertical
实例： resize:none

兼容性： firefox chrome safari现代版都兼容
兼容方法： ie全不兼容