CSS和CSS3区别对比

CSS（层叠样式表）与CSS3（CSS的第三个版本）的区别主要体现在功能扩展、语法特性以及应用场景等方面。以下是两者的核心对比：

一、核心概念与版本关系

CSS：是基础样式表语言，用于分离网页内容与样式，最初发布于1996年（CSS1），后续补充了CSS2（1998年），但功能较为基础，主要关注简单的布局和样式。
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`）等

三、性能与兼容性

性能：CSS3通过硬件加速（如动画、变换）提升了渲染效率，减少了对JavaScript的依赖。
兼容性 ：CSS3特性需浏览器支持，早期需添加前缀（如-webkit-、-moz-），但现代浏览器已普遍支持。

四、实际应用差异

代码示例：

CSS ：传统圆角需图片或JavaScript，布局依赖float。

css 复制代码

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

CSS3 ：直接使用圆角、阴影，布局用Flexbox。

css 复制代码

.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;
}

维护性：CSS3的模块化设计使得样式更易管理，支持渐进增强（旧浏览器降级显示，新浏览器启用新特性）。

五、总结

CSS：是样式表的基础，适用于简单页面的样式控制。
CSS3：在CSS基础上大幅增加了布局、动画、交互等能力，是现代网页设计的标配，但需注意浏览器兼容性。

两者本质是继承关系，CSS3并非完全颠覆CSS，而是扩展其功能并提升开发效率。