css3整理

W3C的CSS3規範仍在開發，可是，許多新的CSS3屬性已在現代瀏覽器使用

CSS3邊框

border-radius
    border-top-left-radius: 2em 0.5em
box-shadow:x-shadow y-shadow blur spread(陰影尺寸，可選) color inset(outset外部陰影，可選)
border-image
    border-image-source:設置或檢索對象的邊框是否用圖像定義樣式或圖像來源路徑
    border-image-slice:設置或檢索對象的邊框背景圖的分割方式
    border-image-width:設置或檢索對象的邊框厚度
    border-image-outset:設置或檢索對象的邊框背景圖的擴展
    border-image-repeat:stretch/repeat/round;設置或檢索對象的邊框圖像的平鋪方式

CSS3背景

background-image背景圖片
background-color;背景顏色
background-repeat:背景重複
background-position:背景定位
background-attachment:scroll/fixed;背景固定
background-size:x y/100% 100%/cover(比例放大)/contain(包含，圖片不溢出)
background-origin:border-box/padding-box/content-box;背景區域定位
background-clip:border-box/padding-box/content-box/no-clip;背景繪製區域

CSS3漸變

linear-gradient:left/top/right/bottom/left top.../0-360deg(起點/角度)，顏色，位置red 50% blue 100%
radial-gradient:(起點(圓心位置)，形狀/半徑/大小，顏色1，顏色2);徑向漸變
    起點:left/top/right/bottom
    形狀:ellipsis/circle
    大小:數值或百分比
repeating-linear-gradient線性漸變重複平鋪
    IE低版本漸變（濾鏡）：
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#000000',GradientType='1');
repeating-radial-gradient

CSS3字體

@font-face

CSS3 2D轉換

transform:translate(),rotate(),scale(),skew(),matrix()

CSS3 3D轉換

rotateX()
rotateY()
rotateZ()
translateZ()
scaleZ()

CSS3過渡

transition:property duration timing-function delay;
    transition-property:none/all/property
    transition-duration:time;
    transition-timing-function:linear/ease/ease-in-out/ease-in/ease-out/cubic-bezier;

CSS3動畫

@keyframes,
animation(
animation-name,animation-duration,animation-timing-function,animation-delay,animation-direction,animation-play-state,animation-iteration-count
)

CSS3多列

column-count
column-gap
column-rule-style
column-rule-width
column-rule-color
column-rule
column-span
column-width

CSS3用戶界面

resize
box--sizing
outline-offset

CSS3框大小

box-sizing:border-box;(content-box)

CSS3彈性盒子

display:box或者display:inline-box;設置給父元素
box-orient:horizontal/vertical;定義盒模型的佈局方向，設置給父元素
box-direction:normal/reverse;元素排列順序，設置給父元素
box-ordinal-group:number;子元素的顯示次序，設置給子元素
display:flex;彈性盒子佈局
[flex佈局教程：語法篇][1]
[flex佈局教程：實力篇][2]

CSS3多媒體查詢

@media screen and (min-width: 480px)

CSS3文本屬性

color:rgba();
text-overflow:是否使用一個省略標記(...)標示對象內文本的溢出
    text-overflow:clip;//默認值，無省略號
    text-overflow:ellipsis//當文本溢出時顯示省略標記(...)
    PS:該屬性需配合overflow:hidden(超出處理)屬性和white-space:nowrap(禁止換行)配合使用，不然沒法看到效果
text-align:文本的對齊方式
    text-align:left/right/center/justify(兩端對齊);//CSS1
    text-align:start(開始邊界對齊)/end(結束邊界對齊);//CSS3
text-transform:文字的大小寫
    text-transform:none/capitalize(每一個單詞的第一個單詞轉換成大寫)/uppercase/lowercase;//CSS1
    text-transform:full-width(將左右字符設爲全角形式。不支持)/full-size-kana(將全部小假名字符轉換成普通假名。不支持)
text-decoration:文本的裝飾線
    複合屬性只有火狐支持
    text-decoration:text-decoration-line text-decoration-style text-decoration-color blink;
    實例 text-decoration:#f00 double overline;
text-shadow:文本陰影
    text-shadow:x y blur color;
text-fill-color:文字填充顏色
text-stroke:設置文字的描邊，複合屬性
    text-stroke-width:文字的描邊厚度
    text-stroke-color:文字的描邊顏色
tab-size:製表符的長度
    默認值爲8;
word-wrap:當前行超過指定容器的邊界時是否斷開轉行
    word-wrap:normal/break-word(容許長單詞換行到下一行)
word-break:規定自動換行的處理方法
    word-break:normal/break-all(容許在單詞內部換行)/keep-all(只能在半角空格或連字符處換行)

CSS僞類選擇器

UI僞類選擇器
    :enabled選擇啓用狀態的元素
    :disabled選擇禁用狀態的元素
    :checked選擇被選中的input元素（單選按鈕或複選框）
    :default選擇默認元素
    :valid/invalid根據輸入驗證選擇有效或無效的input元素
    :in-range/out-of-range選擇指定範圍以內或者以外受限的元素
    :required/optional根據是否容許:required屬性選擇input元素
動態僞類選擇器
    :link選擇連接元素
    :visited選擇用戶已訪問的元素
    :hover鼠標懸停其上的元素
    :active鼠標點擊時觸發的事件
    :focus當前獲取焦點的元素
其餘僞類選擇器
    :not(<選擇器>)對括號內選擇器的選擇取反
    :lang(<目標語言>)基於lang全局屬性的元素
    :target url片斷標示符指向的元素
    :empty選擇內容爲空的元素
    :selection鼠標光標選擇元素內容