CSS API整理復(fù)習(xí)

1. 選擇器（基礎(chǔ)選擇器、組合選擇器、偽元素、偽類）
2. 定位、尺寸
3. 內(nèi)外邊距（margin、padding）
4. 邊框
5. 布局
6. 背景、顏色、漸變
7. 字體、文本、文本裝飾、書寫模式
8. 列表、表格
9. 內(nèi)容
10. 界面樣式
11. 多列
12. 伸縮盒（新、舊）
13. 轉(zhuǎn)換、過渡、動(dòng)畫
14. 裁剪（clip、clip-path）、遮罩（mask）
15. 單位（長度、角度、時(shí)間、頻率、分辨率、顏色）
16. 函數(shù)
17. 媒體查詢
18. 私有屬性（IE、Firefox、Webkit）
19. 其他

E ： 元素選擇器（以DOM元素名稱來匹配：具體用法）
.classname ：類選擇器（以類名來匹配：具體用法）
#id ：ID選擇器（以唯一標(biāo)識(shí)符id屬性匹配：具體用法）
* ：通配選擇器（可匹配任意類型的DOM元素：具體用法）

（2）組合選擇器

A + B ：相鄰兄弟選擇器（匹配A元素后的兄弟B元素，B元素必須緊跟著A元素：具體用法）
A ~ B ：普通兄弟選擇器（匹配A元素后的兄弟B元素，B元素只需在A元素后，不要求緊跟：具體用法）
A > B ：子選擇器（匹配A元素內(nèi)的直接后代B元素，不包含孫輩：具體用法）
A B   ：后代選擇器（匹配A元素內(nèi)的B元素，包含所有匹配的子孫后代：具體用法）

（3）屬性選擇器

E[attr]        ： 匹配具有attr屬性的E元素
E[attr="val"]  ： 匹配具有attr屬性，且attr值為“val”的E元素
E[attr~="val"] ： 匹配具有attr屬性，且attr值是一個(gè)以空格作為分隔的值列表，其中至少一個(gè)值為“val”的E元素
E[attr^="val"] ： 匹配具有attr屬性，且attr值是以val開頭的E元素
E[attr$="val"] ： 匹配具有attr屬性，且attr值是以val結(jié)尾的E元素
E[attr*="val"] ： 匹配具有attr屬性，且attr值包含“value”的E元素
E[attr|="val"] ： 匹配具有attr屬性，且attr值是一個(gè)以空格為分隔的值列表，其中至少一個(gè)值為“val”或至少一個(gè)值以“val-”開頭的E元素。
具體用法

（3）偽元素

E::after / E:after  ：兩個(gè)等價(jià)，用來創(chuàng)建已選中元素的一個(gè)虛擬的最后子元素（行內(nèi)元素），必須設(shè)置content屬性：具體用法
E::before / E:before ：兩個(gè)等價(jià)，用來創(chuàng)建已選中元素的一個(gè)虛擬的第一個(gè)子元素（行內(nèi)元素），必須設(shè)置content屬性：具體用法
E::first-letter / E:first-letter ： 匹配已選中元素內(nèi)的文字的第一行的第一個(gè)字母（只作用于塊元素）：具體用法
E::selection ： 設(shè)置文檔被選擇時(shí)的樣式：具體用法
E::first-line / E:first-line ：設(shè)置匹配元素內(nèi)的第一行文字（只作用于塊元素）：具體用法
E::placeholder ：設(shè)置表單輸入框占位符：具體用法

（4）偽類

E:checked ：匹配用戶界面上處于選中狀態(tài)的元素E。(用于input type為radio與checkbox時(shí))：具體用法
E:disabled ：匹配頁面上任何被禁用的元素：具體用法
E:enabled ：匹配頁面上任何啟用的元素：具體用法
E:empty ： 匹配沒有子元素的元素：具體用法
E:first-child ：匹配父元素的第一個(gè)子元素E，E必須是某個(gè)元素的子元素：具體用法
E:first-of-type ： 匹配同類型中的第一個(gè)兄弟元素E，E必須是某個(gè)元素的子元素：具體用法
E:focus ： 匹配一個(gè)成為焦點(diǎn)的元素（該元素的onfocus事件發(fā)生）：具體用法
E:link  ： 設(shè)置超鏈接a在未被訪問狀態(tài)的樣式：具體用法
E:visited：匹配超鏈接a在其鏈接地址已被訪問過的元素：具體用法
E:active ： 匹配被用戶激活的元素（在鼠標(biāo)點(diǎn)擊與釋放之間發(fā)生的事件）：具體用法
E:hover ： 匹配鼠標(biāo)懸停在其上面的元素：具體用法
E:last-child ：匹配父元素的最后一個(gè)子元素E，E必須是某個(gè)元素的子元素：具體用法
E:not(x) ：否定偽類，匹配不符合參數(shù)選擇器X描述的元素。X不能包含另外一個(gè)否定選擇器：具體用法
E:nth-child(n) ：匹配父元素的第n個(gè)子元素E，假設(shè)該子元素不是E，則選擇符無效：具體用法
E:nth-last-child(n) ：匹配父元素的倒數(shù)第n個(gè)子元素E，假設(shè)該子元素不是E，則選擇符無效：具體用法
E:nth-last-of-type(n) ：匹配同類型中的倒數(shù)第n個(gè)同級(jí)兄弟元素E:具體用法
E:nth-of-type(n)：匹配同類型中的第n個(gè)兄弟元素E：具體用法
E:only-child：匹配父元素僅有的一個(gè)子元素E，E元素必須是某個(gè)元素的子元素：具體用法
E:only-of-type：匹配代表了任意一個(gè)元素，這個(gè)元素E沒有其他相同類型的兄弟元素：具體用法
E:root：匹配文檔樹的根元素，即html
E:target：匹配URL中的錨點(diǎn)指向的E元素：具體用法
E:invalid ：當(dāng)元素的內(nèi)容無法通過輸入的類型設(shè)置的驗(yàn)證時(shí)匹配
E:valid：當(dāng)元素的內(nèi)容通過輸入的類型設(shè)置的驗(yàn)證時(shí)匹配
E:fullscreen：匹配位于全屏狀態(tài)下的元素
E:lang(en)：匹配lang屬性的起始值是en的E元素
E:optional：匹配可選（沒有設(shè)置“required”）的輸入元素：具體用法
E:in-range：匹配輸入的值在指定區(qū)間內(nèi)的元素：具體用法
E:out-of-range：匹配輸入的值在指定區(qū)間外的元素：具體用法
E:read-only：匹配設(shè)置 "readonly"（只讀） 屬性的元素：具體用法
E:read-write：匹配沒有設(shè)置“readonly”屬性的元素：具體用法
E:required： 匹配設(shè)置了 "required" 屬性的元素：具體用法

//下面的尚未搞清楚
E:left
E:right
E:scope
E:any 
E:default
E:indeterminate

2、定位、尺寸

（1）定位

position：設(shè)置元素的定位方式：具體用法
top：設(shè)置一個(gè)定位元素的上外邊距邊界與其包含塊（父元素）上邊界之間的偏移：具體用法
right：設(shè)置定位元素右外邊距邊界與其包含塊右邊界之間的偏移：具體用法
bottom：設(shè)置定位元素下外邊距邊界與其包含塊下邊界之間的偏移：具體用法
left：設(shè)置定位元素左外邊距邊界與其包含塊左邊界之間的偏移：具體用法
z-index：設(shè)置一個(gè)元素的堆疊順序，可為負(fù)數(shù)（只作用于定義了position為非static的元素）：具體用法

（2）尺寸

width：設(shè)置元素的寬度：具體用法
min-width：設(shè)置元素的最小寬度：具體用法
max-width：設(shè)置元素的最大寬度：具體用法
height：設(shè)置元素的高度：具體用法
min-height：設(shè)置元素的最小高度：具體用法
max-height：設(shè)置元素的最大高度：具體用法

3、內(nèi)外邊距（margin、padding）

（1）margin

margin：設(shè)置元素周圍的空間，也就是給定元素的四個(gè)（上右下左）方向的外邊距屬性（可使用 margin: 0 auto 水平居中）：具體用法
margin-top：設(shè)置元素的上邊距
margin-right：設(shè)置元素的右邊距
margin-bottom：設(shè)置元素的下邊距
margin-left：設(shè)置元素的左邊距

margin折疊：某些相鄰的margin會(huì)發(fā)生合并：具體用法

（2）padding

padding：設(shè)置元素的內(nèi)邊距（元素邊框與元素內(nèi)容之間的空間）：具體用法
padding-top：設(shè)置元素的頂部內(nèi)邊距
padding-right：設(shè)置元素右邊內(nèi)邊距
padding-bottom：設(shè)置元素底部內(nèi)邊距
padding-left：設(shè)置元素左邊內(nèi)邊距

4、邊框

border：設(shè)置元素的邊框（width style color）：具體用法
border-width：設(shè)置元素邊框的寬度：具體用法  
border-style：設(shè)置元素邊框的樣式：具體用法  
border-color：設(shè)置元素邊框的顏色：具體用法

單獨(dú)設(shè)置元素上邊框  
border-top  
border-top-width  
border-top-style  
border-top-color

單獨(dú)設(shè)置元素的有邊框  
border-right  
border-right-width  
border-right-style  
border-right-color

單獨(dú)設(shè)置元素的下邊框  
border-bottom  
border-bottom-width  
border-bottom-style  
border-bottom-color

單獨(dú)設(shè)置元素的左邊框  
border-left  
border-left-width  
border-left-style  
border-left-color
  
border-radius：設(shè)置邊框（左上、右上、右下、左下）四個(gè)圓角：具體用法   
border-top-left-radius：設(shè)置邊框左上角的圓角  
border-top-right-radius：設(shè)置邊框的右上角的圓角  
border-bottom-right-radius：設(shè)置邊框的右下角的圓角  
border-bottom-left-radius：設(shè)置邊框的左下角的圓角  

box-shadow：設(shè)置陰影（可以設(shè)定多組效果，每組參數(shù)值以逗號(hào)分隔）：具體用法  

border-image：設(shè)置邊框的圖像（屬性：source slice width outset repeat）：具體用法  
border-image-source：設(shè)置邊框的圖像路徑  
border-image-slice：設(shè)置圖標(biāo)邊框向內(nèi)偏移量  
border-image-width：設(shè)置圖像邊框的寬度  
boerder-image-outset：設(shè)置圖像邊框的擴(kuò)展：具體用法  
border-image-repeat：設(shè)置圖像邊框是否平鋪：具體用法

5、布局

display：設(shè)置元素渲染出來的盒類型（如何顯示）：具體用法
float：設(shè)置元素是否及如何浮動(dòng)：具體用法
clear：用來清除浮動(dòng)：具體用法
visibility：設(shè)置元素是否顯示（占的位置依舊存在）：具體用法
overflow：設(shè)置元素處理溢出內(nèi)容的方式：具體用法
overflow-x：設(shè)置元素處理橫向溢出內(nèi)容的方式
overflow-y：設(shè)置元素處理縱向溢出內(nèi)容的方式
overflow-wrap：設(shè)置當(dāng)內(nèi)容溢出時(shí)，是否允許換行（和word-wrap一樣）：具體用法

相關(guān)文章：CSS實(shí)現(xiàn)單行、多行文本溢出顯示省略號(hào)（…）

6、背景、顏色、漸變

（1）背景

background：設(shè)置背景（屬性：color position size repeat origin clip attachment image）（可設(shè)置多個(gè)背景，每組屬性間用逗號(hào)分隔）：具體用法  
background-color：設(shè)置背景色  
background-image：設(shè)置背景路徑（可設(shè)置多個(gè)背景，每組屬性間用逗號(hào)分隔）  
background-repeat：設(shè)置背景是否平鋪及平鋪方式：具體用法  
background-attachment：設(shè)置背景圖像是否固定或者隨著頁面的其余部分滾動(dòng)：具體用法  
background-position：設(shè)置背景圖像的位置：具體用法  
background-origin：設(shè)置背景圖像的定位區(qū)域：具體用法  
background-clip：設(shè)置背景圖像的繪畫區(qū)域：具體用法  
background-size：設(shè)置背景圖像的大?。?a  rel="external nofollow" target="_blank"  target="_blank" style="font-size: 0.93em; white-space: pre-wrap;">具體用法

url()：定義背景路徑

mix-blend-mode：設(shè)置元素與背景如何混合
background-blend-mode：設(shè)置元素的背景或背景色如何混合

更多關(guān)于background，可看這篇文章：CSS3 Background

更多關(guān)于mix-blend-mode和background-blend-mode，可以看這篇文章：瞧瞧CSS3的混合模式

（2）顏色

color：設(shè)置文本顏色  
opacity：設(shè)置元素的不透明度（0~1）

（3）漸變

linear-gradient()：創(chuàng)建線性漸變：具體用法
radial-gradient()：創(chuàng)建徑向漸變：具體用法
repeating-linear-gradient()：創(chuàng)建重復(fù)的線性漸變：具體用法
repeating-radial-gradient()：創(chuàng)建重復(fù)的徑向漸變：具體用法

可看這篇文章：CSS3 Gradient漸變

7、字體、文本、文本裝飾、書寫模式

（1）字體

font：設(shè)置元素的文本特性（style variant weight size lineHeight family）：具體用法
font-style：設(shè)置文本字體樣式：具體用法
font-variant：設(shè)置文本是否為小型的大寫字母：具體用法
font-weight：設(shè)置文本的字體粗細(xì)：具體用法
font-size：設(shè)置文本的字體大?。?a  rel="external nofollow" target="_blank"  target="_blank" style="font-size: 0.93em; white-space: pre-wrap;">具體用法
font-family：設(shè)置文本的字體名稱列表：具體用法
font-stretch：設(shè)置文字是否橫向拉伸變形：具體用法
font-size-adjust：設(shè)置字體大小取決于小寫字母，而不是大寫字母：具體用法

@font-face：設(shè)置自定義字體：具體用法

（2）文本

text-transform：設(shè)置文本的大小寫：具體用法
white-space：設(shè)置元素中的空格的處理方式：具體用法
tab-size：設(shè)置制表符的長度：具體用法
word-break：設(shè)置怎樣在單詞內(nèi)斷行：具體用法
word-wrap/overflow-wrap：兩者等價(jià)，設(shè)置內(nèi)容溢出時(shí)是否斷行：具體用法
text-align：設(shè)置行內(nèi)內(nèi)容相對(duì)它的塊父元素的水平對(duì)齊方式：具體用法
text-align-last：設(shè)置內(nèi)容最后一行的水平對(duì)齊方式：具體用法
text-justify：設(shè)置文本怎樣對(duì)齊及對(duì)齊間距：具體用法
word-spacing：設(shè)置字與字之間的間距：具體用法
letter-spacing：設(shè)置字符間的間距：具體用法
text-indent：設(shè)置文本的縮進(jìn)：具體用法
vertical-align：設(shè)置內(nèi)聯(lián)元素在行框內(nèi)的垂直對(duì)齊方式：具體用法
line-height：設(shè)置文本的行高：具體用法
text-size-adjust：設(shè)移動(dòng)端頁面中元素文本的大小調(diào)整：具體用法

（3）文本裝飾

text-decoration：設(shè)置文本的排版（line style color）：具體用法
text-decoration-line：設(shè)置文本的排版種類：具體用法
text-decoration-color：設(shè)置文本的排版顏色
text-decoration-style：設(shè)置文本的排版樣式：具體用法
text-underline-position：設(shè)置文本的下劃線的位置（支持度不高）
text-shadow：設(shè)置文本的陰影：具體用法

（4）書寫模式

direction：設(shè)置文本流的方向：具體用法
unicode-bidi：用于同一個(gè)頁面里存在從不同方向讀進(jìn)的文本顯示：具體用法
writing-mode：設(shè)置內(nèi)容塊固有的書寫方向：具體用法

8、列表、表格

（1）列表

list-style：設(shè)置列表項(xiàng)目的屬性（type position image）：具體用法
list-style-image：設(shè)置列表項(xiàng)標(biāo)記的圖像：具體用法
list-style-position：設(shè)置列表項(xiàng)標(biāo)記的排列位置：具體用法
list-style-type：設(shè)置列表項(xiàng)標(biāo)記的類型：具體用法

（2）表格

table-layout：設(shè)置表格布局算法：具體用法
border-collapse：設(shè)置表格的邊框是分開還是合并：具體用法
border-spacing：設(shè)置相鄰單元格邊框之間的距離：具體用法
caption-side：設(shè)置表格標(biāo)題的位置：具體用法
empty-cells：設(shè)置當(dāng)表格的單元格內(nèi)無內(nèi)容時(shí)，是否顯示該單元格的邊框：具體用法

9、內(nèi)容

content：用來插入生成內(nèi)容（一般和:before及:after偽元素配合使用）：具體用法
counter-increment：設(shè)置當(dāng)一個(gè)selector發(fā)生時(shí)計(jì)數(shù)器增加的值：具體用法
counter-reset：創(chuàng)建或重置一個(gè)或多個(gè)計(jì)數(shù)器：具體用法
quotes：設(shè)置嵌套引用的引號(hào)類型：具體用法

10、界面樣式

appearance：設(shè)置外觀按照本地默認(rèn)樣式（使用時(shí)要加前綴）：具體用法
text-overflow：設(shè)置當(dāng)文本溢出時(shí)，如何處理：具體用法
outline：設(shè)置元素周圍的輪廓（width style color）：具體用法
outline-width：設(shè)置輪廓的寬度
outline-style：設(shè)置輪廓的樣式：具體用法
outline-color：設(shè)置輪廓的顏色
outline-offset：設(shè)置輪廓在border邊緣外的偏移：具體用法
cursor：設(shè)置鼠標(biāo)懸浮在元素上的外觀：具體用法
zoom：設(shè)置元素的縮放比例：具體用法
box-sizing：設(shè)置元素的盒模型組成模式：具體用法
resize：設(shè)置元素是否允許用戶縮放：具體用法
user-select：設(shè)置是否允許用戶選中文本：具體用法
pointer-events：設(shè)置在何時(shí)成為鼠標(biāo)事件的target：具體用法

//下面的兼容性不高，后續(xù)添加
ime-mode
nav-index  
nav-up  
nav-right  
nav-down  
nav-left

11、多列

columns：設(shè)置列寬和列數(shù)（width count）：具體用法
column-width：設(shè)置列寬
column-count：設(shè)置列數(shù)
column-gap：設(shè)置列與列之間的間距：具體用法
column-rule：設(shè)置列與列之間的邊框（width style color）：具體用法
column-rule-width：設(shè)置列與列之間的邊框?qū)挾?/p>
column-rule-style：設(shè)置列與列之間的邊框樣式：具體用法
column-rule-color：設(shè)置列與列之間的邊框顏色
column-span：設(shè)置元素是否橫跨所有列：具體用法
column-fill：設(shè)置所有列的高度是否統(tǒng)一（以最高為主）：具體用法
column-break-before：設(shè)置元素之前是否斷行：具體用法
column-break-after：設(shè)置元素之后是否斷行：具體用法
column-break-inside：設(shè)置元素內(nèi)部是否斷行：具體用法

12、伸縮盒（新、舊）

（1）伸縮盒（舊）

box-orient：設(shè)置伸縮盒元素的子元素的排列方式：具體用法
box-pack：設(shè)置伸縮盒元素的子元素的對(duì)齊方式：具體用法
box-align：設(shè)置伸縮盒元素的子元素的對(duì)齊方式：具體用法
box-flex：設(shè)置伸縮盒元素的子元素如何分配剩余空間：具體用法
box-flex-group：設(shè)置伸縮盒元素的子元素的所屬組：具體用法
box-ordinal-group：設(shè)置伸縮盒元素的子元素的顯示順序：具體用法
box-direction：設(shè)置伸縮盒元素的子元素的排列順序是否反轉(zhuǎn)：具體用法
box-lines：設(shè)置伸縮盒元素的子元素是否可以換行顯示：具體用法

（2）伸縮盒（新）

flex：設(shè)置彈性盒元素的子元素如何分配空間（grow shrink basis）：具體用法
flex-grow：設(shè)置彈性盒的擴(kuò)展比率：具體用法
flex-shrink：設(shè)置彈性盒的收縮比率：具體用法
flex-basis：設(shè)置彈性盒伸縮基準(zhǔn)值：具體用法
flex-flow：設(shè)置彈性盒元素的子元素排列方式（direction wrap）：具體用法
flex-direction：設(shè)置內(nèi)部元素如何在彈性盒內(nèi)布局，定義了主軸的方向：具體用法
flex-wrap：設(shè)置彈性盒內(nèi)的子元素是單行或多行，同時(shí)橫軸的方向決定了新行堆疊方向：具體用法 
align-items：設(shè)置子元素在彈性盒的當(dāng)前行的側(cè)軸（縱軸）方向上的對(duì)齊方式：具體用法
justify-content：設(shè)置彈性盒子元素在主軸（橫軸）方向上的對(duì)齊方式：具體用法
align-content：設(shè)置彈性盒在側(cè)軸方向上右額外空間時(shí)，如何排列每一行：具體用法
align-self：設(shè)置子元素在側(cè)軸（縱軸）方向上的對(duì)齊方式：具體用法
order：設(shè)置彈性盒元素的子元素出現(xiàn)的順序，可為負(fù)數(shù)：具體用法

相關(guān)文章：Flex布局

13、轉(zhuǎn)換、過渡、動(dòng)畫

（1）轉(zhuǎn)換

transform：設(shè)置元素的2D或3D轉(zhuǎn)換：具體用法
transform-origin：設(shè)置元素進(jìn)行轉(zhuǎn)換的位置：具體用法
transform-style：設(shè)置嵌套元素是怎樣在三維空間中呈現(xiàn)：具體用法
perspective：設(shè)置透視效果：具體用法
perspective-origin：設(shè)置透視點(diǎn)的位置：具體用法
backface-visibility：設(shè)置元素背面面向用戶時(shí)是否可見：具體用法

相關(guān)文章：CSS3 Transform 2D和3D轉(zhuǎn)換

（2）過渡

transition：設(shè)置元素變換時(shí)的過渡（property duration timing-function delay）：具體用法
transition-property：設(shè)置元素中的過渡屬性：具體用法
transition-duration：設(shè)置元素的過渡持續(xù)時(shí)間：具體用法
transition-timing-function：設(shè)置元素的過渡動(dòng)畫類型：具體用法
transition-delay：設(shè)置元素延遲過渡的時(shí)間：具體用法

相關(guān)文章：CSS3 Transition

（3）動(dòng)畫

animation：設(shè)置元素所應(yīng)用的動(dòng)畫特效（keyframes）：具體用法
animation-name：設(shè)置元素所應(yīng)用的動(dòng)畫名稱：具體用法
animation-duration：設(shè)置元素動(dòng)畫的持續(xù)時(shí)間：具體用法
animation-timing-function：設(shè)置元素動(dòng)畫的過渡類型：具體用法
animation-delay：設(shè)置元素動(dòng)畫的延遲時(shí)間：具體用法
animation-iteration-count：設(shè)置元素動(dòng)畫的循環(huán)次數(shù)：具體用法
animation-direction：設(shè)置元素動(dòng)畫在循環(huán)中是否反向運(yùn)動(dòng)：具體用法
animation-play-state：設(shè)置元素動(dòng)畫的狀態(tài)：具體用法
animation-fill-mode：設(shè)置當(dāng)動(dòng)畫不播放時(shí)，要應(yīng)用到元素的樣式：具體用法

cubic-bezier()：設(shè)置貝塞爾曲線，生成速度曲線（一般和animation使用）

相關(guān)文章：CSS3 Animation動(dòng)畫

CSS3的貝塞爾曲線（cubic-bezier）

14、裁剪（clip、clip-path）、遮罩（mask）

（1）裁剪

clip：設(shè)置元素的可視區(qū)域，區(qū)域外的部分是透明的：具體用法
clip-path：設(shè)置元素的可視區(qū)域。

相關(guān)文章：clip 和 clip-path

（2）遮罩

//熟悉了解中

15、單位（長度、角度、時(shí)間、頻率、分辨率）

（1）長度

em：相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸
ex：相對(duì)于字符“x”的高度，通常為字體高度的一半
ch：數(shù)字“0”的寬度
rem：相對(duì)于根元素（html元素）font-size計(jì)算值的倍數(shù)

vw：相對(duì)于視口的寬度，視口寬度的 1/100。
vh：相對(duì)于視口的高度，視口高度的1/100
vmax：相對(duì)于視口的寬度或高度，取寬度與高度之間的最大值。
vmin：相對(duì)于視口的寬度或高度，取寬度與高度之間的最小值。

cm：里面
mm：毫米
q：1/4毫米
in：英寸
pt：點(diǎn)
pc：派卡
px：像素
具體用法

（2）角度值

deg：度
grad：梯度
rad：弧度
turn：轉(zhuǎn)、圈

（3）時(shí)間值

s：秒
ms：毫秒

（4）頻率值

Hz：赫茲
kHz：千赫茲

（5）分辨率

dpi：每英寸包含點(diǎn)的數(shù)量
dpcm：每厘米包含點(diǎn)的數(shù)量
dppx：每像素包含點(diǎn)的數(shù)量

（6）顏色值

color name：顏色名稱
HEX：十六進(jìn)制記法
RGB：rgb記法
RGBA：rgba記法
HSL：hsl記法
HSLA：hsla記法
transparent：全透明
currentColor：當(dāng)前顏色

16、函數(shù)

calc()：用于動(dòng)態(tài)計(jì)算長度值（+、-、*、/）：具體用法
attr()：返回屬性值：具體用法

image()：設(shè)置圖像：具體用法
image-set()：設(shè)置根據(jù)用戶設(shè)備的分辨率匹配合適的圖像：具體用法

17、媒體查詢

width：定義輸出設(shè)備中的頁面可見區(qū)域?qū)挾龋?a  rel="external nofollow" target="_blank"  target="_blank" style="font-size: 0.93em; white-space: pre-wrap;">具體用法
height：定義輸出設(shè)備中的頁面可見區(qū)域高度：具體用法
device-width：定義輸出設(shè)備的屏幕可見寬度：具體用法
device-height：定義輸出設(shè)備的屏幕可見高度：具體用法
orientation：定義輸出設(shè)備中的頁面可見區(qū)域高度是否大于或等于寬度：具體用法
aspect-ratio：定義輸出設(shè)備中的頁面可見區(qū)域?qū)挾扰c高度的比率：具體用法
device-aspect-ratio：定義輸出設(shè)備的屏幕可見寬度與高度的比率：具體用法
color：定義輸出設(shè)備每一組彩色原件的個(gè)數(shù)。如果不是彩色設(shè)備，則值等于0：具體用法
color-index：定義在輸出設(shè)備的彩色查詢表中的條目數(shù)。如果沒有使用彩色查詢表，則值等于0：具體用法
monochrome：定義在一個(gè)單色框架緩沖區(qū)中每像素包含的單色原件個(gè)數(shù)。如果不是單色設(shè)備，則值等于0：具體用法
resolution：定義設(shè)備的分辨率：具體用法
scan：定義電視類設(shè)備的掃描工序：具體用法
grid：用來查詢輸出設(shè)備是否使用柵格或點(diǎn)陣：具體用法

相關(guān)文章：媒體查詢（Media Queries）

18、私有屬性（IE、Firefox、Webkit）

（1）IE

scrollbar-3dlight-color
scrollbar-darkshadow-color
scrollbar-highlight-color
scrollbar-shadow-color
scrollbar-arrow-color
scrollbar-face-color
scrollbar-track-color
scrollbar-base-color
filter
behavior

（2）Firefox

borer-colors
border-top-colors
border-right-colors
border-bottom-colors
border-left-colors

element()

（3）Webkit

text-fill-color
text-stroke
text-stroke-width
text-stroke-color
box-reflect
tap-highlight-color
user-darg

19、其他

will-change：允許開發(fā)者提前告知瀏覽器要對(duì)元素做什么動(dòng)畫，這樣瀏覽器可以提前準(zhǔn)備合適的優(yōu)化設(shè)置：具體用法
touch-action：設(shè)置某個(gè)給定的區(qū)域是否允許用戶操作，以及如何響應(yīng)用戶操作：具體用法
box-reflect：設(shè)置元素的倒影
filter：設(shè)置濾鏡：具體用法

initial：如果你想重置某個(gè)屬性為UA默認(rèn)設(shè)置，那么就可以使用該值
inherit：繼承父元素的屬性
unset：一個(gè)屬性定義了unset值，如果該屬性是默認(rèn)繼承屬性，該值等同于inherit，如果該屬性是非繼承屬性，該值等同于initial

相關(guān)文章：用CSS3來制作倒影（box-reflect）

CSS3 濾鏡

如有錯(cuò)誤，歡迎指正！

參考資料：

CSS參考手冊(cè)

MDN CSS參考