# css3基礎
css3是css的公升級版本
css是從css1.0、css2.0、css2.1和css3.0這幾個版本一直公升級而來，其中css2.1是css2.0的修訂版，css3。0是最新版
+ 我們平常所說的css其實是指css2.1，而css特指相對陳述事實2.1「新增加的屬性」
+ css3.0相對css2.1來說，增加了很多屬性和方法，最典型的就是圓角，變形和動畫
+ 在css2.1中，為標籤設定圓角是一件非常麻煩的事情，實現動畫也大多使用jquery來實現
### 新功能
1. 選擇器
2. 文字效果：文字陰影textshadow屬性，潛入字型@font-face等
3. 顏色效果：如rgba顏色，不透明opacity等
4. 邊框效果：邊框圓角border-radius，邊框陰影box-shadow等
5. 背景效果：背景大小background-size，背景切片background-clip等
6. css變形比如位移translate()，縮放scale()等
7. css過度:transition
8. css動畫
9. 多列布局
10. 彈性盒子模型
11. 使用者介面：調整尺寸的resize，外輪廓線的outline屬性
12. **查詢
## 瀏覽器私有字首
目前有哪些瀏覽器核心？
1. chrome -webkit-
2. safari -webkit-
3. opera -o-
4. firefox -moz-
5. ie -ms-
### 選擇器
+ 屬性選擇器
e[attr^="lyve"]
e[attr$="lyve"]
e[attr*="lyve"]
+ 結構偽類選擇器
第一類e:first-child
e:lat-child
e:nth-child(n) n可以是數字也可以是odd或even
e:only-child 獲得父元素中的唯一子元素
第二類e:first-of-type 選擇同類的第乙個兄弟級元素
e:last-of-type 選擇同類的最後乙個兄弟級元素
e:nth-of-type(n) n可以是數字也可以是odd或even
e:only-of-type 選擇父元素中特定型別的唯一子元素
第三類e:root 選中html
e:not(selector)
e:empty 標籤裡面什麼都沒有寫（寫了文字就不算空元素）
e:target
+ ui元素狀態偽類選擇器
e:focus
e:checked
e::selection
e:enable
e:disable
e:read-write
e:read-only
e::before
e::after
### 長度單位
px特點
ie無法調整使用px作為單位的字型大小
emem相對當前物件內文字的字型尺寸，如當前行內文字未設定字型尺寸，則相對與瀏覽器預設字型尺寸
1. em值並不是固定的
2. em會繼承父級元素的字型大小
remrem是css3新增的乙個相對單位（root em），這個單位引起了廣泛關注。
這個單位和em有什麼區別？
區別在於使用rem為元素設定大小時，仍然是相對大小，相對的是根元素html的字型大小。
這個單位可謂集相對單位大小和絕對大小的優點於一身，通過它既可以做到做到只改變根元素就能成比例的修改調整所有的字型大小，又可以避免字型大小逐層復合的連鎖反應
目前，除ie8以及更早版本之外，所有瀏覽器都支援rem。
對於不支援它的瀏覽器，應對方法也很簡單，就是多寫乙個絕對單位申明，這些瀏覽器就會忽略用rem設定的字型大小。
例如：p;
### 文字屬性
+ text-shadow (可以四條邊分別設定)
+ text-overflow
+ word-wrap
+ text-stroke
> text-shadow:x-offset y-offset blur color;
> word-wrap:break-word //預設值是normal
### 顏色
+ opacity
取值範圍0-1,0表示完全透明，1表示完全不透明，書寫小數時可以省略0.直接寫 .3 ，不允許是負數。
+ rgba
r：紅色，g：綠色，b：藍色，a：透明度（alpha）
### 漸變
線性漸變
background:linear-gradient(方向,開始顏色,結束顏色);
> 指的是在一條直線上進行漸變，網頁中大多數漸變效果都是線性漸變的。
預設值|角度
----|----
to top,|0deg
to right,|90deg
to left,|270deg
to bottom,|180deg
to top left,|
to top right,
to bottom left,
to bottom right;
徑向漸變
background:radial-gradient(position,shap,size,start-color,stop-color);
position 圓心位置
> 預設值：center，top，right，left，bottom
shape 形狀
> circle圓形 ellipse/橢圓
> 是一種從起點到終點顏色從內到外進行圓形漸變（從中間向外拉，像圓一樣）
CSS3新增功能01
selector1 selector2 只能選擇selector1後面的兄弟元素。1.2.1 e pro 選擇有pro屬性的元素e。1.2.2 e pro value 選擇有pro屬性的，並且屬性值是value的元素e。1.2.3 e pro value 選擇有pro屬性的，並且屬性值中以value...
CSS3相比CSS新增哪些功能
1 css3介紹 4 文字陰影與自動換行 5 各種盒模型 總體分為block型別和inline型別，再細分為inline block型別 inline table型別 list item型別 run in型別 compact型別 相關型別 none型別 7 css3新增的背景樣式 backgroun...
CSS3新增屬性用法整理CSS3新增屬性用法整理
css3新增屬性用法整理 css3新增屬性用法整理 1 box shadow 陰影效果 2 border color 為邊框設定多種顏色 3 border image 邊框 4 text shadow 文字陰影 5 text overflow 文字截斷 6 word wrap 自動換行 7 bord...