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;}

CSS3學習手冊

CSS3學習手冊

什麼是CSS3？

邊框

圓角效果 border-radius

陰影 box-shadow

爲邊框應用圖片 border-image

顏色之RGBA

漸變色彩 Gradient

文本

text-overflow 與 word-wrap

嵌入字體@font-face

文本陰影 text-shadow

背景相關

background-origin

background-clip

背景圖片的大小 background-size

多重背景

各種各樣的 選擇器

屬性選擇器

結構性僞類選擇器 :root

結構性僞類選擇器 :not

結構性僞類選擇器 :empty

結構性僞類選擇器 :target

結構性僞類選擇器 :first-child :last-child :nth-child(n) :nth-last-child(n)

結構性選擇器:first-of-type :last-of-type :nth-of-type(n) :nth-last-of-type

選擇器 :only-child :only-of-type

選擇器 :enabled :disabled

選擇器 :checked

選擇器 ::selection

選擇器 :read-only :read-write

::before ::after

變形與動畫

變形--旋轉 rotate()

變形--扭曲 skew()

變形--縮放 scale()

變形--位移 translate()

變形--矩陣 matrix()

變形--原點 transform-origin

動畫--過渡屬性 transition-property

各種各樣的選擇器