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，而是扩展其功能并提升开发效率。