CSS3新特性，兼容性，兼容方法總結
css3手冊css3手冊css
邊框
border-radius
用於添加圓角效果html
語法:
border-radius：[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?
<length>：用長度值設置對象的圓角半徑長度。不容許負值
<percentage>：用百分比設置對象的圓角半徑長度。不容許負值css3
實例:
border-radius:10px;
web
border-radius:5px 10px 15px 20px; //順序是順時針
border-radius:26px 106px 162px 32px/28px 80px 178px 26px; //標準語法格式
border-radius:50%; //是相對於元素佔據尺寸的百分比，即包含邊框和padding後的尺寸
chrome
.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? && [<offset-x><offset-y><blur-radius>?<spread-radius>?<color>?]]#
inset：設置對象的陰影類型爲內陰影。該值爲空時，則對象的陰影類型爲外陰影
<offset-x>: 這是第一個 length值設置水平偏移量，若是是負值則陰影位於元素左邊。
<offset-y>: 這是第二個 length值設置垂直偏移量，若是是負值則陰影位於元素上面。
<blur-radius>:這是第三個 length值。值越大，糊糊面積越大，陰影就越大越淡。 不能爲負值。默認爲0，此時陰影邊緣銳利。
<color>：設置對象的陰影的顏色。ide
實例：
box-shadow: 10px 10px 5px #888;
svg
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:
- 方法一:
filter:progid:dXImageTransform.Microsoft.DropShadow(color=#888888,offX=10,offY=10,positives=true);
缺點：陰影不能邊緣模糊
- 方法二：
filter:progid:DXImageTransform.Microsoft.Shadow(color='#0099ff', Direction='120', Strength='10');
相似於投影效果，缺點：陰影不能邊緣模糊
- 方法三(推薦)、引入ie-css3兼容文件
behavior:url(ie-css3.htc)
缺點：不支持除了黑色(#000)之外的其餘顏色
詳情參閱讓IE6/IE7/IE8瀏覽器支持CSS3屬性
詳情參閱box-shadow
border-image
用來給元素邊框添加背景圖片
語法：
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 '>： 設置或檢索對象的邊框背景圖的分割方式,該屬性指定從上，右，下，左方位來分隔圖像，將圖像分紅4個角，4條邊和中間區域共9份，中間區域始終是透明的（即沒圖像填充），除非加上關鍵字 fill。
<' border-image-width '>： 設置或檢索對象的邊框厚度。
<' border-image-outset '>：設置或檢索對象的邊框圖像可超出邊框盒的大小。
<' border-image-repeat '>：設置或檢索對象的邊框圖像的平鋪方式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：<bg-size>#
<bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain
<length>：用長度值指定背景圖像大小。不容許負值。
<percentage>：用百分比指定背景圖像大小。不容許負值。
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);
}
- 方法2、針對IE8的hack
<!--[if IE 8]>
<style type="text/css">
.size{
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/1.jpg', sizingMethod='scale')";
}
//該函數只能模仿cover值,IE8下效果與IE9/10稍有不一樣,圖片佔滿背景大小且不超出
</style>
<![endif]-->
詳情參閱background-size
background-origin
指定背景圖片background-image 屬性的原點位置的背景相對區域,當使用 background-attachment 爲fixed時，該屬性將被忽略不起做用
語法：
background-origin：<box>#
<box> = border-box | padding-box | content-box
padding-box：從padding區域（含padding）開始顯示背景圖像。
border-box： 從border區域（含border）開始顯示背景圖像。
content-box：從content區域開始顯示背景圖像
實例：
background-origin:content-box;padding:10px;
background-origin:border-box;padding:10px;border:15px solid transparent;
兼容性：
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-clip
設置元素的背景（背景圖片或顏色）是否延伸到邊框下面。
語法：
background-clip：<box>#
<box> = border-box | padding-box | content-box | inherit
border-box背景延伸到邊框外沿（可是在邊框之下）。
padding-box邊框下面沒有背景，即背景延伸到內邊距外沿。
content-box背景裁剪到內容區 (content-box) 外沿。
實例：
background-clip:border-box;
兼容性：
IE9+,Firefox4.0+, Chrome4.0+, Safari6.0+,iOS Safari6.0+, Android Browser3.0+, Android Chrome18.0+
兼容方法：
firefox4.0如下：-moz-background-clip:padding | border; //沒有content
IE8下background-clip默認爲padding-box
multiple backgrounds
語法：
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:
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? && [ <offset-x> <offset-y> <blur-radius>?<color>? ] ]#
inset：設置對象的陰影類型爲內陰影。該值爲空時，則對象的陰影類型爲外陰影
<offset-x>: 這是第一個 length值設置水平偏移量，若是是負值則陰影位於元素左邊。
<offset-y>: 這是第二個 length值設置垂直偏移量，若是是負值則陰影位於元素上面。
<blur-radius>:這是第三個 length值。值越大，糊糊面積越大，陰影就越大越淡。 不能爲負值。默認爲0，此時陰影邊緣銳利。
<color>：設置對象的陰影的顏色。
實例：
text-shadow:1px 1px 2px red;
兼容性：
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:
- 方法1、引入ie-css3兼容文件
behavior:url(ie-css3.htc);
- 方法2、
filter:shadow(color=blue,direction=225),direction表示投影角度
word-wrap
瀏覽器是否容許單詞中斷換行
word-wrap 屬性本來屬於微軟的一個私有屬性，在 CSS3 如今的文本規範草案中已經被重名爲 overflow-wrap
當你使用 <' overflow-wrap '> 時，最好同時使用 <' word-wrap '> 做爲備選，做向前兼容。
語法：
word-wrap：normal | break-word
實例：
word-wrap: break-word;
兼容性：
IE6+,Firefox3.5+, Chrome4+, Safari6+, iOS Safari6+, Android Browser2.1+, Android Chrome18+
兼容方法：
現代瀏覽器幾乎都支持
文字
@font-face
可以加載服務器端的字體文件，讓客戶端顯示客戶端所沒有安裝的字體。
語法：
@font-face {
font-family: <YourWebFontName>;
src: <source> [<format>][,<source> [<format>]]*;
[font-weight: <weight>];
[font-style: <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> [ <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>實例：
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;
}
IE8及如下：用IE濾鏡
{
filter:fliph;//水平翻轉至關於transform:rotateY(180deg)
filter:flipv;//垂直翻轉至關於transform:rotateX(180deg)
}
詳情參閱transform
過渡
transition
css的屬性值在必定的時間區間內平滑地過渡
語法：
transition ：[<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*
transition-property ： none | all | [ <ident> ] [, <ident> ]*檢索或設置對象中的參與過渡的屬性
transition-duration ： <time> [, <time>]*檢索或設置對象過渡的持續時間
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 | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>)]*
檢索或設置對象中過渡的動畫類型
transition-delay ： <time> [, <time>]* 檢索或設置對象延遲過渡的時間
實例：
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：<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>
<' animation-name '>：檢索或設置對象所應用的動畫名稱
<' animation-duration '>：檢索或設置對象動畫的持續時間
<' animation-timing-function '>：檢索或設置對象動畫的過渡類型
<' animation-delay '>：檢索或設置對象動畫延遲的時間
<' animation-iteration-count '>：檢索或設置對象動畫的循環次數
<' animation-direction '>：檢索或設置對象動畫在循環中是否反向運動
<' animation-fill-mode '>：檢索或設置對象動畫時間以外的狀態
<' animation-play-state '>：檢索或設置對象動畫的狀態。
實例：
.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> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)
<side-or-corner> = [left | right] || [top | bottom]
<color-stop> = <color> [ <length> | <percentage> ]?
<angle>：用角度值指定漸變的方向（或角度）。
<color-stop> 用於指定漸變的起止顏色：
實例：
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及如下可以使用 IE 濾鏡處理:
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000',endColorstr='#ffffff');
詳情參閱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 濾鏡處理
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7fff0000,endColorstr=#7fff0000);
使用後咱們又發現了個小問題，IE9下顏色更深一點，仔細研究發如今IE9下rgba顏色和IE濾鏡都能被識別，因此被覆蓋了顏色就更深一點
解決辦法：
.demo{filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7fff0000,endColorstr=#7fff0000);}
:root .demo{filter:none;background-color:rgba(255,0,0,.2);}//IE8及如下不識別
flex佈局
Flex元素是可讓你的佈局根據瀏覽器的大小變化進行自動伸縮。
flex
設置或檢索彈性盒模型對象的子元素如何分配空間。用在子容器上
語法：
flex：none | <' flex-grow '> <' flex-shrink >'? || <' flex-basis '>
默認值爲0 1 auto，建議優先使用這個屬性，而不是單獨寫三個分離的屬性，由於瀏覽器會推算相關值。
flex-grow：<number>設置或檢索彈性盒的擴展比率。
默認爲0,若是全部子容器的flex-grow屬性都爲1，則它們將等分剩餘空間（若是有的話）。若是一個子容器的flex-grow屬性爲2，其餘都爲1，則前者佔據的剩餘空間將比其餘項多一倍。
flex-shrink：<number>設置或檢索彈性盒的收縮比率。
若是全部子容器的flex-shrink屬性都爲1，當空間不足時，都將等比例縮小。若是一個子容器的flex-shrink屬性爲0，其餘子容器都爲1，則空間不足時，前者不縮小。
flex-basis：<length> | <percentage> | 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;
}
兼容性：
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 '> || <' flex-wrap '>
<' flex-direction '>：定義彈性盒子元素的排列方向。
flex-direction：row | row-reverse | column | column-reverse
- row：主軸與行內軸方向做爲默認的書寫模式。即橫向從左到右排列（左對齊）。
- row-reverse：對齊方式與row相反。
- column：主軸與塊軸方向做爲默認的書寫模式。即縱向從上往下排列（頂對齊）。
- column-reverse：對齊方式與column相反。
<' flex-wrap '>控制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全不兼容
- 1. 兼容性總結
- 2. 移動端常見問題（H5兼容性+JS兼容性+css3兼容性）
- 3. CSS兼容性總結
- 4. ie8兼容性總結
- 5. css3漸變屬性兼容性和div圓角屬性兼容性
- 6. Html Css/css3兼容性總結（兼容主流瀏覽器包括Ie6）
- 7. css3 flex屬性 兼容性問題
- 8. iOS7新特性的兼容性處理方法 之三
- 9. transform兼容性
- 10. 兼容性
- 更多相關文章...
- • PHP 7 新特性 - PHP教程
- • MySQL 5.7的新特性（新功能） - MySQL教程
- • JDK13 GA發佈：5大特性解讀
- • 算法總結-回溯法
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 兼容性總結
- 2. 移動端常見問題（H5兼容性+JS兼容性+css3兼容性）
- 3. CSS兼容性總結
- 4. ie8兼容性總結
- 5. css3漸變屬性兼容性和div圓角屬性兼容性
- 6. Html Css/css3兼容性總結（兼容主流瀏覽器包括Ie6）
- 7. css3 flex屬性 兼容性問題
- 8. iOS7新特性的兼容性處理方法 之三
- 9. transform兼容性
- 10. 兼容性