CSS3知識點1

1.前綴
在編寫CSS3樣式時，不同的瀏覽器可能需要不同的前綴。它表示該CSS屬性或規則尚未成爲W3C標準的一部分，是瀏覽器的私有屬性，雖然目前較新版本的瀏覽器都是不需要前綴的，但爲了更好的向前兼容前綴還是少不了的。
前綴 :瀏覽器
-webkit :chrome和safari
-moz: firefox
-ms :IE
-o :opera

2.邊框
（1）圓角效果border-radius
border-radius:10px;(所有角半徑都爲10px）/ 左上角 右上角 右下角 左下角；（px,百分比，em).
實心上半圓：
方法：把高度(height)設爲寬度（width）的一半，並且只設置左上角和右上角的半徑與元素的高度一致（大於也是可以的）。
實心圓：
方法：把寬度（width）與高度(height)值設置爲一致（也就是正方形），並且四個圓角值都設置爲它們值的一半.
border-radius:100px/10px; //水平方向的半徑是100px,垂直方向10px.
（2）陰影box-shadow
box-shadow是向盒子添加陰影。支持添加一個或者多個。
box-shadow: X軸偏移量 Y軸偏移量 [陰影模糊半徑] [陰影擴展半徑] [陰影顏色] [投影方式];

注意：inset 可以寫在參數的第一個或最後一個，其它位置是無效的。
x正y正：右下陰影，x負y負：左上，x負y正：左下，x正y負：右上。
陰影模糊半徑：此參數可選，其值只能是爲正值，如果其值爲0時，表示陰影不具有模糊效果，其值越大陰影的邊緣就越模糊；
陰影擴展半徑：此參數可選，其值可以是正負值，如果值爲正，則整個陰影都延展擴大，反之值爲負值時，則縮小；

（3）邊框應用圖片border-image

repeat就是一直重複，然後超出部分剪裁掉，而且是居中開始重複。Round可以理解爲圓滿的鋪滿。爲了實現圓滿所以會壓縮（或拉伸）；Stretch 很好理解就是拉伸，有多長拉多長.

3.顏色
（1）RGB是一種色彩標準，是由紅(R)、綠(G)、藍(B)的變化以及相互疊加來得到各式各樣的顏色。RGBA是在RGB的基礎上增加了控制alpha透明度的參數。
語法：
color：rgba(R,G,B,A)
以上R、G、B三個參數，正整數值的取值範圍爲：0 - 255。百分數值的取值範圍爲：0.0% - 100.0%。超出範圍的數值將被截至其最接近的取值極限。並非所有瀏覽器都支持使用百分數值。A爲透明度參數，取值在0~1之間，不可爲負值。

（2）漸變顏色
線性漸變：

4.文字與字體
（1）文本溢出
text-overflow用來設置是否使用一個省略標記（…）標示對象內文本的溢出。
語法：

但是text-overflow只是用來說明文字溢出時用什麼方式顯示，要實現溢出時產生省略號的效果，還須定義強制文本在一行內顯示（white-space:nowrap）及溢出內容爲隱藏（overflow:hidden），只有這樣才能實現溢出文本顯示省略號的效果，代碼如下：

text-overflow:ellipsis; 
overflow:hidden; 
white-space:nowrap; 

同時，word-wrap也可以用來設置文本行爲，當前行超過指定容器的邊界時是否斷開轉行。
語法：

normal爲瀏覽器默認值，break-word設置在長單詞或 URL地址內部進行換行，此屬性不常用，用瀏覽器默認值即可。
（2）嵌入字體@font-face
@font-face能夠加載服務器端的字體文件，讓瀏覽器端可以顯示用戶電腦裏沒有安裝的字體。

@font-face {
font-family : 字體名稱;
src : 字體文件在服務器上的相對或絕對路徑;
}
置之後，就可以像使用普通字體一樣在（font-*）中設置字體樣式。
p {
font-size :12px;
font-family : “My Font”;
/必須項，設置@font-face中font-family同樣的值/
}
(3)文本陰影text-shadow
text-shadow可以用來設置文本的陰影效果。
語法：
text-shadow: X-Offset Y-Offset blur color;
X-Offset：表示陰影的水平偏移距離，其值爲正值時陰影向右偏移，反之向左偏移；
Y-Offset：是指陰影的垂直偏移距離，如果其值是正值時，陰影向下偏移，反之向上偏移；
Blur：是指陰影的模糊程度，其值不能是負值，如果值越大，陰影越模糊，反之陰影越清晰，如果不需要陰影模糊可以將Blur值設置爲0；
Color：是指陰影的顏色，其可以使用rgba色。

5.背景
（1）元素背景圖片的原始起始位置background-origin
background-origin ： border-box | padding-box | content-box;
參數分別表示背景圖片是從邊框，還是內邊距（默認值），或者是內容區域開始顯示。
需要注意的是，如果背景不是no-repeat，這個屬性無效，它會從邊框開始顯示。

(2)裁剪背景圖background-clip
用來將背景圖片做適當的裁剪以適應實際需要。
語法：
background-clip ： border-box | padding-box | content-box | no-clip
參數分別表示從邊框、或內填充，或者內容區域向外裁剪背景。no-clip表示不裁切，和參數border-box顯示同樣的效果。backgroud-clip默認值爲border-box。

(3)背景圖大小background-size
設置背景圖片的大小，以長度值或百分比顯示，還可以通過cover和contain來對圖片進行伸縮。
語法：
background-size: auto | <長度值> | <百分比> | cover | contain
取值說明：
1、auto：默認值，不改變背景圖片的原始高度和寬度；
2、<長度值>：成對出現如200px 50px，將背景圖片寬高依次設置爲前面兩個值，當設置一個值時，將其作爲圖片寬度值來等比縮放；
3、<百分比>：0％~100％之間的任何值，將背景圖片寬高依次設置爲所在元素寬高乘以前面百分比得出的數值，當設置一個值時同上；
4、cover：顧名思義爲覆蓋，即將背景圖片等比縮放以填滿整個容器；
5、contain：容納，即將背景圖片等比縮放至某一邊緊貼容器邊緣爲止。
(4)多重背景multiple backgrounds
語法縮寫如下：
background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],…
可以把上面的縮寫拆解成以下形式：
background-image:url1,url2,…,urlN;
background-repeat : repeat1,repeat2,…,repeatN;
backround-position : position1,position2,…,positionN;
background-size : size1,size2,…,sizeN;
background-attachment : attachment1,attachment2,…,attachmentN;
background-clip : clip1,clip2,…,clipN;
background-origin : origin1,origin2,…,originN;
background-color : color;
注意：
1. 用逗號隔開每組 background 的縮寫值；
2. 如果有 size 值，需要緊跟 position 並且用 “/” 隔開；
3. 如果有多個背景圖片，而其他屬性只有一個（例如 background-repeat 只有一個），表明所有背景圖片應用該屬性值。
4. background-color 只能設置一個。

6.選擇器
（1）屬性選擇器

（2）結構性僞類選擇器
1>root
:root選擇器，從字面上我們就可以很清楚的理解是根選擇器，他的意思就是匹配元素E所在文檔的根元素。在HTML文檔中，根元素始終是。
“:root”選擇器等同於元素，簡單點說：
:root{background:orange}
html {background:orange;}
得到的效果等同。
2>not
:not選擇器稱爲否定選擇器，和jQuery中的:not選擇器一模一樣，可以選擇除某個元素之外的所有元素。
3>empty
:empty選擇器表示的就是空。用來選擇沒有任何內容的元素，這裏沒有內容指的是一點內容都沒有，哪怕是一個空格。
4>target
:target選擇器稱爲目標選擇器，用來匹配文檔(頁面)的url的某個標誌符的目標元素。
多個url（多個target）處理：
當同一個頁面上有很多的url的時候你可以取不同的名字，只要#號後對的名稱與id=”“中的名稱對應就可以了。

#brand:target {
  background: orange;
  color: #fff;
}
#jake:target {
  background: blue;
  color: #fff;
}

5>first-child
“:first-child”選擇器表示的是選擇父元素的第一個子元素的元素E。簡單點理解就是選擇元素中的第一個子元素，記住是子元素，而不是後代元素。

ol > li:first-child{
  color: red;
}

Last-child:最後一個子元素。
6>nth-child(n)
“: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的時候，不選擇任何匹配的元素。如下表所示：

nth-last-child(n):從父元素的最後一個子元素開始計算。
7>first-of-type
定位一個父元素下的某個類型的第一個子元素
/我要改變第一個段落的背景爲橙色/
.wrapper > p:first-of-type {
background: orange;
}
nth-of-type(n):定位一個父元素下的某個類型的特定子元素
last-of-type(n):定位一個父元素下的某個類型的最後一個子元素
nth-last-of-type(n):定位一個父元素下的某個類型的特定子元素,從最後一個元素開始計算。
8>only-child
:only-child”選擇器選擇的是父元素中只有一個子元素，而且只有唯一的一個子元素。也就是說，匹配的元素的父元素中僅有一個子元素，而且是一個唯一的子元素。
9>only-of-type
表示一個元素他有很多個子元素，而其中只有一種類型的子元素是唯一的，使用“:only-of-type”選擇器就可以選中這個元素中的唯一一個類型子元素。

7.選擇器
（1）enabled:表單可用 disabled:表單不可用（默認可用）

input[type="text"]:enabled {
  background: #ccc;
  border: 2px solid red;
}

（2）checked
:checked”配合其他標籤實現自定義樣式。而“:checked”表示的是選中狀態。

input[type="checkbox"]:checked + span {
  opacity: 1;
}

(3)selection
“::selection”僞元素是用來匹配突出顯示的文本(用鼠標選擇文本時的文本)。瀏覽器默認情況下，用鼠標選擇網頁文本是以“深藍的背景，白色的字體”顯示的
有的時候設計要求,不使用上圖那種瀏覽器默認的突出文本效果，需要一個與衆不同的效果，此時“::selection”僞元素就非常的實用。不過在Firefox瀏覽器還需要添加前綴。
注意：
1、IE9+、Opera、Google Chrome 以及 Safari 中支持 ::selection 選擇器。
2、Firefox 支持替代的 ::-moz-selection。

::-moz-selection {
  background: red;
  color: green;
}
::selection {
  background: red;
  color: green;
}

(4)read-only
“:read-only”僞類選擇器用來指定處於只讀狀態元素的樣式。簡單點理解就是，元素中設置了

“readonly=’readonly’”
input[type="text"]:-moz-read-only{
  border-color: #ccc;
}
input[type="text"]:read-only{
  border-color: #ccc;
}

read-write:
“:read-write”選擇器剛好與“:read-only”選擇器相反，主要用來指定當元素處於非只讀狀態時的樣式。
(5)::before和::after
給元素的前面或後面插入內容.

8.變形transform
（1）旋轉rotate()
旋轉rotate()函數通過指定的角度參數使元素相對原點進行旋轉。它主要在二維空間內進行操作，設置一個角度值，用來指定旋轉的幅度。如果這個值爲正值，元素相對原點中心順時針旋轉；如果這個值爲負值，元素相對原點中心逆時針旋轉。
(2)扭曲skew()
扭曲skew()函數能夠讓元素傾斜顯示。它可以將一個對象以其中心位置圍繞着X軸和Y軸按照一定的角度傾斜。
Skew()具有三種情況：
1、skew(x,y)使元素在水平和垂直方向同時扭曲（X軸和Y軸同時按一定的角度值進行扭曲變形）；

第一個參數對應X軸，第二個參數對應Y軸。如果第二個參數未提供，則值爲0，也就是Y軸方向上無斜切。
2、skewX(x)僅使元素在水平方向扭曲變形（X軸扭曲變形）；

3、skewY(y)僅使元素在垂直方向扭曲變形（Y軸扭曲變形）

(3)縮放scale()
讓元素根據中心原點對對象進行縮放。
1、 scale(X,Y)使元素水平方向和垂直方向同時縮放（也就是X軸和Y軸同時縮放）
注意：Y是一個可選參數，如果沒有設置Y值，則表示X，Y兩個方向的縮放倍數是一樣的。
2、scaleX(x)元素僅水平方向縮放（X軸縮放）
3、scaleY(y)元素僅垂直方向縮放（Y軸縮放）
(4)位移translate()
可以將元素向指定的方向移動,而不影響在X、Y軸上的任何Web組件。
translate(x,y), translateX(x), translateY(y)
(5)矩陣matrix()
matrix() 是一個含六個值的(a,b,c,d,e,f)變換矩陣，用來指定一個2D變換，相當於直接應用一個[a b c d e f]變換矩陣。就是基於水平方向（X軸）和垂直方向（Y軸）重新定位元素.
translate(100px,100px) <==> matrix(1,0,0,1,100,100)
(6)原點tansform-origin
任何一個元素都有一箇中心點，默認情況之下，其中心點是居於元素X軸和Y軸的50%處.

(7)動畫-過渡
通過鼠標的單擊、獲得焦點，被點擊或對元素任何改變中觸發，並平滑地以動畫效果改變CSS的屬性值。
在CSS中創建簡單的過渡效果可以從以下幾個步驟來實現：
第一，在默認樣式中聲明元素的初始狀態樣式；
第二，聲明過渡元素最終狀態樣式，比如懸浮狀態；
第三，在默認樣式中通過添加過渡函數，添加一些不同的樣式。
CSS3的過度transition屬性是一個複合屬性，主要包括以下幾個子屬性：
• transition-property:指定過渡或動態模擬的CSS屬性
• transition-duration:指定完成過渡所需的時間
• transition-timing-function:指定過渡函數
• transition-delay:指定開始出現的延遲時間
1》過渡屬性transition-property
transition-property用來指定過渡動畫的CSS屬性名稱，而這個過渡屬性只有具備一箇中點值的屬性（需要產生動畫的屬性）才能具備過渡效果，其對應具有過渡的CSS屬性主要有：

2》過渡持續時間
transition-duration屬性主要用來設置一個屬性過渡到另一個屬性所需的時間，也就是從舊屬性過渡到新屬性花費的時間長度，俗稱持續時間。
3》過渡函數
transition-timing-function屬性指的是過渡的“緩動函數”。主要用來指定瀏覽器的過渡速度，以及過渡期間的操作進展情況，其中要包括以下幾種函數：

4》過渡延遲時間
transition-delay屬性和transition-duration屬性極其類似，不同的是transition-duration是用來設置過渡動畫的持續時間，而transition-delay主要用來指定一個動畫開始執行的時間，也就是說當改變元素屬性值後多長時間開始執行。
有時我們想改變兩個或者多個css屬性的transition效果時，只要把幾個transition的聲明串在一起，用逗號（“，”）隔開，然後各自可以有各自不同的延續時間和其時間的速率變換方式。但需要值得注意的一點：第一個時間的值爲 transition-duration，第二個爲transition-delay。
例如：a{ transition: background 0.8s ease-in 0.3,color 0.6s ease-out 0.3;}

9.動畫
（1）keyframes
Keyframes被稱爲關鍵幀，其類似於Flash中的關鍵幀。在CSS3中其主要以“@keyframes”開頭，後面緊跟着是動畫名稱加上一對花括號“{…}”，括號中就是一些不同時間段樣式規則。

@keyframes changecolor{
  0%{
   background: red;
  }
  100%{
    background: green;
  }
}

在一個“@keyframes”中的樣式規則可以由多個百分比構成的，如在“0%”到“100%”之間創建更多個百分比，分別給每個百分比中給需要有動畫效果的元素加上不同的樣式，從而達到一種在不斷變化的效果。
經驗與技巧：在@keyframes中定義動畫名稱時，其中0%和100%還可以使用關鍵詞from和to來代表，其中0%對應的是from，100%對應的是to。
瀏覽器的支持情況：

Chrome 和 Safari 需要前綴 -webkit-；Foxfire 需要前綴-moz-。
(2)調用動畫
1>animation-name
animation-name屬性主要是用來調用 @keyframes 定義好的動畫。需要特別注意: animation-name 調用的動畫名需要和“@keyframes”定義的動畫名稱完全一致（區分大小寫），如果不一致將不具有任何動畫效果。
語法：
animation-name: none | IDENT[,none|DENT]*;
1、IDENT是由 @keyframes 創建的動畫名，上面已經講過了（animation-name 調用的動畫名需要和“@keyframes”定義的動畫名稱完全一致）；
2、none爲默認值，當值爲 none 時，將沒有任何動畫效果,這可以用於覆蓋任何動畫。
注意：需要在 Chrome 和 Safari 上面的基礎上加上-webkit-前綴，Firefox加上-moz-。
2>animation-duration
animation-duration主要用來設置CSS3動畫播放時間，其使用方法和transition-duration類似，是用來指定元素播放動畫所持續的時間長，也就是完成從0%到100%一次動畫所需時間。單位：S秒
語法規則
animation-duration: [,]*
取值爲數值，單位爲秒，其默認值爲“0”，這意味着動畫週期爲“0”，也就是沒有動畫效果（如果值爲負值會被視爲“0”）。
3>animation-timing-function
animation-timing-function屬性主要用來設置動畫播放方式。主要讓元素根據時間的推進來改變屬性值的變換速率，簡單點說就是動畫的播放方式。
語法規則：
animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , ) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , )]*
4>animation-delay
animation-delay屬性用來定義動畫開始播放的時間，用來觸發動畫播放的時間點。和transition-delay屬性一樣，用於定義在瀏覽器開始執行動畫之前等待的時間。
語法規則：
animation-delay:[,]*
5>animation-iteration-count
animation-iteration-count屬性主要用來定義動畫的播放次數。
語法規則：
animation-iteration-count: infinite | [, infinite | ]*
1、其值通常爲整數，但也可以使用帶有小數的數字，其默認值爲1，這意味着動畫將從開始到結束只播放一次。
2、如果取值爲infinite，動畫將會無限次的播放。
6.>animation-direction
animation-direction屬性主要用來設置動畫播放方向，其語法規則如下：
animation-direction:normal | alternate [, normal | alternate]*
其主要有兩個值：normal、alternate
1、normal是默認值，如果設置爲normal時，動畫的每次循環都是向前播放；
2、另一個值是alternate，他的作用是，動畫播放在第偶數次向前播放，第奇數次向反方向播放。
7.>animation-play-state
animation-play-state屬性主要用來控制元素動畫的播放狀態。
參數：
其主要有兩個值：running和paused。
其中running是其默認值，主要作用就是類似於音樂播放器一樣，可以通過paused將正在播放的動畫停下來，也可以通過running將暫停的動畫重新播放，這裏的重新播放不一定是從元素動畫的開始播放，而是從暫停的那個位置開始播放。另外如果暫停了動畫的播放，元素的樣式將回到最原始設置狀態。
8.>animation-fill-mode
animation-fill-mode屬性定義在動畫開始之前和結束之後發生的操作。主要具有四個屬性值：none、forwards、backwords和both。其四個屬性值對應效果如下：
屬性值 效果
none 默認值，表示動畫將按預期進行和結束，在動畫完成其最後一幀時，動畫會反轉到初始幀處
forwards 表示動畫在結束後繼續應用最後的關鍵幀的位置
backwards 會在向元素應用動畫樣式時迅速應用動畫的初始幀（返回初始態）
both 元素動畫同時具有forwards和backwards效果(不返回初始態）
在默認情況之下，動畫不會影響它的關鍵幀之外的屬性，使用animation-fill-mode屬性可以修改動畫的默認行爲。簡單的說就是告訴動畫在第一關鍵幀上等待動畫開始，或者在動畫結束時停在最後一個關鍵幀上而不回到動畫的第一幀上。或者同時具有這兩個效果。