CSS3學習手冊
什麼是CSS3？
CSS3是CSS2的更新版本，3隻是版本号，它在CSS2.1的基礎上增加了很多強大的新功能。
目前主流浏覽器chrome、safari、firefox、opera、甚至360都已經支援了CSS3大部分功能了，IE10以後也開始全面支援CSS3了。
在編寫CSS3樣式時，不同的浏覽器可能需要不同的字首。它表示該CSS屬性或規則尚未成為W3C标準的一部分，是浏覽器的私有屬性，雖然目前較新版本的浏覽器都是不需要字首的，但為了更好的向前相容字首還是少不了的。
| 字首 | 浏覽器 |
| -webkit | chrome和safari |
| -moz | firefox |
| -ms | IE |
| -o | opera |
邊框
圓角效果 border-radius
文法：
border-radius: 5px 4px 3px 2px; (四個半徑值分别是左上角、右上角、右下角和左下角，順時針)
陰影 box-shadow
box-shadow: X軸偏移量 Y軸偏移量 [陰影模糊半徑] [陰影擴充半徑] [陰影顔色] [投影方式];
投影方式：insert(内投影)，預設為外投影
例：box-shadow:4px 2px 6px #333333 inset;
為邊框應用圖檔 border-image
文法：
background:url(xx.jpg) 10px 20px 30px 40px repeat(round/stretch/no-repeat); 顔色之RGBA
color：rgba(R,G,B,A) A表示透明度，取值在0-1之間
background-color:rgba(100,120,60,0.5);
漸變色彩 Gradient
分為線性漸變(linear)和徑向漸變(radial)。 linear-gradient(to bottom,#fff,#999); (#fff #999表示顔色的起終點，可以有多個) 第一個參數是漸變方向：
| 參數名稱 | 意義 |
| to top | 下往上 |
| to right | 左往右 |
| to bottom | 上往下 |
| to top left | 右下到左上 |
| 類推 |
文本
text-overflow 與 word-wrap
text-overflow用來設定是否使用一個省略标記（...）标示對象内文本的溢出。
文法：
text-overflow:clip(剪切)/ellipsis(顯示省略标記) 但是text-overflow隻是用來說明文字溢出時用什麼方式顯示，要實作溢出時産生省略号的效果,還須定義強制文本在一行内顯示（white-space:nowrap）及溢出内容為隐藏（overflow:hidden）
word-wrap也可以用來設定文本行為，目前行超過指定容器的邊界時是否斷開轉行
文法：word-wrap:normal(表示連續文本換行)/break-word(表示内容将在邊界内換行)；
normal為浏覽器預設值，break-word設定在長單詞或 URL位址内部進行換行，此屬性不常用，用浏覽器預設值即可
嵌入字型@font-face
@font-face能夠加載伺服器端的字型檔案，讓浏覽器端可以顯示使用者電腦裡沒有安裝的字型。
文法：
@font-face{
font-family:字型名稱
src: 字型檔案在伺服器上的相對或絕對路徑；
} 這樣設定之後即可像普通字型一樣使用該字型。
文本陰影 text-shadow
text-shadow: X-Offset Y-Offset blur color; X-Offset：表示陰影的水準偏移距離，其值為正值時陰影向右偏移，反之向左偏移；
Y-Offset：是指陰影的垂直偏移距離，如果其值是正值時，陰影向下偏移，反之向上偏移；
Blur：是指陰影的模糊程度，其值不能是負值，如果值越大，陰影越模糊，反之陰影越清晰，如果不需要陰影模糊可以将Blur值設定為0；
Color：是指陰影的顔色，其可以使用rgba色。
背景相關
background-origin
文法：
background-origin:border-box | padding-box | content-box; 參數分别表示背景圖檔是從邊框，還是内邊距（預設值），或者是内容區域開始顯示
background-clip
文法：
background-clip: border-box | padding-box| content-box; | no-clip; 參數分别表示從邊框、或内填充，或者内容區域向外裁剪背景。 no-clip表示不裁切，和參數border-box顯示同樣的效果。backgroud-clip預設值為border-box。
背景圖檔的大小 background-size
文法：
background-size: auto | <長度值> | <百分比>| cover | contain 1、auto：預設值，不改變背景圖檔的原始高度和寬度；
2、 <長度值> ：成對出現如200px 50px，将背景圖檔寬高依次設定為前面兩個值，當設定一個值時，将其作為圖檔寬度值來等比縮放； 3、 <百分比> :0％~100％之間的任何值，将背景圖檔寬高依次設定為所在元素寬高乘以前面百分比得出的數值，當設定一個值時同上；
4、cover：顧名思義為覆寫，即将背景圖檔等比縮放以填滿整個容器；
5、contain：容納，即将背景圖檔等比縮放至某一邊緊貼容器邊緣為止。
多重背景
多重背景，也就是CSS2裡background的屬性外加origin、clip和size組成的新background的多次疊加，縮寫時為用逗号隔開的每組值；用分解寫法時，如果有多個背景圖檔，而其他屬性隻有一個（例如background-repeat隻有一個），表明所有背景圖檔應用該屬性值。
文法縮寫如下：
background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],... 用逗号隔開每組 background 的縮寫值；
如果有 size 值，需要緊跟 position 并且用 "/" 隔開；
如果有多個背景圖檔，而其他屬性隻有一個（例如 background-repeat 隻有一個），表明所有背景圖檔應用該屬性值。 background-color 隻能設定一個
各種各樣的 選擇器
屬性選擇器
結構性僞類選擇器 :root
:root選擇器，根選擇器，比對元素E所在文檔的根元素。在HTML文檔中，根元素始終是 。“:root”選擇器等同于 元素
結構性僞類選擇器 :not
:not選擇器稱為否定選擇器，和jQuery中的:not選擇器一模一樣，可以選擇除某個元素之外的所有元素。就拿form元素來說
結構性僞類選擇器 :empty
:empty用來選擇沒有任何内容的元素，這裡沒有内容指的是一點内容都沒有，哪怕是一個空格
結構性僞類選擇器 :target
:target選擇器稱為目标選擇器，用來比對文檔(頁面)的url的某個标志符的目标元素。（url中通常會包含#） 如：#abc:target{} 表示比對id="abc"的元素，
結構性僞類選擇器 :first-child :last-child :nth-child(n) :nth-last-child(n)
1.:first-child 選擇器表示的是選擇父元素的第一個子元素的元素E。簡單點了解就是選擇元素中的第一個子元素，是子元素，而不是後代元素。
2.:last-child 選擇器選擇的是元素的最後一個子元素。
3.:nth-child(n)”選擇器用來定位某個父元素的一個或多個特定的子元素。其中“n”是其參數，而且可以是整數值(1,2,3,4)，也可以是表達式(2n+1、-n+5)和關鍵詞(odd、even)，但參數n的起始值始終是1，而不是0。也就是說，參數n的值為0時，選擇器将選擇不到任何比對的元素；
當“:nth-child(n)”選擇器中的n為一個表達式時，其中n是從0開始計算，當表達式的值為0或小于0的時候，不選擇任何比對的元素
如：
ol > li:nth-child(2n){
background: orange;
} 表示将無序清單中偶數行背景色變為橙色
4.:nth-last-child(n) 選擇器和前面的“:nth-child(n)”選擇器非常的相似，隻是這裡多了一個“last”，表示從某父元素的最後一個子元素開始計算，來選擇特定的元素
結構性選擇器:first-of-type :last-of-type :nth-of-type(n) :nth-last-of-type
:first-of-type 選擇器類似于:first-child 選擇器，不同之處就是指定了元素的類型,其主要用來定位一個父元素下的某個類型的第一個子元素。如：
div>img:first-of-type{} 表示選擇div下的第一個類型為img的元素
選擇器 :only-child :only-of-type
:only-child 選擇器選擇的是父元素中隻有一個子元素，而且隻有唯一的一個子元素。也就是說，比對的元素的父元素中僅有一個子元素，而且是一個唯一的子元素。 如：
ol:only-child{} 表示選擇隻有一個清單項的清單的清單項
:only-of-type 選擇擁有很多類型子元素中類型唯一的子元素
選擇器 :enabled :disabled
在Web的表單中，有些表單元素有可用（“:enabled”）和不可用（“:disabled”）狀态，比如輸入框，密碼框，複選框等。在預設情況之下，這些表單元素都處在可用狀态。那麼我們可以通過僞選擇器“:enabled”對這些表單元素設定樣式。
選擇器 :checked
選擇狀态為checked的标簽
選擇器 ::selection
::selection”僞元素是用來比對突出顯示的文本(用滑鼠選擇文本時的文本)。浏覽器預設情況下，用滑鼠選擇網頁文本是以“深藍的背景，白色的字型”顯示的
選擇器 :read-only :read-write
:read-only 僞類選擇器用來指定處于隻讀狀态元素的樣式。簡單點了解就是，元素中設定了“readonly=’readonly’”
:read-write 選擇器剛好與“:read-only”選擇器相反，主要用來指定當元素處于非隻讀狀态時的樣式。
::before ::after
::before和::after這兩個主要用來給元素的前面或後面插入内容，這兩個常和"content"配合使用，使用的場景最多的就是清除浮動。
變形與動畫
變形--旋轉 rotate()
旋轉rotate()函數通過指定的角度參數使元素相對原點進行旋轉。它主要在二維空間内進行操作，設定一個角度值，用來指定旋轉的幅度。如果這個值為正值，元素相對原點中心順時針旋轉；如果這個值為負值，元素相對原點中心逆時針旋轉。
變形--扭曲 skew()
扭曲skew()函數能夠讓元素傾斜顯示。它可以将一個對象以其中心位置圍繞着X軸和Y軸按照一定的角度傾斜。這與rotate()函數的旋轉不同，rotate()函數隻是旋轉，而不會改變元素的形狀。skew()函數不會旋轉，而隻會改變元素的形狀。
Skew()具有三種情況：
1、skew(x,y)使元素在水準和垂直方向同時扭曲（X軸和Y軸同時按一定的角度值進行扭曲變形）;第一個參數對應X軸，第二個參數對應Y軸。如果第二個參數未提供，則值為0，也就是Y軸方向上無斜切。如：
skew(45deg) 2、skewX(x)僅使元素在水準方向扭曲變形（X軸扭曲變形）;
3、skewY(y)僅使元素在垂直方向扭曲變形（Y軸扭曲變形）。
變形--縮放 scale()
1、 scale(X,Y)使元素水準方向和垂直方向同時縮放（也就是X軸和Y軸同時縮放）;注意：Y是一個可選參數，如果沒有設定Y值，則表示X，Y兩個方向的縮放倍數是一樣的。
2、scaleX(x)元素僅水準方向縮放（X軸縮放）
3、scaleY(y)元素僅垂直方向縮放（Y軸縮放）
變形--位移 translate()
translate()函數可以将元素向指定的方向移動，類似于position中的relative。或以簡單的了解為，使用translate()函數，可以把元素從原來的位置移動，而不影響在X、Y軸上的任何Web元件。
1、translate(x,y)水準方向和垂直方向同時移動（也就是X軸和Y軸同時移動）
2、translateX(x)僅水準方向移動（X軸移動）
3、translateY(y)僅垂直方向移動（Y軸移動）
變形--矩陣 matrix()
matrix() 是一個含六個值的(a,b,c,d,e,f)變換矩陣，用來指定一個2D變換，相當于直接應用一個[a b c d e f]變換矩陣。就是基于水準方向（X軸）和垂直方向（Y軸）重新定位元素,此屬性值使用涉及到數學中的矩陣
變形--原點 transform-origin
任何一個元素都有一個中心點，預設情況之下，其中心點是居于元素X軸和Y軸的50%處,在沒有重置transform-origin改變元素原點位置的情況下，CSS變形進行的旋轉、位移、縮放，扭曲等操作都是以元素自己中心位置進行變形。但很多時候，我們可以通過transform-origin來對元素進行原點位置改變，使元素原點不在元素的中心位置，以達到需要的原點位置
transform-origin取值和元素設定背景中的background-position取值類似，如下表所示：
動畫--過渡屬性 transition-property
通過滑鼠的單擊、獲得焦點，被點選或對元素任何改變中觸發，并平滑地以動畫效果改變CSS的屬性值。
- CSS3的過度transition屬性是一個複合屬性，主要包括以下幾個子屬性：
- transition-property:指定過渡或動态模拟的CSS屬性
- transition-duration:指定完成過渡所需的時間
- transition-timing-function:指定過渡函數
- transition-delay:指定開始出現的延遲時間
transition-property屬性:
transition-timing-function屬性指的是過渡的“緩動函數”。主要用來指定浏覽器的過渡速度，以及過渡期間的操作進展情況，其中要包括以下幾種函數：
有時我們想改變兩個或者多個css屬性的transition效果時，隻要把幾個transition的聲明串在一起，用逗号（“，”）隔開，然後各自可以有各自不同的延續時間和其時間的速率變換方式。但需要值得注意的一點：第一個時間的值為 transition-duration，第二個為transition-delay。
例如：a{ transition: background 0.8s ease-in 0.3,color 0.6s ease-out 0.3;}