CSS3 新特性概览

CSS3 不是一次发布的大版本，而是一系列模块的集合，从 2011 年起逐步落地。它带来的核心变化是：圆角阴影、渐变、变换、动画、弹性布局（Flexbox）和网格布局（Grid），这些能力让纯 CSS 能做以前必须靠图片或 JavaScript 才能实现的效果。

学习 CSS3 不需要等到"全部学完"，浏览器已经原生支持绝大部分特性，写出来就能看到效果。

CSS3 主要模块

• 边框与背景：圆角 border-radius、阴影 box-shadow、多背景
• 渐变：linear-gradient、radial-gradient
• 变换：transform 实现平移、旋转、缩放
• 过渡与动画：transition、@keyframes
• 布局：Flexbox、Grid

代码示例

.card {
    border-radius: 12px;               /* 圆角 */
    box-shadow: 0 4px 12px rgba(0,0,0,.12);  /* 阴影 */
    background: linear-gradient(135deg, #7cb342, #558b2f);  /* 渐变 */
    transition: transform .3s;         /* 过渡 */
}
.card:hover {
    transform: translateY(-4px) scale(1.02);  /* 变换 */
}