前端Wiki/CSS3/基础/初识 CSS3

CSS3 是什么

CSS3 是 CSS 规范的第三个大版本，从 2000 年代开始逐步落地。它带来了一场视觉革命：圆角、阴影、渐变、过渡、动画、变形、自定义字体……在这之前，这些效果要么做不出来，要么必须切图片、写大量 hack，甚至依赖 Flash。

CSS3 让「表现层」真正轻量起来：

以前做一个圆角按钮要切四张角的图片，现在一行 border-radius 搞定；
以前动画要靠 JS 逐帧改样式，现在 @keyframes 声明一下浏览器自动播放，而且由合成器渲染，性能更好；
以前适配手机端很难，媒体查询让同一份 HTML 适配所有屏幕成为标准做法。

更重要的是，CSS3 把大量「视觉工作」从 JS 手里接了过来。能用 CSS 实现的效果优先用 CSS——代码更少、浏览器可优化、交互动效也更流畅。

本节要点CSS3 的关键词：圆角、阴影、渐变、过渡、动画、变换、媒体查询；能交给 CSS 的视觉效果尽量不写 JS；这些特性是现代前端视觉体系的地基。

CSS

<!-- 一行 CSS3 对比老式切图的例子 -->
<style>
  .btn {
    display: inline-block;
    padding: 10px 24px;
    border-radius: 20px;            /* 圆角：老方法要切图 */
    background: linear-gradient(#5bc0de, #31a3bd); /* 渐变背景 */
    box-shadow: 0 2px 6px rgba(0,0,0,.3);          /* 阴影 */
    color: #fff;
    transition: transform .2s;      /* 过渡 */
  }
  .btn:hover { transform: scale(1.05); } /* 悬停放大 */
</style>
<a class="btn">纯 CSS3 按钮</a>

🔗 相关词条border-radius @keyframes keyframes HTML 媒体查询 CSS 浏览器 JS

📚 推荐阅读

移动前端开发经验指南万象云档

YY UED 前端规范指南万象云档

优达学城前端样式指南万象云档

Element Plus v2.2 组件库教程万象云档

ECharts 图表教程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读