CSS3用户界面完全指南：从盒模型到动效的现代UI实践

CSS3 用户界面，很多人第一反应就是圆角、阴影、渐变和动画这些“看得见的甜点”。这话对了一半。视觉效果确实是 CSS3 最常见的名片，但如果只盯住这些，你会忽略 CSS3 里另一大半真正决定界面好不好用的能力：盒模型怎么算、焦点怎么显示、光标怎么反馈、文本怎么选中、布局怎么排、状态怎么表达。我做了几年前端，越来越觉得“CSS3 用户界面”不是一个演示用的标题，而是一整套关于容器、状态、布局、反馈的设计语言。

这篇文章不打算给你背规范，我按自己平时做界面的真实顺序讲一遍：先说明 CSS3 用户界面到底覆盖哪些东西，再逐个拆解盒模型、外观、交互状态、布局、动效、伪类和伪元素，最后用一个纯 CSS3 的卡片式用户界面把前面内容串起来。适合刚接触 CSS3 的前端新人，也适合已经会用 Flexbox 但始终没系统梳理过 UI 模块的中级开发者。如果你是因为“CSS3伪静态”这个词搜进来的，我后面也会专门解释，耐心看到第六节。

1. CSS3 用户界面到底管什么：从“美化”到“可用”的视野切换

1.1 为什么 CSS3 不是“一堆新属性”那么简单

CSS2.1 时代做界面，我们的工具箱很朴素：边框、内外边距、背景色、浮动、定位，再加上几张切好的背景图。想要圆角就得切圆角图，想要渐变就得切渐变图，想要阴影基本靠想象力。那个阶段的 CSS 更多是在“画盒子”，而不是在“塑造界面体验”。

CSS3 的出现方式很特别。它没有像 CSS2.1 那样发布成一个完整的大版本，而是拆成了几十个独立的模块：选择器、背景边框、盒模型、过渡、动画、弹性布局、栅格布局，以及今天要聊的“CSS Basic User Interface Module Level 3”，翻译过来就是“CSS 基础用户界面模块”。这个模块管的是界面上最容易被忽略、但天天在用的东西：box-sizing 怎么计算宽高、outline 焦点框怎么画、cursor 光标长什么样、user-select 文本能不能选中、caret-color 输入框光标颜色、resize 控件能不能拖动、appearance 原生控件外观如何重置。

换句话说，CSS3 用户界面不是某一个属性，而是一整套“关注用户如何与界面交互”的规范集合。

1.2 UI 模块与周边模块的分工

我在实际开发中会把它分成四层看：

• 第一层：容器表现。包括盒模型、尺寸计算、溢出控制、边框背景。涉及 box-sizing、overflow、text-overflow、border-radius、box-shadow、background 系等。
• 第二层：界面状态。包括鼠标光标、键盘焦点、文本选中、输入框光标、缩放行为。涉及 cursor、outline、outline-offset、user-select、caret-color、resize。
• 第三层：布局结构。包括一维排列和二维排列。涉及 Flexbox、Grid、gap 等。
• 第四层：反馈交互。包括状态切换、视觉变化、动画过程。涉及 transition、transform、animation、渐变、以及伪类和伪元素。

很多老前端习惯把 CSS3 等同于第四层，这没有问题，但如果只停留在第四层，遇到“按钮文字在带 padding 的容器里为什么会溢出”“为什么去掉 outline 以后键盘用户找不到焦点”“Select 样式在不同浏览器下为什么长得不一样”这些问题时就会很被动。CSS3 用户界面是一套组合拳，不是某一个特效。

1.3 常见理解误区对照

把这个视野切换过来，后面每一项学习都会更有目的性。

2. 盒模型与外观：先把容器做对

2.1 box-sizing 是布局的第一颗定心丸

CSS3 用户界面模块里，box-sizing 是优先级最高的属性之一，因为它直接决定了你写的 width 到底包不包含 padding 和 border。

默认值是 content-box，也就是说你写 width: 200px，这个 200px 只算内容区，再加 20px padding和 2px border，实际占位会变成 244px。这在做分栏、栅格、卡片时，经常导致“明明写好了宽度，布局却溢出”。我在早期项目里就在这个问题上吃过亏：一个两栏布局，左栏 30%，右栏 70%，结果两边各自加了 padding 以后，总宽度超过 100%，右栏被挤到下一行，页面突然多出横向滚动条。

解决办法非常粗暴，但非常有效：

css复制*,
*::before,
*::after {
  box-sizing: border-box;
}

把全局所有元素的宽度计算方式改成包含 padding 和 border，布局宽度会更符合直觉。你写 100% 就是真的占满父容器，不会再被内边距顶出去。这个规则在 reset 样式里属于必加项，虽然它是 UI 模块里的“基础参数”，但影响远大于很多花哨属性。

2.2 圆角、阴影与渐变：容器质感的三个来源

容器做对尺寸之后，接下来就是让容器长得像现代 UI。

border-radius 的取值逻辑很多人会记混。border-radius: 8px 是四个角都 8px；要细分可以写 border-radius: 8px 8px 0 0，顺序是左上、右上、右下、左下。做卡片头部的圆角时，这个顺序非常常用。如果是圆形头像，直接写 border-radius: 50% 就好，但注意如果头像容器本身不是正方形，50% 会变成椭圆，所以要先保证宽高一致。

box-shadow 是分层级的关键。它支持一个阴影和多个阴影的组合，比如：

css复制.card {
  box-shadow:
    0 1px 2px rgba(16, 24, 40, 0.04),
    0 4px 8px rgba(16, 24, 40, 0.06);
}

这是一个很实用的双层阴影技巧：第一层负责紧贴卡片的细小轮廓，第二层负责悬空的高度感。阴影不是越黑越好，现代界面通常用低透明度、偏冷或偏暖的暗色，比纯黑 rgba(0, 0, 0, 0.2) 干净很多。如果你嫌写 rgba 麻烦，可以先确定主色调，然后用 color-mix() 混合出阴影色，但这是更新一点的 CSS，需要在兼容性允许时再上。

渐变色能让容器摆脱“纯色块”的单调。线性渐变最常用：

css复制.cover {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%);
}

数值和百分号表示颜色停止位置。不太会设计的人可以记住一个简单规律：渐变相邻两种颜色的色相不要差太远，135 度斜向渐变比垂直渐变更有动感。径向渐变适合做光晕背景，锥形渐变适合做仪表盘类的色环，日常 UI 里线性渐变用了八成的场景。

2.3 appearance：原生控件的外观从