CSS3 基础知识、原理及与CSS的区别
CSS3 基础知识、原理及与CSS的区别
CSS3 基础知识
CSS3 是 Cascading Style Sheets 的第3个版本，是CSS技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案。
CSS3 主要模块
- 选择器：更强大的元素选择方式
- 盒模型：更灵活的布局控制
- 背景和边框：圆角、阴影、渐变等效果
- 文字效果：文字阴影、换行控制等
- 2D/3D转换：旋转、缩放、移动等
- 动画：过渡和关键帧动画
- 多列布局：创建多列文本布局
- 用户界面：调整大小、盒大小等
CSS3 与 CSS 的主要区别
| 特性 | CSS | CSS3 |
|---|---|---|
| 模块化 | 单一规范 | 分为多个独立模块 |
| 选择器 | 基础选择器 | 新增属性选择器、伪类等 |
| 圆角边框 | 不支持 | border-radius |
| 阴影 | 不支持 | box-shadow, text-shadow |
| 渐变 | 不支持 | linear-gradient, radial-gradient |
| 动画 | 不支持 | transition, animation |
| 媒体查询 | 不支持 | @media |
| 多背景 | 不支持 | 支持多个背景图像 |
| 弹性布局 | 不支持 | Flexbox |
| 网格布局 | 不支持 | Grid |
CSS3 核心原理
- 渐进增强：CSS3 设计允许浏览器逐步支持新特性，不支持的浏览器会优雅降级
- 硬件加速：某些CSS3特性(如transform)会使用GPU加速，提高性能
- 模块化设计：不同功能被划分为独立模块，可以单独开发和实现
- 响应式设计：媒体查询等功能为响应式设计提供了基础
CSS3 案例
1. 圆角边框 (border-radius)
.box {width: 200px;height: 100px;background-color: #3498db;border-radius: 10px; /* 四个角 */border-radius: 10px 20px 30px 40px; /* 左上 右上 右下 左下 */
}
2. 阴影效果 (box-shadow)
.card {width: 300px;padding: 20px;box-shadow: 0 4px 8px rgba(0,0,0,0.1);/* 水平偏移 垂直偏移 模糊半径 颜色 */
}
3. 渐变背景 (gradient)
.gradient-bg {background: linear-gradient(to right, #ff7e5f, #feb47b);/* 也可以使用径向渐变 radial-gradient */
}
4. 过渡效果 (transition)
.button {background: #2ecc71;transition: background 0.3s ease;
}
.button:hover {background: #27ae60;
}
5. 动画 (animation)
@keyframes bounce {0%, 100% { transform: translateY(0); }50% { transform: translateY(-20px); }
}.ball {animation: bounce 2s infinite;
}
6. 2D转换 (transform)
.element {transform: rotate(45deg) scale(1.2);/* 还可以使用 skew(), translate() 等 */
}
7. 媒体查询 (media query)
/* 当屏幕宽度小于600px时应用这些样式 */
@media (max-width: 600px) {.menu {display: none;}.mobile-menu {display: block;}
}
8. Flexbox 布局
.container {display: flex;justify-content: space-between;align-items: center;
}.item {flex: 1;
}
9. Grid 布局
.grid-container {display: grid;grid-template-columns: repeat(3, 1fr);gap: 20px;
}.grid-item {background: #eee;padding: 20px;
}
10. 多列布局
.multi-column {column-count: 3;column-gap: 20px;column-rule: 1px solid #ddd;
}
浏览器兼容性考虑
虽然CSS3提供了许多强大的功能，但在实际开发中需要考虑浏览器兼容性。可以使用以下方法：
-
前缀处理：使用Autoprefixer等工具自动添加浏览器前缀
.box {-webkit-transform: rotate(30deg);-moz-transform: rotate(30deg);-ms-transform: rotate(30deg);transform: rotate(30deg); } -
特性检测：使用@supports规则
@supports (display: grid) {/* 支持grid时的样式 */ } -
渐进增强：先确保基本功能可用，再添加CSS3增强效果
CSS3极大地丰富了网页的表现力，使得开发者能够创建更加丰富、动态的网页效果，同时保持代码的简洁性和可维护性。