雖然，它已經有一段時間正式發布了。如果你還沒有閱讀關于HTML5的文章，長沙網站建設強烈建議你這樣做，因為CSS3可以更好地使用萬維網聯盟的最新標記語言。
CSS2早在1998年出現，從那時起互聯網上發生了很多事情。它的唯一修訂是在2011年制作的，CSS2.1，但業內專家表示，CSS3應該發布只是時間問題，因為它帶來的功能是完全必要的，并且在過去幾年中被遺漏了。
您的Designer Toolbox
Unlimited下載：500,000多個Web模板，圖標集，主題和設計資產
現在下載
許多人對CSS3不了解的是，它的開發僅在提交其先前版本一年后開始。所以W3C自1999年以來一直在研究這個改進的版本，已經有超過12年的時間，直到第一個CSS3穩定版本發布。
雖然聽起來CSS2和CSS3之間存在很大差異（這是非常正確的），但所有現代瀏覽器都很快采用了W3C系列的新增功能。所有主流瀏覽器都支持當前可用的大多數CSS3功能。
您可能也喜歡：HTML5簡介。
與HTML5一樣，聯盟仍然認為CSS3處于持續開發狀態，并且它不太可能獲得最終版本，原因與HTML5可能不同。隨著網絡需求和整個行業的變化如此之快，編碼需要以同樣的速度向前發展。
CSS3中的CSS3與CSS2的主要區別
也許CSS2和CSS3之間的最大區別在于模塊的分離。雖然在之前的版本中，所有內容都是定義不同功能的大型單一規范，但CSS3分為幾個文檔，稱為模塊。
每個模塊都具有新功能，而不會損害先前穩定版本的兼容性。當我們談論模塊時，我們可以命名超過五十個。但是，其中四個已作為正式建議發布。該四大包含以下內容：
媒體查詢（2012年發布）
命名空間（2011年發布）
選擇者等級3（2011年出版）
顏色（2011年出版）
該媒體查詢很可能是最重要的除了CSS。它的作用很簡單：它允許將某些條件應用于不同的樣式表，使網站流暢并適合各種屏幕尺寸。媒體查詢允許開發人員定制到不同的分辨率，而無需更改或刪除內容。
媒體查詢
使用媒體查詢構建的響應網格示例
媒體查詢非常容易，一旦你完成了設置就可以使用它們。讓我們看一下代碼行。
@media screen和（max-width：600px）{屏幕和（最大- 寬度：600px ）{
背景：#FFF;：#FFF;
}}
通過在上面的媒體查詢中開始設置樣式，您將僅為最大寬度為600像素的屏幕設置樣式。在上面的示例中，所有最大寬度為600像素的屏幕將顯示白色背景。
但是，max-width不是可以應用于樣式表的唯一條件。您也可以使用max-device-width（這是屏幕分辨率，不同于最大寬度，即查看區域），您可以使用min而不是max，但您也可以組合兩個條件，例如下面的示例，這僅適用于觀看區域在600到900像素之間的屏幕。
@media screen和（min-width：600px）和（max-width：900px）{屏幕和（最小- 寬度：600px ）和（最大- 寬度：900px ）{
背景：#FFF;：#FFF;
}}
CSS3為便攜式設備提供了一些預定義的樣式表，例如iPhone或iPad，您可以在下面看到：
<link href =“iphone4.css”rel =“stylesheet”media =“only screen and（-webkit-min-device-pixel-ratio：2）”type =“text / css”/>
<link href = “iphone4.css” rel = “stylesheet” media = “only screen and（-webkit-min-device-pixel-ratio：2）” type = “text / css” />
和
<link href =“portrait.css”rel =“stylesheet”media =“all and（orientation：portrait）”/>
<link href = “portrait.css” rel = “stylesheet” media = “all and（orientation：portrait）” />
<link href =“landscape.css”rel =“stylesheet”media =“all and（orientation：landscape）”/>
<link href = “landscape.css” rel = “stylesheet” media = “all and（orientation：landscape）” />
如您所見，當開發人員需要使流體網格在不同屏幕尺寸的不同設備上工作時，媒體查詢可以非常方便。
CSS3的其他一些重要的設計考慮因素是，例如，邊框，現在可以在沒有黑客的情況下進行圓整。CSS3實際上引入了更圓的邊框，這對設計人員和開發人員來說是一個巨大的幫助。
但是，許多這些功能在舊版本的Internet Explorer中不起作用，但這對我們來說并不新鮮，我們之前已經聽過。您需要在樣式表中添加的唯一代碼（在特定類中）類似于：
-moz-border-radius：5px;moz - border - radius ：5px ;
-webkit-border-radius：5px;- webkit - border - radius ：5px ;
邊框：2px solid＃897048;：2px solid ＃897048;
如您所見，它比以前容易得多。
漸變也可以在CSS3中使用，這是我們想要看一段時間的另一個很酷的補充，以及框/文本陰影和邊框圖像。
為了在沒有任何黑客的情況下向內容添加文本陰影，CSS3只需要類似于以下代碼行的內容：
text-shadow：2px 2px 2px #ddccb5;
- shadow ：2px 2px 2px ＃ddccb5;
創建內容列比使用CSS3更容易，因為現在您可以隨時使用四行代碼。這些是：
列數
列寬
柱隙
列治
另一個節省時間的選擇是直接從CSS插入多個背景，而不是像以前那樣使用各種黑客。代碼很容易編寫和記憶，我相信你會在某個時間點使用它。
.multiplebackgrounds {multiplebackgrounds {
身高：100px;：100px ;
寬度：200px;：200px ;
填充：20px;：20px ;
background：url（top.gif）右上角不重復，：URL （頂部。GIF ）右上角沒有- 重復，
url（bottom.gif）左上方重復y，（底部。GIF ），左上重復- ? ，
url（middle.gif）bottom repeat-z;（中間。GIF ）底部重復- ? ;
}}
供應商前綴
當CSS3新發布時，供應商前綴一直被使用，因為它們幫助瀏覽器解釋代碼。有時你仍然需要在今天使用它們，以防你正在測試的瀏覽器沒有讀取代碼。以下是主要瀏覽器的所有供應商前綴的簡短列表：
-moz- ：Firefox
-webkit- ：Webkit瀏覽器，如Safari和Chrome
-o- ：歌劇
-ms- ： IE瀏覽器
請注意，根據幾周前的官方新聞稿，Opera也將很快在WebKit上構建他們的新桌面和移動瀏覽器，而不是他們當前的Presto渲染引擎。這意味著-o-供應商前綴將在某個時間點消失，只剩下三個主要前綴。