css3重要語法彙總

線性漸變

linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet)
linear-gradient(指定漸變方向, 顏色的起點，顏色的結束)

文本溢出於省略標記

text-overflow:ellipsis; （溢出文本顯示省略號）
overflow:hidden; （溢出內容爲隱藏）
white-space:nowrap; （強制文本在一行內顯示）

文字與字體之嵌入字體

@font-face {

font-family : 字體名稱;
src : 字體文件在服務器上的相對或絕對路徑;

}

文字與字體之文本陰影

text-shadow: 水平偏移距離 垂直偏移距離 模糊程度 顏色

背景圖片裁剪
background-clip ： border-box | padding-box | content-box | no-clip
background-clip ： 邊框 | 內填充 | 內容 | 不裁剪

屬性選擇器通配符

a[屬性^="value"] 以value開頭
a[屬性$="value"] 以value結尾
a[屬性*="value"] 任意位置

結構性僞類選擇器

子選擇器 例如#a>p 選擇#a的全部子類(直接子類)

• 相鄰選擇器 選擇緊接在另外一個元素後的元素，有相同的父元素。只選擇第一個相鄰的匹配元素

~ 匹配選擇器 例如#b~p匹配全部在#b元素以後的全部p元素
:root 選擇當前匹配元素根元素 :root === html
:not 選擇除某個元素以外的全部元素 input:not([屬性="value"])
:empty 用來選擇沒有任何內容的元素
:first-child 選擇父元素的第一個子元素
:last-child 選擇父元素的最後一個子元素
:nth-child(n) 定位某個父元素的一個或多個特定的子元素 ,其中「n」是其參數，並且能夠是整數值(1,2,3,4)，也能夠是表達式(2n+一、-n+5)
:nth-last-child(n) 從某父元素的最後一個子元素開始計算，來選擇特定的元素。
:first-of-type 定位一個父元素下的某個類型的第一個子元素
:nth-of-type(n) 定位於父元素中某種類型的子元素
:last-of-type 選擇是父元素下的某個類型的最後一個子元素
:enabled 對可用狀態表單元素設置樣式
:disabled 對不可用狀態表單元素設置樣式
:checked 對選中狀態元素設置樣式
::selection 突出顯示的文本
:read-only 指定處於只讀狀態元素的樣式 元素中設置了「readonly=’readonly’」
:read-write 指定當元素處於非只讀狀態時的樣式。
::before和::after 用來給元素的前面或後面插入內容

CSS3變形

旋轉rote()
扭曲 skew()
縮放 scale()
位移 translate()

css3動畫過渡屬性

transition-property:指定過渡或動態模擬的CSS屬性
transition-duration:指定完成過渡所需的時間
transition-timing-function:指定過渡函數
transition-delay:指定開始出現的延遲時間
transition ：簡寫屬性設置四個過渡屬性
transition(transition-property,transition-duration,transition-timing-function,transition-delay)
transition(css屬性，過渡時間，過渡函數，延遲時間)
transition(all 0 ease 0)默認

css3動畫

Keyframes：關鍵幀 @keyframes 動畫名稱{…}
animation-name：動畫名稱
animation-duration: 動畫時間
animation-timing-function：動畫播放方式
animation-delay：定義動畫開始播放時間
animation-iteration-count：設置動畫播放次數
animation-direction：動畫播放方向
animation-play-state：播放狀態
animation-fill-mode：定義在動畫開始以前和結束以後發生的操做

css3多列

column-count：指定了須要分割的列數。
column-gap 屬性指定了列與列間的間隙。
column-rule-style 屬性指定了列與列間的邊框樣式：
column-rule-width 屬性指定了兩列的邊框厚度:
column-rule-color 屬性指定了兩列的邊框顏色：
column-rule 屬性是 column-rule-* 全部屬性的簡寫。
column-width 屬性指定了列的寬度。

css3多媒體查詢

@media not|only mediatype and (expressions) {

CSS 代碼...;

}
@media 除那些設備|特定的媒體類型 and (expressions) {

CSS 代碼...;

}