重溫 w3cshool css3

border-radius： 2em 1em 4em / 0.5em 3em;  兼容性IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-radius 屬性。

等價於：

border-top-left-radius: 2em 0.5em;

border-top-right-radius: 1em 3em;

border-bottom-right-radius: 4em 0.5em;

border-bottom-left-radius: 1em 3em;

 

css3背景：

background-origin：padding-box | content-box | border-box

背景圖片相對什麼來定位

注：若是背景圖像的 background-attachment 屬性爲 "fixed"，則該屬性沒有效果。

 

background-size ：percentage | px | cover | contain

背景圖片大小

cover： 背景圖片足夠大，覆蓋背景區域，可能致使背景圖片顯示不徹底

contain：背景圖片擴展至最大尺寸，徹底適合背景區域

 

background-clip：padding-box | content-box | border-box

規定背景圖片的繪製區域

 

多重背景：

background： url（），url（）；

 

文字效果

text-shadow 與 word-wrap

text-shadow：2px 2px 2px color;

水平偏移2px，垂直偏移2px，模糊距離2px

 

word-wrap： normal | break-word

強制文本換行：（單詞可能會被拆分）

 

text-overflow： clip | ellipsis　| string

string：用給定的字符串表明被修訂的文本，（不知道怎麼用）

 

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

規定非中日韓文字的打斷方式

break-all：能夠在任意位置打斷

keep-all： 只能在半角空格或者連字符出打斷

 

還有text-justify，text-wrap等現代瀏覽器不支持的文本屬性

 

 

css3字體

@font-face

兼容性：IE9+僅支持.eot類型的文字

一：@font-face { 

    font-family: myFirstFont;

    src: url('Sansation_Bold.ttf'),

            url('Sansation_Bold.eot'); /* IE9+ */

      font-weight:bold;

}

 

二：@font-face {

    font-family: myFirstFont;

    src: url('Sansation_Bold.ttf'),

            url('Sansation_Bold.eot'); /* IE9+ */

}

 

一和二是兩種不一樣的字體，只有在文本中設置爲粗體時纔會加載一：

必選參數：

font-family： name；

src： url；

可選參數：

font-weight ,font-stretch, font-style;

 

 

 

2D轉換

transform：

IE6-8不支持；

其餘加瀏覽器私有屬性，兼容低版本（ff 和 opera不用）

    :translate( x , y );單位px；

 ：scale（x ,y）放大或者縮小的倍數

    ：skew（x ,y）圍繞X,Y奏翻轉的角度，單位deg

    matrix(）有六個參數，是2D轉換的集合

 

transform-origin：（x-axis，y-axis，z-axis）

定義轉換元素的初始位置：默認50%，50%；

x-axis，y-axis取值：left | center | right | length | %

z-axis: 取值 length

兼容性：

Internet Explorer 十、Firefox、Opera 支持 transform-origin 屬性。

Internet Explorer 9 支持替代的 -ms-transform-origin 屬性（僅適用於 2D 轉換）。

Safari 和 Chrome 支持替代的 -webkit-transform-origin 屬性（3D 和 2D 轉換）。

Opera 只支持 2D 轉換。

 

3D轉換：

以rotate爲例子

rotateX( deg)，定義以X軸爲中心的3d旋轉

rotate3d（x,y, z）.

兼容性：

Internet Explorer 10 和 Firefox 支持 3D 轉換。

Chrome 和 Safari 須要前綴 -webkit-。

Opera 仍然不支持 3D 轉換（它只支持 2D 轉換）。

 

轉換屬性：

transform-style:flat | presever-3d

:flat;子元素不保留其3d位置

：preserve-3d ；子元素保留其3d位置

 

 

 

preserve：number | none；

請與 perspective-origin 屬性一同使用該屬性，這樣您就可以改變 3D 元素的底部位置

當爲元素定義 perspective 屬性時，其子元素會得到透視效果，而不是元素自己

 

全部瀏覽器都不支持preserve，Chrome 和 Safari 支持替代的 -webkit-perspective 屬性。

效果：-webkit-perspective:60; /* Safari and Chrome */

-webkit-perspective:120; /* Safari and Chrome */

 

backface-visibility： visible | hidden;

元素不面向屏幕時是否可見

兼容性：

只有 Internet Explorer 10+ 和 Firefox 支持 backface-visibility 屬性。

Opera 15+、Safari 和 Chrome 支持替代的 -webkit-backface-visibility 屬性。

 

css3過渡

transition：property  duration timing-function delay

delay：延遲動畫開始時間，默認0；

那個元素須要過渡就給他設置transition；

如需向多個樣式添加過渡效果，請添加多個屬性，由逗號隔開：例子：

div { 

    transition: width 2s, height 2s, transform 2s;

    -moz-transition: width 2s, height 2s, -moz-transform 2s;

    -webkit-transition: width 2s, height 2s, -webkit-transform 2s;

    -o-transition: width 2s, height 2s,-o-transform 2s;

}

css3動畫：

@keyframes 與animation

目前瀏覽器都不支持 @keyframes 規則。

Firefox 支持替代的 @-moz-keyframes 規則。

Opera 支持替代的 @-o-keyframes 規則。

Safari 和 Chrome 支持替代的 @-webkit-keyframes 規則。

 

Internet Explorer 十、Firefox 以及 Opera 支持 @keyframes 規則和 animation 屬性。

Chrome 和 Safari 須要前綴 -webkit-。

 

animation-delay：2s

2s：表示在原位置停留2s，2s後動畫跳到對象正常運動2s所在的位置

-2s:動畫當即在正常運動2s時的位置出現

-------------------------------------------------

animation-play-state：running | paused

js語法：  object.style.animationPlayState="paused"

規定動畫正在運行仍是中止

想停就停，動畫變的更容易控制了

 

animation-fill-mode：none | forward | backwards | both；

規定動畫時間以外的狀態

 

none：不改變默認行爲。

forward ：當動畫完成後，保持最後一個屬性值（在最後一個關鍵幀中定義）。

backward ：在 animation-delay 所指定的一段時間內，在動畫顯示以前，應用開始屬性值（在第一個關鍵幀中定義）。

both ：向前和向後填充模式都被應用

 

舉例：

div{

    -webkit-animation-delay:2s;

}

對設置了 -webkit-animation-delay:2s;的對象，將延遲2s，而後當即跳到正常運動2s時所在的位置，

若設置了此處直接給divkeyframes中第一個關鍵幀中定義）animation-fill-mode：backward；動畫2s後將從初始位置開始動畫

 

多列布局

兼容性IE9及如下不支持，IE10+支持

主流瀏覽器加私有屬性吧

column-count：列數

column-gap：列與列之間的間隔

colum-rule： 1px solid #ccc；還不少值，須要用到差手冊

columns: 20px 3;列寬20px，分3列

column-span： 誇列數

column-fill ：主流瀏覽器都不支持

 

css3用戶界面

新的用戶界面特性包括重設元素尺寸，盒尺寸，輪廓等

resize：IE，android browser，IOS safari 都不支持

box-sizing： 只有IE6不支持

outline-offset：有用？？

 

新屬性：

appearance： normal |  icon | button | menu | filed | window

兼容性：全部主流瀏覽器都不支持 appearance 屬性。

Firefox 支持替代的 -moz-appearance 屬性。

Safari 和 Chrome 支持替代的 -webkit-appearance 屬性。

div{

    appearance：button；//使div形同btn

}

 

值 描述

normal 將元素呈現爲常規元素。

icon 將元素呈現爲圖標（小圖片）。

window 將元素呈現爲視口。

button 將元素呈現爲按鈕。

menu 將元素呈現爲一套供用戶選擇的選項。

field 將元素呈現爲輸入字段。

chrome測試只有btn呈現btn狀；