CSS3（層疊樣式表）這項(xiàng)技術(shù)的升級(jí)版本是在1999年制定的2001年5月23日，W3C完成了CSS3的工作草案，主要包括盒子模型、列表模塊、超鏈接方式、語(yǔ)言模塊、背景和邊框、文字特效、多欄布局等模塊。

CSS發(fā)展的一個(gè)主要變化是W3C 將CSS3分成一系列模塊的決定。瀏覽器廠商按照CSS的節(jié)奏快速創(chuàng)新，所以通過(guò)采用模塊化的方法，CSS3規(guī)范中的元素可以以不同的速度發(fā)展，因?yàn)椴煌臑g覽器廠商只支持給定的特性。然而，不同的瀏覽器在不同的時(shí)間支持不同的功能，這也使得跨瀏覽器開(kāi)發(fā)變得復(fù)雜。

早在2001年，W3C就完成了CSS3的規(guī)范草案。CSS3規(guī)范的一個(gè)新特性是它被分成幾個(gè)獨(dú)立的模塊。一方面，通過(guò)將模塊分成幾個(gè)更小的模塊，有利于規(guī)范的及時(shí)更新和發(fā)布，有利于模塊內(nèi)容的及時(shí)調(diào)整這些模塊都是獨(dú)立實(shí)現(xiàn)和發(fā)布的，這也為以后CSS的擴(kuò)展打下了基礎(chǔ)。另一方面，由于支持設(shè)備和瀏覽器廠商的限制，設(shè)備或廠商可以選擇性地支持CSS3的部分模塊和子集，有利于CSS3的普及。

CSS3編程工具和CSS一樣，任何文本編輯工具都可以用來(lái)編寫(xiě)，比如：在Windows下寫(xiě)書(shū)、記事本；或其他專門(mén)用于編輯網(wǎng)頁(yè)文本的工具，如：Intelligent a、Eclipse、MyEclipse、webstorm、sublimetext；此外，還有專門(mén)為前端開(kāi)發(fā)的插件，比如：Emmet。

CSS3的原理和CSS一樣，都是在網(wǎng)頁(yè)中自定義樣式表的選擇器，然后在大量的網(wǎng)頁(yè)中引用這些選擇器。

(標(biāo)度函數(shù)標(biāo)度(旋轉(zhuǎn)功能旋轉(zhuǎn)(和傾斜函數(shù)偏斜(變形可以簡(jiǎn)單實(shí)現(xiàn)，但是變形中的所有矩陣函數(shù)都可以使用矩陣(函數(shù)來(lái)代替

CSS3的語(yǔ)法基于CSS的原始版本，它允許用戶在標(biāo)簽中指定特定的HTML元素，而無(wú)需使用多余的類、Identification or Java Script language。CSS選擇器大部分都不是CSS3中新加入的，只是在之前的版本中沒(méi)有被廣泛使用。如果你想達(dá)到一個(gè)干凈的、輕量級(jí)標(biāo)簽和更好的結(jié)構(gòu)和性能分離，高級(jí)選擇器非常有用，可以減少標(biāo)簽中的class和id數(shù)量，讓設(shè)計(jì)人員更容易維護(hù)樣式表。

CSS3的新特征有很多，例如圓角效果、圖形化邊界、塊陰影與文字陰影、使用RGBA實(shí)現(xiàn)透明效果、漸變效果、使用@Font-Face實(shí)現(xiàn)定制字體、多背景圖、文字或圖像的變形處理（旋轉(zhuǎn)、縮放、傾斜、移動(dòng)）、多欄布局、媒體查詢等。

CSS3圓角表格

1、邊框特性

CSS3對(duì)網(wǎng)頁(yè)中的邊框進(jìn)行了一些改進(jìn)，主要包括支持圓角邊框、多層邊框、邊框色彩與圖片等。在CSS3中最常用的一個(gè)改進(jìn)就是圓角邊框，通過(guò)CSS3的屬性可以快速實(shí)現(xiàn)圓角定義，同時(shí)還可以根據(jù)實(shí)際情況針對(duì)特定角進(jìn)行圓角定義。

CSS3背景

2、多背景圖

CSS3允許使用多個(gè)屬性（比如background-image、background-repeat、background-size、background-position、background-origin和background-clip等）在一個(gè)元素上添加多層背景圖片。該屬性的應(yīng)用大大改善了以往面對(duì)多層次設(shè)計(jì)需要多層布局的問(wèn)題，幫助Web前端開(kāi)發(fā)者在不借助Photoshop的情況下實(shí)現(xiàn)對(duì)頁(yè)面背景的設(shè)計(jì)，簡(jiǎn)化了背景圖片的維護(hù)成本。

3、顏色與透明度

CSS3顏色模塊的引入，實(shí)現(xiàn)了制作Web效果時(shí)不再局限于RGB和十六進(jìn)制兩種模式。CSS3增加了HSL、HSLA、RGBA幾種新的顏色模式。這幾種顏色模式的提出，在做開(kāi)發(fā)的時(shí)候不僅可以設(shè)置元素的色彩，還能根據(jù)需要輕松地設(shè)定元素透明度。

4、多列布局與彈性盒模型布局

flex box（彈性盒子）

CSS3多列布局屬性可以不使用多個(gè)div標(biāo)簽就能實(shí)現(xiàn)多列布局。CSS3中的多列布局模塊描述了如何像報(bào)紙、雜志那樣，把一個(gè)簡(jiǎn)單的區(qū)塊拆成多列，并通過(guò)相應(yīng)屬性來(lái)實(shí)現(xiàn)列數(shù)、列寬、各列之間的空白間距。彈性盒模型布局方便了Web前端開(kāi)發(fā)者根據(jù)復(fù)雜的前端分辨率進(jìn)行彈性布局，輕松地實(shí)現(xiàn)頁(yè)面中的某一區(qū)塊在水平、垂直方向?qū)R，是進(jìn)行響應(yīng)式網(wǎng)站開(kāi)發(fā)的一大利器。

5、盒子的變形

在CSS2.1中，想讓某個(gè)元素變形必須要借助JavaScript寫(xiě)大量的代碼實(shí)現(xiàn)，在CSS3中加入了變形屬性，該屬性在2D或3D空間里操作盒子的位置和形狀，來(lái)實(shí)現(xiàn)例如旋轉(zhuǎn)、扭曲、縮放或者移位。變形屬性的出現(xiàn)，使Web前端中的元素展示不僅僅局限在二維空間，Web前端開(kāi)發(fā)者可以通過(guò)旋轉(zhuǎn)、扭曲、縮放或者移位等操作實(shí)現(xiàn)元素在三維控件上的展示。通過(guò)變形元素，web前端中的內(nèi)容展示更加形象、真實(shí)。

6、過(guò)渡與動(dòng)畫(huà)

CSS3的“過(guò)渡”（transition）屬性通過(guò)設(shè)定某種元素在某段時(shí)間內(nèi)的變化實(shí)現(xiàn)一些簡(jiǎn)單的動(dòng)畫(huà)效果，讓某些效果變得更加具有流線性與平滑性。CSS3的“動(dòng)畫(huà)”（animation）屬性能夠?qū)崿F(xiàn)更復(fù)雜的樣式變化以及一些交互效果，而不需要使用任何Flash或JavaScript腳本代碼。過(guò)渡與動(dòng)畫(huà)的出現(xiàn)，使CSS在Web前端開(kāi)發(fā)中不再僅僅局限于簡(jiǎn)單的靜態(tài)內(nèi)容展示，而是通過(guò)簡(jiǎn)單的方法使頁(yè)面元素動(dòng)了起來(lái)，實(shí)現(xiàn)了元素從靜到動(dòng)的變化。

7、Web字體

CSS3中引入了@font-face，@font-face是鏈接服務(wù)器字體的一種方式，這些嵌入的字體能變成瀏覽器的安全字體，開(kāi)發(fā)人員不用再擔(dān)心用戶沒(méi)有這些字體而導(dǎo)致網(wǎng)頁(yè)在用戶瀏覽器無(wú)法正常顯示的問(wèn)題。

8、媒體查詢

CSS3中引入媒體查詢（mediaqueries），可為不同分辨率的設(shè)備定義不同的樣式。比如，在可視區(qū)域小于480像素時(shí)，可能想讓原來(lái)在右側(cè)的網(wǎng)站側(cè)欄顯示在主內(nèi)容的下邊，以往必須通過(guò)JavaScript判斷用戶瀏覽器的分辨率，然后再通過(guò)JavaScript修改CSS。CSS3中只需要通過(guò)媒體查詢就可實(shí)現(xiàn)上述操作。

CSS3文字陰影

9、陰影

陰影主要分為兩種：文本陰影（text-shadow）和盒子陰影（box-shadow）。文本陰影在CSS2中已經(jīng)存在，但沒(méi)有得到廣泛的運(yùn)用（CSS2.1中刪除了）。CSS3延續(xù)了這個(gè)特性，并進(jìn)行了新的定義，該屬性提供了一種新的跨瀏覽器解決方案，使文本看起來(lái)更加醒目。CSS3中的盒子陰影的引入，可輕易地為任何元素添加盒子陰影。

CSS3瀏覽器兼容情況

瀏覽器廠商以前就一直在實(shí)施CSS3，雖然它還未成為真正的標(biāo)準(zhǔn)，但卻提供了針對(duì)瀏覽器的前綴：

Chrome（谷歌瀏覽器）：-webkit-

Safari（蘋(píng)果瀏覽器）：-webkit-

Firefox（火狐瀏覽器）：-moz-

lE（IE瀏覽器）：-ms-

Opera（歐朋瀏覽器）：-0-

例如，CSS3漸變樣式在Firefox和Safari中是不同的。Firefox使用-moz-linear-gradient，而Safari使用-webkit-gradient，這兩種語(yǔ)法都使用了廠商類型的前綴。

需要注意的是，在使用有廠商前綴的樣式時(shí)，也應(yīng)該使用無(wú)前綴的。這樣可以保證當(dāng)瀏覽器移除了前綴，使用標(biāo)準(zhǔn)CSS3規(guī)范時(shí)，樣式仍然有效。??

1、降低開(kāi)發(fā)成本和維護(hù)成本

在CSS3出現(xiàn)之前，為了實(shí)現(xiàn)圓角效果，開(kāi)發(fā)者往往需要添加額外的HTML標(biāo)簽，并使用一張或多張圖片來(lái)完成，而使用CSS3只需要一個(gè)標(biāo)簽，并使用CSS3中的邊框-可以完成半徑屬性。這樣，CSS3技術(shù)就可以把人從畫(huà)圖中轉(zhuǎn)移出來(lái)、剪切圖片，優(yōu)化圖片。如果以后需要調(diào)整這個(gè)圓角的弧度或者顏色，使用CSS2.1需要從頭開(kāi)始畫(huà)、只能通過(guò)裁剪地圖來(lái)實(shí)現(xiàn)，使用CSS3時(shí)只需要修改邊框-可以快速修改半徑屬性值。

CSS3提供的動(dòng)畫(huà)特性可以讓開(kāi)發(fā)者在實(shí)現(xiàn)一些動(dòng)態(tài)按鈕或者動(dòng)態(tài)導(dǎo)航的時(shí)候遠(yuǎn)離JavaScript，讓開(kāi)發(fā)者不用 不需要花很多時(shí)間寫(xiě)腳本或者尋找合適的腳本插件來(lái)適應(yīng)一些動(dòng)態(tài)的網(wǎng)站效果。

2、提高頁(yè)面性能

許多CSS3技術(shù)通過(guò)提供相同的視覺(jué)效果而變得圖形化“替代品”換句話說(shuō)，在Web開(kāi)發(fā)中，減少冗余的標(biāo)簽嵌套和使用的圖片數(shù)量意味著用戶將下載更少的內(nèi)容和更快地加載頁(yè)面。另外，圖片比較少、腳本和Flash文件可以減少用戶訪問(wèn)網(wǎng)站時(shí)的HTTP請(qǐng)求數(shù)量，這是加速頁(yè)面加載的最佳方式之一。使用CSS3制作圖形化網(wǎng)站，不需要任何圖片，大大減少了HTTP請(qǐng)求的數(shù)量，提高了頁(yè)面的加載速度。比如CSS3的動(dòng)畫(huà)效果，可以減少對(duì)JavaScript和Flash文件的HTTP請(qǐng)求，但是可能需要瀏覽器進(jìn)行大量的工作來(lái)渲染這種動(dòng)畫(huà)效果，可能導(dǎo)致瀏覽器響應(yīng)緩慢，用戶流失。所以在使用一些復(fù)雜特效的時(shí)候，需要考慮清楚。事實(shí)上，許多CSS3技術(shù)可以在任何情況下極大地提高頁(yè)面的性能。

CSS3將完全向后兼容，因此不需要修改的設(shè)計(jì)來(lái)保持它們的工作。網(wǎng)絡(luò)瀏覽器也將繼續(xù)支持CSS2。