第一章 初識(shí)CSS3
什么是CSS3耳鸯？
CSS3是CSS2的升級(jí)版本樱衷，3只是版本號(hào)竞川，它在CSS2.1的基礎(chǔ)上增加了很多強(qiáng)大的新功能店溢。 目前主流瀏覽器chrome、safari流译、firefox逞怨、opera、甚至360都已經(jīng)支持了CSS3大部分功能了福澡，IE10以后也開始全面支持CSS3了叠赦。
在編寫CSS3樣式時(shí)，不同的瀏覽器可能需要不同的前綴革砸。它表示該CSS屬性或規(guī)則尚未成為W3C標(biāo)準(zhǔn)的一部分除秀，是瀏覽器的私有屬性，雖然目前較新版本的瀏覽器都是不需要前綴的算利，但為了更好的向前兼容前綴還是少不了的册踩。
| 前綴 | 瀏覽器 |
|---|---|
| -webkit | chrome和safari |
| -moz | firefox |
| -ms | IE |
| -o | opera |
CSS3能做什么
CSS3給我們帶來了什么好處呢？簡單的說效拭，CSS3把很多以前需要使用圖片和腳本來實(shí)現(xiàn)的效果暂吉、甚至動(dòng)畫效果，只需要短短幾行代碼就能搞定缎患。比如圓角慕的，圖片邊框，文字陰影和盒陰影挤渔，過渡肮街、動(dòng)畫等。
CSS3簡化了前端開發(fā)工作人員的設(shè)計(jì)過程判导，加快頁面載入速度嫉父。
CSS3都有哪些強(qiáng)大功能呢？
- 選擇器: 以前我們通常用
class眼刃、ID或tagname來選擇HTML元素绕辖，CSS3的選擇器強(qiáng)大的難以置信。它們可以減少在標(biāo)簽中的class和ID的數(shù)量更方便的維護(hù)樣式表擂红、更好的實(shí)現(xiàn)結(jié)構(gòu)與表現(xiàn)的分離仪际。 - 圓角效果:以前做圓角通常使用背景圖片，或繁瑣的元素拼湊，現(xiàn)在很簡單了
border-radius幫你輕松搞定弟头。 - 塊陰影與文字陰影:可以對(duì)任意DIV和文字增加投影效果。
- 色彩:CSS3支持更多的顏色和更廣泛的顏色定義涉茧。新顏色CSS3支持HSL赴恨、CMYK、HSLA and RGBA伴栓。
- 漸變效果:以前只能用Photoshop做出的圖片漸變效果伦连，現(xiàn)在可以用CCS寫出來了。IE中的濾鏡也可以實(shí)現(xiàn)钳垮。
- 個(gè)性化字體:網(wǎng)頁上的字體太單一惑淳？使用
@Font-Face輕松實(shí)現(xiàn)定制字體。 - 多背景圖:一個(gè)元素上添加多層背景圖片饺窿。
- 邊框背景圖:邊框應(yīng)用背景圖片歧焦。
- 變形處理:你可以對(duì)HTML元素進(jìn)行旋轉(zhuǎn)、縮放肚医、傾斜绢馍、移動(dòng)、甚至以前只能用JavaScript實(shí)現(xiàn)的強(qiáng)大動(dòng)畫肠套。
- 多欄布局:可以讓你不用使用多個(gè)div標(biāo)簽就能實(shí)現(xiàn)多欄布局舰涌。瀏覽器解釋這個(gè)屬性并生成多欄，讓文本實(shí)現(xiàn)一個(gè)仿報(bào)紙的多欄結(jié)構(gòu)你稚。
- 媒體查詢:針對(duì)不同屏幕分辨率瓷耙，應(yīng)用不同的樣式。
