css3的含義和新特性是什么

本篇內容主要講解“css3的含義和新特性是什么”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“css3的含義和新特性是什么”吧!

CSS3是CSS（層疊樣式表）技術的升級版本，指的是“層疊樣式表3級”，在CSS2.1的基礎上增加了很多強大的新功能，以幫助開發人員解決一些實際面臨的問題，并且不再需要非語義標簽、復雜的JavaScript腳本以及圖片。

本教程操作環境：windows7系統、CSS3版、Dell G3電腦。

CSS3是CSS（層疊樣式表）技術的升級版本，指的是“層疊樣式表3級”，于1999年開始制訂，2001 年 5 月 23 日，W3C完成了 CSS3 的工作草案，在該草案中制定了 CSS3 發展路線圖，路線圖詳細列出了所有模塊，并計劃在未來將逐步進行規范。

CSS3 是 CSS 規范的最新版本，在 CSS2.1 的基礎上增加了很多強大的新功能，以幫助開發人員解決一些實際面臨的問題，并且不再需要非語義標簽、復雜的 JavaScript 腳本以及圖片。例如，CSS3 支持圓角、多背景、透明度、陰影、動畫、圖表等功能。

CSS3 規范是分模塊的

CSS1 和 CSS2.1 都是單一的規范，其中 CSS1 主要定義了網頁對象的基本樣式，如字體、顏色、背景、邊框等，CSS2 添加了高級概念，如浮動、定位、高級選擇器（如子選擇器、相鄰選擇器和通用選擇器等）。

CSS演進的一個主要變化就是W3C決定將CSS3分成一系列模塊。瀏覽器廠商按CSS節奏快速創新，因此通過采用模塊方法，CSS3規范里的元素能以不同速度向前發展，因為不同的瀏覽器廠商只支持給定特性。但不同瀏覽器在不同時間支持不同特性，這也讓跨瀏覽器開發變得復雜。

CSS3 被劃分成了多個模塊，每個模塊都有自己的規范，這樣做的好處是：

• 整個 CSS3 的規范發布不會因為部分存在爭論而影響其他模塊的推進。

• 對于瀏覽器來說，可以根據需要，決定哪些 CSS 功能被支持。

• 對于 W3C 制定者而言，可以根據需要進行針對性的更新，從而使一個整體的規范更加靈活，并能夠及時修訂，這樣更容易擴展新的技術特定。

CSS3 新特性

CSS3 規范并不是完全另起爐灶，它集成了 CSS2.1 的部分內容，但在其基礎上進行了很多的增補與修訂。

與 CSS1、CSS2 相比，CSS3 進行了革命性的升級，而不僅限于局部功能的修訂和完善，盡管瀏覽器對 CSS3 諸多新特性的支持還不是很完善，但是它依然讓用戶看到了未來網頁樣式的發展方向和使命。

CSS3 的新特性非常多，這里簡單列舉被瀏覽器廣泛支持的實用特性。

1. 完善選擇器

CSS3 選擇器在 CSS2.1 的基礎上進行了增強，它允許設計師在標簽中指定特定的 HTML 元素，而不必使用多余的類、ID 或者 JavaScript 腳本。

如果希望設計干凈、輕量級的網頁標簽，希望結構與表現更好地分離，高級選擇器是非常有用的。他可以減少在標簽中增加大量 class 和 id 屬性的數量，并讓設計師更方便地維護樣式表。

2. 完善視覺效果

網頁中最常見的效果包括圓角、陰影、漸變背景、半透明、圖片邊框等。而這樣的視覺效果在 CSS 中都是依賴于設計師制作圖片或者 JavaScript 腳本來實現的。

CSS3 的一些新特性可以用來創建一些特殊的視覺效果，后面的章節將為大家展現這些新特性是如何實現這些視覺效果的。

3. 完善背景效果

如果說 CSS 中的背景給你帶來太多的限制，那么 CSS3 將帶來革命性的變化。

CSS3 不再局限于背景色、背景圖像的運用，新特性中添加了多個新的屬性值，如 background-origin、background-clip、background-size；此外，還可以在一個元素上設置多個背景圖片。

這樣，如果要設計比較復雜的頁面效果，就不再需要使用一些多余的標簽來輔助實現了。例如，要實現 CSS 中的滑動門效果，在 CSS 中基本上要添加 2、3 個額外的標簽來輔助實現，而 CSS3 中的這些新特性能夠在一個標簽中完成同樣的效果。

4. 完善盒模型

盒模型在 CSS 中是重中之重，CSS2 中的盒模型只能實現一些基本的功能，對于一些特殊的功能需要基于 JavaScript 來實現。而在CSS3中，這一點得到了很大的改善，設計師可以直接通過 CSS3 來實現。

例如，CSS3 中的彈性盒子，這個屬性將給大家引入一種全新的布局概念，能輕而易舉地實現各種布局，特別是在移動端的布局，它的功能更是強大。

5. 增強背景功能

CSS3 允許背景屬性設置多個屬性值，如 background-image、background-repeat、background-size、 background-position、background-origin、background-clip 等，這樣就可以在一個元素上添加多層背景圖片。如果要設計復雜的網頁效果（如圓角、背景重疊等），就不用為 HTML 文檔添加多個無用的標簽，以優化網頁文檔結構。

6. 增加陰影效果

陰影主要分為兩種：文本陰影（text-shadow）和盒子陰影（box-shadow）。

文本陰影在 CSS 中己經存在，但沒有得到廣泛運用。CSS3 延續了這個特性，并進行了新的定義，該屬性提供了一種新的跨瀏覽器方案，使文本看起來更醒目。

盒子陰影的實現在 CSS2 中就有點苦不堪言，為了實現這樣的效果，需要新增標簽、圖片，而且效果還不一定完美。CSS3 的 box-shadow 將打破這種局面，可以輕易地為任何元素添加盒子陰影。

7. 增加多列布局與彈性盒模型布局

CSS3 引入了幾個新的模塊，用于更方便地創建多列布局。

多列布局（Multi-column Layout）模塊描述如何像報紙、雜志那樣，把一個簡單的區塊拆分成多列。

彈性盒模型布局（Flexible Box Layout）模塊能讓區塊在水平、垂直方向對齊，能讓區塊自適應屏幕大小，相對于 CSS 的浮動布局、inline-block 布局、絕對定位布局來說，它顯得更加方便與靈活。

缺點是：這兩個模塊在一些瀏覽器中還不被支持，但隨著技術的發展，各主流瀏覽器會主動支持的。

8. 完善 Web 字體和 Web Font 圖標

瀏覽器對 Web 字體有諸多限制，Web Font 圖標對于設計師來說更奢侈。CSS3 重新引入 @font-face，對于設計師來說無疑是件好事。

@font-face 是鏈接服務器上的字體的一種方式，這些嵌入的字體能變成瀏覽器的安全字體，不再擔心用戶沒有這些字體而無法正常顯示的問題，從此告別用圖片代替特殊字體的設計時代。

9. 增強顏色和透明度功能

CSS3 顏色模塊的引入，實現了制作頁面效果時不再局限于 RGB 和十六進制兩種模式。CSS3 增加了 HSL、HSLA、RGBA 幾種新的顏色模式。在網頁設計中，能輕松實現使某個顏色變得再亮一點或者再暗一點。其中 HSLA 和 RGBA 還增加了透明通道，能輕松地改變任何一個元素的透明度。

另外，還可以使用 opacity 屬性來制作元素的透明度。從此制作透明度不再依賴圖片或者 JavaScript 腳本了。

10. 新增圓角與邊框功能

圓角是 CSS3 中使用最多的一個屬性，原因很簡單：圓角比直線更美觀，而且不會與設計產生任何沖突。與 CSS 制作圓角不同之處是，CSS3 無須添加任何標簽元素與圖片，也不需借用任何 JavaScript 腳本，一個屬性就能搞定。

對于邊框，在 CSS 中僅局限于對邊框的線型、粗細、顏色的設置，如果需要特殊的邊框效果，只能使用背景圖片來模仿。CSS3 的 border-image 屬性使元素邊框的樣式變得豐富起來，還可以使用該屬性實現類似 background 的效果，對邊框進行扭曲、拉伸和平鋪等。

11. 增加變形操作

在 CSS2 時代，讓某個元素變形是一個可望而不可即的想法，為了實現這樣的效果，需要寫大量的 JavaScript 代碼。CSS3 引進了一個變形屬性，可以在 2D 或者 3D 空間里操作網頁對象的位置和形狀，例如旋轉、扭曲、縮放或者移位。

12. 增加動畫和交互效果

CSS3 過渡（transition）特性能在網頁制作中實現一些簡單的動畫效果，讓某些效果變得更具流線性、平滑性。

而 CSS3 動畫（animation）特性能夠實現更復雜的樣式變化，以及一些交互效果，而不需要使用任何 Flash 或 JavaScript 腳本代碼。

13. 完善媒體特性與 Responsive 布局

CSS3 媒體特性可以實現一種響應式（Responsive）布局，使布局可以根據用戶的顯示終端或設備特征選擇對應的樣式文件，從而在不同的顯示分辨率或設備下具有不同的布局效果，特別是在移動端上的實現更是一種理想的做法。

到此，相信大家對“css3的含義和新特性是什么”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！