CSS3是個啥
CSS即層疊樣式表（Cascading StyleSheet）。 在網(wǎng)頁制作時采用層疊樣式表技術(shù)是钥，可以有效地對頁面的布局老翘、字體、顏色舔哪、背景和其它效果實現(xiàn)更加精確的控制欢顷。 只要對相應(yīng)的代碼做一些簡單的修改，就可以改變同一頁面的不同部分尸红，或者頁數(shù)不同的網(wǎng)頁的外觀和格式吱涉。
CSS3是CSS技術(shù)的升級版本刹泄，CSS3語言開發(fā)是朝著模塊化發(fā)展的外里。以前的規(guī)范作為一個模塊實在是太龐大而且比較復(fù)雜，所以特石，把它分解為一些小的模塊盅蝗，更多新的模塊也被加入進來。這些模塊包括： 盒子模型姆蘸、列表模塊墩莫、超鏈接方式 芙委、語言模塊 、背景和邊框 狂秦、文字特效 灌侣、多欄布局等。
CSS3是在CSS的接觸上增加了很多新的特性裂问，與低版本的CSS并不沖突侧啼。
CSS3文本
text-overflow
1.clip: 隱藏超出文本
2.ellipsis: 超出部分使用省略號
例子（超出文本內(nèi)容使用省略號代替）
overflow:hidden;
text-overflow:ellipsis;
white-space: nowrap;
word-wrap
word-wrap 屬性允許長單詞或 URL 地址換行到下一行
1.normal: 只在允許的斷字點換行
2.break-word: 在長單詞或 URL 地址內(nèi)部進行換行
word-break
word-break 屬性規(guī)定自動換行的處理方法
1.normal 使用瀏覽器默認的換行規(guī)則。
2.break-all 允許在單詞內(nèi)換行
3.keep-all 只能在半角空格或連字符處換行
white-space
white-space 屬性設(shè)置如何處理元素內(nèi)的空白
1.normal 默認堪簿。連續(xù)空白會被瀏覽器忽略
2.pre 空白會被瀏覽器保留痊乾。
3.nowrap 文本不會換行，文本會在在同一行上繼續(xù)椭更，直到遇到
標簽為止
4.pre-wrap 保留空白符序列哪审，但是正常地進行換行
5.pre-line 合并空白符序列，但是保留換行符
6.inherit 規(guī)定應(yīng)該從父元素繼承 white-space 屬性的值
text-shadow
text-shadow: 顏色(Color) x軸(X Offset) y軸(Y Offset) 模糊半徑(Blur)
text-shadow: x軸(X Offset) y軸(Y Offset) 模糊半徑(Blur) 顏色(Color)
可以設(shè)置偏移虑瀑，顏色湿滓，陰影大小
CSS3 邊框
CSS在很大程度上拓展了border的樣式，讓我們可以做出更加豐富的效果
border-radius
圓角是做網(wǎng)頁永遠繞不過的話題缴川，以前基本是通過背景圖片做的茉稠，有了CSS3后簡單屬性搞定，我們可以通過border-radius設(shè)置元素的圓角半徑
order-radius是縮寫格式把夸，其實border-radius和border屬性一樣而线，還可以把各個角單獨拆分出來
box-shadow
box-shadow屬性至多有6個參數(shù)設(shè)置
1.陰影類型：此參數(shù)是一個可選值，如果不設(shè)值恋日，其默認的投影方式是外陰影膀篮；如果取其唯一值inset,就是將外陰影變成內(nèi)陰影
2.X-offset:是指陰影水平偏移量其值可以是正負值可以取正負值，如果值為正值岂膳，則陰影在對象的右邊誓竿，反之其值為負值時，陰影在對象的左邊
3.Y-offset:是指陰影的垂直偏移量谈截，其值也可以是正負值筷屡，如果為正值，陰影在對象的底部簸喂，反之其值為負值時毙死，陰影在對象的頂部
4.陰影模糊半徑：此參數(shù)是可選，喻鳄，但其值只能是為正值扼倘，如果其值為0時，表示陰影不具有模糊效果除呵，其值越大陰影的邊緣就越模糊
5.陰影擴展半徑：此參數(shù)可選再菊，其值可以是正負值爪喘，如果值為正，則整個陰影都延展擴大纠拔，反之值為負值是秉剑，則縮小
6.陰影顏色：此參數(shù)可選，如果不設(shè)定任何顏色時稠诲，瀏覽器會取默認色秃症，但各瀏覽器默認色不一樣
box-sizing
這個屬性多少和邊框也相關(guān)，傳統(tǒng)的盒模型width就是指內(nèi)容區(qū)域?qū)挾嚷来猓蚿adding种柑、border沒有關(guān)系，但是這在布局上帶來一定的困難
box-sizing可以改變盒模型
1.content-box：標準盒模型
2.border-box：width = content width + paddingLeft + borderLeft + paddingRight + borderRight
CSS3 背景
在CSS3之前我們對背景圖片的控制極為有限匹耕，只能決定其來源聚请、位置、重復(fù)稳其，CSS3開辟了一篇新天地
background-size
在 CSS3中驶赏，可以規(guī)定背景圖片的尺寸，這就允許我們在不同的環(huán)境中重復(fù)使用背景圖片既鞠，以像素或百分比規(guī)定尺寸煤傍。如果以百分比規(guī)定尺寸，那么尺寸相對于父元素的寬度和高度
1.length:設(shè)置背景圖像的高度和寬度嘱蛋，第一個值設(shè)置寬度蚯姆，第二個值設(shè)置高度，如果只設(shè)置一個值洒敏，則第二個值會被設(shè)置為auto
2.percentage: 以父元素的百分比來設(shè)置背景圖像的寬度和高度龄恋，第一個值設(shè)置寬度，第二個值設(shè)置高度凶伙，如果只設(shè)置一個值郭毕，則第二個值會被設(shè)置為auto
3.cover: 把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區(qū)域函荣，背景圖像的某些部分也許無法顯示在背景定位區(qū)域中
4.contain: 把圖像圖像擴展至最大尺寸显押，以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域
background-origin
background-origin 屬性規(guī)定 background-position 屬性相對于什么位置來定位
1.padding-box: 背景圖像相對于內(nèi)邊距框來定位
2.border-box: 背景圖像相對于邊框盒來定位
3.content-box: 背景圖像相對于內(nèi)容框來定位
如果背景圖像的 background-attachment 屬性為fixed，則該屬性沒有效果
CSS3 漸變（Gradient）
CSS3漸變分為
liner-gradient和radial-gradient
線性漸變
在線性漸變過程中傻挂，顏色沿著一條直線過渡：從左側(cè)到右側(cè)乘碑、從右側(cè)到左側(cè)、從頂部到底部踊谋、從底部到頂部或著沿任何任意軸
linear-gradient([[<angle> | to <side-or-corner> ],]?<color-stop>[,<color-stop>]+)
W3C標準線性漸性語法包括三個主要屬性參數(shù)：
第一個參數(shù)指定了漸變的方向蝉仇，同時決定了漸變顏色的停止位置旋讹。這個參數(shù)值可以省略殖蚕，當省略不寫的時候其取值為to bottom
在決定漸變的方向主要有兩種方法：
1.angle：通過角度來確定漸變的方向轿衔。0度表示漸變方向從下向上，90度表示漸變方向從左向右睦疫。如果取值為下值害驹，其角度按順時針方向旋轉(zhuǎn)
2.關(guān)鍵詞：通過關(guān)鍵詞來確定漸變的方向。比如to top蛤育、to right宛官、to bottom和to left
這些關(guān)鍵詞對應(yīng)的角度值，除了使用to top瓦糕、top left之外底洗，還可以使用top left左上角到右下角、top right左上角到右下解等咕娄。
第二個和第三個參數(shù)亥揖，表示顏色的起始點和結(jié)束點∈ダ眨可以在插入多個顏色值
多色線性漸變
在實際中费变，漸變不僅僅是只有兩種顏色，會有多色
.toLeft {
background-image:-webkit-linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);
background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);
}
徑向漸變
CSS3徑向漸變是圓形或橢圓形漸變圣贸。顏色不再沿著一條直線軸變化挚歧，而是從一個起點朝所有方向混合。但相對線性漸變要比徑向漸變復(fù)雜的多吁峻。
radial-gradient([[<shape> || <size>] [at <position>]?,| at <position>,]?<color-stop>[,<color-stop>]+);
CSS3 過渡和動畫
過渡
在CSS3引入transition之前css沒有時間軸滑负，所有的狀態(tài)變化都是瞬間完成
div{
transition: 1s;
}
指定屬性
我們還可以指定transition適用的屬性，比如只適用于height
transition: 1s height;
這樣一來用含，只有height的變化需要1秒實現(xiàn)橙困，其他變化（主要是width）依然瞬間實現(xiàn)，在同一行transition語句中耕餐，可以分別指定多個屬性
delay
但是凡傅，這樣一來，height和width的變化是同時進行的肠缔，跟不指定它們沒有差別夏跷，我們希望，讓height先發(fā)生變化明未，等結(jié)束以后槽华，再讓width發(fā)生變化。實現(xiàn)這一點很容易趟妥，就是為width指定一個delay參數(shù)
transition: 1s height, 1s 1s width;
上面代碼指定猫态，width在1秒之后，再開始變化，也就是延遲（delay）1秒
delay的真正意義在于亲雪，它指定了動畫發(fā)生的順序勇凭，使得多個不同的transition可以連在一起，形成復(fù)雜效果
animation
transition 比較簡單义辕，animation可以幫我們實現(xiàn)復(fù)雜的動畫虾标，使用animation我們首先需要定義動畫過程，也就是關(guān)鍵幀
@keyframes rainbow {
0% { background: #c00; }
50% { background: orange; }
100% { background: yellowgreen; }
}
rainbow效果一共有三個狀態(tài)灌砖，分別為起始（0%）璧函、中點（50%）和結(jié)束（100%）。如果有需要基显，完全可以插入更多狀態(tài)蘸吓，值是每個狀態(tài)下的屬性值
定義了關(guān)鍵幀之后就可以給DOM元素綁定動畫了，和事件很像
div:hover {
animation: 1s rainbow;
}
當鼠標懸停在div元素上時撩幽，會產(chǎn)生名為rainbow的動畫效果美澳，持續(xù)時間為1秒，默認情況下摸航，動畫只播放一次制跟。加入infinite關(guān)鍵字，可以讓動畫無限次播放
animation: 1s rainbow infinite;
也可以指定動畫具體播放的次數(shù)酱虎，比如3次
animation: 1s rainbow 3;
CSS3 變形
CSS3中可以通過transform屬性修改元素的變形雨膨、旋轉(zhuǎn)、縮放读串、傾斜特性聊记，在CSS3中transform主要包括以下幾種：旋轉(zhuǎn)rotate、扭曲skew恢暖、縮放scale和移動translate以及矩陣變形matrix
transform ： none | <transform-function> [ <transform-function> ]*
transform中使用多個屬性時卻需要有空格隔開排监，可用于內(nèi)聯(lián)(inline)元素和塊級(block)元素
旋轉(zhuǎn)
可以通過rotate使元素旋轉(zhuǎn)一定的度數(shù)
transform:rotate(30deg);
1.旋轉(zhuǎn)是順時針的
2.旋轉(zhuǎn)之后元素仍占據(jù)原來位置，實際上所有的transform都是這樣杰捂，縮放舆床、位移等都不會改變元素占據(jù)的位置
3.元素旋轉(zhuǎn)的的基點默認是中心，可以通過transform-origin屬性改變
位移
可以通過translate使元素平移
transform:translate(x,y); transform:translate(200px,150px);
扭曲
可以通過skew使元素扭曲一定的度數(shù)嫁佳，和上面一樣也有三中類似的用法
transform:skew(10deg, 20deg);
transform:skewX(10deg);
transform:skewY(10deg);
transform:skew(10deg);
CSS3 3D
CSS3帶來了DOM的3D效果挨队，元素需要設(shè)置需要設(shè)置perspective來激活3D效果，可以通過兩種方式實現(xiàn)
1.在transform屬性中使用perspective方法
transform: perspective( 600px );
2.直接使用perspective屬性
perspective: 600px;
perspective屬性的值決定了3D效果的強烈程度蒿往，可以認為是觀察者到頁面的距離盛垦。值越大距離越遠，視覺上的3D效果就會相應(yīng)的減弱瓤漏。perspective: 2000px; 會產(chǎn)生一個好像我們使用望遠鏡看遠方物體的3D效果腾夯，perspective: 100px;會產(chǎn)生一個小昆蟲看大象的效果颊埃。
HTML5 Tricks
推薦一個學(xué)習(xí)HTML5的網(wǎng)站，里面有各種HTML5+CSS5寫出來的超贊蝶俱，超神奇的特效班利。amazing！ｕ卫帧！
