CSS3新特性，相容性，相容方法總結

来源:http://www.cnblogs.com/jesse131/archive/2016/04/28/5441199.html
-Advertisement-
Play Games

CSS3新特性，相容性，相容方法總結 css3手冊 "css3手冊" 邊框 border radius 用於添加圓角效果 語法: 用長度值設置對象的圓角半徑長度。不允許負值 用百分比設置對象的圓角半徑長度。不允許負值 實例: 相容性： IE9+,Firefox4+,Chrome5+,Safari5+ ...


CSS3新特性，相容性，相容方法總結

css3手冊css3手冊

邊框

border-radius

用於添加圓角效果

語法:

border-radius：[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?
<length>：用長度值設置對象的圓角半徑長度。不允許負值
<percentage>：用百分比設置對象的圓角半徑長度。不允許負值

實例:

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? && [<offset-x><offset-y><blur-radius>?<spread-radius>?<color>?]]#
inset：設置對象的陰影類型為內陰影。該值為空時，則對象的陰影類型為外陰影
<offset-x>: 這是第一個 length值設置水平偏移量，如果是負值則陰影位於元素左邊。
<offset-y>: 這是第二個 length值設置垂直偏移量，如果是負值則陰影位於元素上面。
<blur-radius>:這是第三個 length值。值越大，糊糊面積越大，陰影就越大越淡。 不能為負值。預設為0，此時陰影邊緣銳利。
<color>：設置對象的陰影的顏色。

實例：

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：<' 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);
}

  • 方法二、針對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

實例：

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：<box>#
<box> = 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：[ <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;
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
當你使用 <' overflow-wrap '> 時，最好同時使用 <' word-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: <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;
}

IE9以下不支持
詳情參閱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 | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | 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及以下不支持
詳情參閱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 | <' 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;
}
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 '> || <' 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：每個子元素兩側的間隔相等。所以，子元素之間的間隔比子元素與邊框的間隔大一倍
實例：

justify-content

相容性：

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（預設值）：軸線占滿整個交叉軸。
實例：

align-content

相容性：

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，將占滿整個容器的高度。
實例：

align-items

相容性：

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

實例：

align-self

相容性：

IE11+, Firefox22+, Chrome29+, Safari9+

相容方法：

低版本的chrome：-webkit-
詳情參閱align-self

order

設置或檢索彈性盒模型對象的子元素的排列順序。數值越小，排列越靠前，預設為0。

語法：

order：<integer>預設為0

實例：

order

相容性：

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全不相容


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 279. Perfect Squares
    Given a positive integer n, find the least number of perfect square numbers (for example, 1, 4, 9, 16, ...) which sum to n. For example, given n = 12, ...
  • dubbo+Springmvc+zookeeper高可用集群搭建
    核心技術：Maven,Springmvc mybatis shiro, Druid, Restful, Dubbo, ZooKeeper,Redis,FastDFS,ActiveMQ,Nginx 1. 項目核心代碼結構截圖 項目模塊依賴 特別提醒：開發人員在開發的時候可以將自己的業務REST服務化或 ...
  • Six Basic Functional Areas of Spring
    ...
  • DDD 領域驅動設計－領域模型中的用戶設計
    上一篇：《 "DDD 領域驅動設計－如何控制業務流程？" 》 開源地址： "https://github.com/yuezhongxin/CNBlogs.Apply.Sample" （代碼已更新，並增加了應用層代碼） 在 JsPermissionApply 領域模型中，User 被設計為值對象，也就 ...
  • Android驅動開發第一、二章讀書筆記
    第一章介紹了android系統移植與驅動開發的一些基本的概念，我做瞭如下總結： 一、android的系統架構分為四層 第一層是linux內核層 第二層是c/c++代碼庫 第三層是android Sdk API 第四層是應用程式層 android系統移植與驅動開發主要就是在linux內核層上進行的。a ...
  • 基於bootstarp的Dailog
    oaoDailog開發幫助 1. 幫助文檔關鍵字 boostrap模態框oaoDailog 2. 使用場景 當網頁上點擊某個按鈕需要給予用戶提示確認，用戶點擊確認按鈕才能繼續執行，或者用戶點擊取消按鈕則取消執行操作； 當網頁上點擊查看，展示的數據需要使用彈出框展示的情況下，可以使用oaoDailog ...
  • stylus--css　框架使用方法
    Stylus是一款需要編譯的css語言，所以其本身文件不能被html直接調用，需要要編譯為css文件後再進行日常的載入。 stylus是一款優秀的css編譯語言，需要node.js支持，第一步需要安裝node.js 問題：Windows調試時ctrl+d無效果 ctrl+c退出? 怎樣直接在wind ...
  • 圖片溢出div問題的最終解決方案
    前兩天編寫了一個前端頁面，在本機上顯示一切正常。不過在不斷的測試中，發現了一個嚴重的問題，如果圖片過大，會撐破div溢出來。再由於頁面是自適應頁面，根據不同解析度的顯示器會做出相應的div寬度調整，所以圖片即使不大，但是因解析度不同也會出現溢出的情況。 這裡探討總結一下解決方法。 首先我們先來做個簡 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類