CSS（層疊樣式表）與CSS3（CSS的第三個版本）的區別主要體現在功能擴展、語法特性以及應用場景等方面。以下是兩者的核心對比：

一、核心概念與版本關系

1. CSS：是基礎樣式表語言，用于分離網頁內容與樣式，最初發布于1996年（CSS1），后續補充了CSS2（1998年），但功能較為基礎，主要關注簡單的布局和樣式。

2. CSS3：是CSS的最新版本（2005年起制定），向下兼容CSS2，并引入模塊化設計（如Flexbox、Grid、動畫等），增強了樣式控制能力與開發效率。

二、功能與特性對比

對比維度	CSS	CSS3
選擇器	基礎選擇器（元素、類、ID）	新增屬性選擇器、偽類（:nth-child、:valid）、偽元素（::before、::after）及通用兄弟選擇器（~）
盒模型	僅支持content-box（寬度不含內邊距和邊框）	新增box-sizing: border-box，允許寬度包含內邊距和邊框，簡化布局計算
布局	傳統流布局（依賴float、clear）	引入彈性盒模型（Flexbox）和網格布局（Grid），實現二維靈活布局與響應式設計
視覺效果	基礎邊框、背景色	支持漸變（linear-gradient）、圓角（border-radius）、陰影（box-shadow）、多背景（background-image多重定義）
動畫與交互	無原生動畫支持	新增過渡（transition）、動畫（animation+@keyframes）、變換（transform）
響應式設計	需手動調整或依賴JavaScript	支持媒體查詢（@media）、視口單位（vw, vh），直接適配不同設備
顏色與字體	基礎顏色（命名、十六進制）、有限字體	支持透明度（rgba、hsla）、自定義字體（@font-face）
其他特性	無模塊化設計	模塊化拆分（如Flexbox、Grid獨立規范），支持CSS變量、多列布局（column-count）等

三、性能與兼容性

1. 性能：CSS3通過硬件加速（如動畫、變換）提升了渲染效率，減少了對JavaScript的依賴。

2. 兼容性：CSS3特性需瀏覽器支持，早期需添加前綴（如-webkit-、-moz-），但現代瀏覽器已普遍支持。

四、實際應用差異

1. 代碼示例：

   • CSS：傳統圓角需圖片或JavaScript，布局依賴float。

     .box {width: 200px;padding: 10px;border: 5px solid #000;/* 傳統布局 */float: left;
     }
     

   • CSS3：直接使用圓角、陰影，布局用Flexbox。

     .box {width: 200px;padding: 10px;border-radius: 10px;box-shadow: 2px 2px 5px rgba(0,0,0,0.3);/* Flex布局 */display: flex;justify-content: center;
     }
     

2. 維護性：CSS3的模塊化設計使得樣式更易管理，支持漸進增強（舊瀏覽器降級顯示，新瀏覽器啟用新特性）。

五、總結

1. CSS：是樣式表的基礎，適用于簡單頁面的樣式控制。

2. CSS3：在CSS基礎上大幅增加了布局、動畫、交互等能力，是現代網頁設計的標配，但需注意瀏覽器兼容性。

兩者本質是繼承關系，CSS3并非完全顛覆CSS，而是擴展其功能并提升開發效率。