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：原生控件的外观从哪里开始暴走

form 控件是用户界面里最容易被忽略的一块。默认的 input、select、checkbox、radio 在各个浏览器里长得完全不一样，问题就出在 appearance 属性上。

appearance: none 可以去掉很多原生控件自带的默认外观，然后再用普通 CSS 重新绘制。比如自定义 checkbox 的经典写法：

css复制input[type="checkbox"] {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #cbd5e1;
  border-radius: 4px;
  background: #fff;
  transition: background 0.2s, border-color 0.2s;
}

input[type="checkbox"]:checked {
  background: #6366f1;
  border-color: #6366f1;
}

这里需要注意：appearance 涉及兼容性时，通常需要同时写 -webkit-appearance: none 和 appearance: none。而且不是所有控件都适合一刀切去掉外观，比如 select 去掉默认箭头后，如果自己没有补一个下拉箭头，用户会突然分不清那是一个按钮还是一个选择框。对这种情况，我一般保留原生箭头，或者用背景图补一个自定义箭头。

3. 光标、焦点、选中态：容易被忽略的交互细节

3.1 cursor：鼠标反馈的语义化

cursor 是 CSS3 用户界面里最直白的交互反馈属性，但很多人要么不写，要么乱写。

不需要给所有元素都加 cursor: pointer。真正能点击的交互控件，比如链接、按钮、下拉框，鼠标放上去应该是 pointer；文本输入框应该是 text；可拖拽的组件应该是 move 或者 grab；禁用状态应该是 not-allowed。如果给普通标题也加 pointer，用户会误以为它可以点击，结果点下去没反应，反馈就失真了。

自定义光标场景也真实存在，比如图片编辑器的取色器，可以用 cursor: url('cursor.svg') 4 4, auto; 指定热点位置。但日常业务里不要滥用，自定义光标文件加载失败时，最好有 auto 兜底。

3.2 outline：焦点框不是“丑框”，是键盘用户的导航线

很多前端拿到设计稿后做的第一件事是把按钮的 outline 去掉，理由是不会出现那个蓝色的焦点框。我早期也这么干过，后来收到过用户反馈：键盘 Tab 到按钮上时，根本不知道自己停在哪里。

outline 和 border 最大的区别是：outline 不占布局空间，也不会影响盒子尺寸。它画在元素的边框之外，所以去掉它并不会让布局“更好看”，只会让键盘用户失去方向。

更好的做法是保留焦点样式，但让它更符合设计语言：

css复制button:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}

:focus-visible 的意思是：只有当用户通过键盘等非鼠标方式聚焦到元素时才显示焦点框，鼠标点击时不显示。这个选择特别贴合现代 UI：既不会让鼠标用户看到多余外框，又能保证键盘用户有清晰焦点。手上有老项目还在用 :focus 一刀切去 outline 的，建议尽快换成这套写法。

3.3 user-select 与 caret-color：文本选择权和输入光标

user-select 控制用户能不能选中文本。比如 UI 里的标签、徽标、按钮文字，双击时通常不该被选中，因为那是操作对象，不是阅读内容：

css复制.badge {
  user-select: none;
  -webkit-user-select: none;
}

但要注意，正文内容不要设置成 user-select: none，否则用户复制不了你页面里的文字。曾经有人为了避免误触把整站正文设为不可选中，结果新闻网站的读者连标题都复制不了，体验非常糟糕。我的原则是：只有纯 UI 组件才关闭选中，内容区域永远保持可选中。

caret-color 在输入框和 contenteditable 区域里很实用。单行输入框的光标默认是黑色，如果输入框底色是深色，光标会看不清。把光标颜色调成和主题色一致，用户会明显感觉输入状态更清晰：

css复制input {
  caret-color: #6366f1;
}

另外，resize 属性也能控制 textarea 的缩放行为。默认 textarea 是 resize: both，很多表单因为右下角那个拖拽把手导致布局怪怪的，可以改成 resize: vertical，只允许上下调整高度，既保留用户自由度，又避免水平方向挤爆布局。

关于 CSS UI 规范里的 nav-up、nav-right、nav-down、nav-left 方向导航属性，我目前没有在实际项目里用过，浏览器支持也一般。真正做无障碍方向导航，主要靠合理的 DOM 顺序和焦点管理，这几个属性了解即可，不用优先投入。

4. Flexbox 与 Grid：界面骨架的两种思维

4.1 Flexbox：一维排列的万金油

现代界面九成以上是“一排排”或“一列列”组成的。Flexbox 就是为了解决一维排列而生。

先看一个最常见的导航栏：

css复制.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

这一小段代码做了三件事：项目在水平方向排成一行，垂直方向居中，左右间距靠 justify-content 拉开，项目之间的间距用 gap 控制。gap 属性是 CSS3 盒对齐规范里的重要成员，它比 margin 更省心，不用再担心最后一个元素多出多余间距。

Flexbox 最强大的地方在于弹性。某个子项用 flex: 1，它就能吞掉剩余空间；多个子项用 flex: 1，它们就可以等分宽度。这个机制在做输入框加按钮的组合、侧边栏加主内容区、列表项对齐时都非常顺手。flex 是 flex-grow、flex-shrink、flex-basis 的缩写，flex: 1 等于 flex: 1 1 0%，意思是允许放大、允许缩小、基准尺寸从 0 开始算。理解这一点之后，再看到 flex 布局中“为什么这个元素撑不满”就不会懵。

4.2 Grid：二维布局的系统规划

Flexbox 处理的是“一行或一列”，Grid 处理的是“同时管行和列”。当你需要做一个卡片列表，并且希望卡片自动换行、保持等宽、列数随屏幕变化时，Grid 是更直接的选择：

css复制.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

这句话解释一下：auto-fit 表示自动塞满一行能放下的列数，minmax(240px, 1fr) 表示每列最小 240px，最大可以占满剩余空间，gap: 16px 负责列和行的间距。结果就是，屏幕宽就多排几列，屏幕窄就自动降为单列。这个组合是我个人做响应式界面时最常用的“免媒体查询”方案。

如果界面有明显的区域划分，比如后台管理页的头部、侧边栏、内容区、底部，可以用 grid-template-areas 给区域起名字：

css复制.layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 64px 1fr 48px;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

布局结构变得一目了然。需要调整页面骨架时，只需改 grid-template-areas，不必动 HTML，也减少了结构变更带来的意外。

4.3 怎么选：不是“Grid 更强就全用 Grid”

我见过有人一上来就全站 Grid，结果一个简单按钮组还要写 grid-template-columns，反而绕远路。选择标准我总结成一句话：一维排列用 Flex，二维排列用 Grid，两者可以嵌套。

• 导航栏、按钮组、标签列表、单行提示：Flexbox。
• 卡片墙、仪表盘、后台布局、需要同时控制行和列的表单：Grid。
• 一个复杂卡片内部：整体用 Flex 分列，内部标签区再用 Flex，真正需要行列对齐时才用 Grid。

Flex 和 Grid 的组合，让 CSS3 用户界面从“块状堆叠”变成了“系统排列”，这也是现代网页看起来整齐的重要原因。

5. transition 与 animation：让界面反馈“有过程”

5.1 transition：状态变化的润滑剂

界面上最常见的反馈是悬停、点击、聚焦。如果没有过渡，鼠标移上去时状态瞬间变化，会显得很生硬；加一个 transition，就让人觉得界面“活了”。

css复制.btn {
  background: #6366f1;
  transform: translateY(0);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
}

transition 的四个要素：过渡哪些属性、持续多久、缓动函数、延迟多久。transition: all 0.3s 虽然省事，但性能不好，而且会把一些你不想过渡的属性也带上。更稳妥的做法是明确列出要过渡的属性，比如上面的 transform 和 box-shadow。

缓动函数也要会挑。ease 是默认值，适合绝大多数交互；linear 适合颜色或透明度这类不希望有加速感的场景；cubic-bezier() 可以自定义节奏。真实项目里不需要背曲线参数，只要记住：进入状态的动画可以快一点，退出状态的动画可以稍柔一点，整体别超过 300ms 太多，否则用户会明显觉得卡顿。

5.2 animation：主动触发的状态机

transition 需要状态变化来触发，animation 则不需要。它通过 @keyframes 定义一套动画过程，元素一出现就开始按帧执行。

举一个日常最典型的加载动画：

css复制.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #e2e8f0;
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

animation 缩写里依次可以写动画名、时长、缓动函数、延迟、播放次数、方向、填充模式。@keyframes 中用 from/to 表示起点和终点，也可以用百分比定义多个关键帧，比如 0%、50%、100% 分别设定不同颜色或位移，做多段动画。

5.3 动效细节：别让反馈变成负担

CSS 动画的性能关键在于尽量只改变 transform 和 opacity。浏览器对这两个属性的处理可以直接交给合成器，不需要重新计算布局和绘制。相对地，动画 width、height、top、left 会触发整棵布局树的计算，在低端设备上很容易掉帧。

我自己的动效检查习惯是：能在一个元素上完成的，不用两个元素交叉变；能用 transform 做的位移，不用 margin-top；能用 opacity 做的淡入淡出，不用 display 控制。display: none 到 block 无法平滑过渡，但你可以先让元素保持占位，再用 opacity 过渡；实在要让元素完全消失，可以在过渡结束后用 visibility 切换。

动效还要尊重用户的系统偏好。有些用户会因为眩晕等健康原因关闭界面动画，CSS 里可以用 prefers-reduced-motion 来适配：

css复制@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

这个媒体查询不是形式主义。别人愿意关动画，说明动画可能真的影响到了他的使用，尊重这一点，才是专业界面该有的态度。

6. 伪类与伪元素：界面上的“状态”和“结构”（顺带说说“伪静态”）

6.1 伪类：给状态贴上条件标签

伪类选择器是 CSS3 用户界面最灵活的“状态机”。它不需要 JS 去给元素添加 class，只要元素处于某种条件，样式就自动生效。

最基本的交互三兄弟是 :hover、:focus、:active。:hover 是鼠标悬停，:focus 是键盘或脚本聚焦，:active 是元素被激活的瞬间。做按钮时三者经常一起出现：

css复制.btn:hover {
  transform: translateY(-2px);
}

.btn:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}

.btn:active {
  transform: translateY(0);
}

实际场景里还有几个非常高频：:checked 控制 checkbox 和 radio 的选中态，:disabled 控制禁用态，:placeholder-shown 判断输入框是否显示占位文本，:focus-within 可以在“容器内部的任意子元素聚焦时”让整个容器高亮。比如表单卡片内某个输入框聚焦时，让卡片边框变色：

css复制.form-card:focus-within {
  border-color: #6366f1;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

这个效果在过去必须用 JS 监听 focus/blur 才能实现，现在一个伪类就搞定了。

结构化伪类里，:nth-child、:not、:is 也是日常高频。:not(:last-child) 可以在列表里排除最后一个元素，从而只给前面的元素加下边距，比用“最后一个元素去掉 margin”更符合直觉。:is() 可以把一组选择器压缩成一个，比如 :is(.header, .footer) .title 表示所有 .title 只要在 .header 或 .footer 内就匹配，能显著减少重复选择器。

6.2 伪元素：让界面长出额外的结构

伪元素最常用的是 ::before 和 ::after。它们可以在元素内容的前后插入一段“虚拟内容”，用来做装饰图标、小圆点、提示线等，不需要为这些视觉元素额外写 HTML span。

一个实用的例子：标签徽标。假设界面里有个需要“推荐”的小角标，HTML 里不想多包一层：

css复制.card::after {
  content: "推荐";
  position: absolute;
  top: 12px;
  right: 12px;
  background: #ec4899;
  color: #fff;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
}

伪元素的 content 是必须写的，即使内容为空也要写 content: ""，否则伪元素不会显示。另外，伪元素默认是 inline 类型，想要设置宽高和 padding，需要先转成 inline-block 或 block。

伪元素也能承担一些复杂视觉，比如用 ::before 做卡片顶部的高光条、用 ::after 做按钮后的箭头，甚至是用两个伪元素配合做出一个“加载中”的旋钮。总体上它们非常适合装饰性内容，但不建议把语义化文本塞进 content，因为屏幕阅读器对伪元素内容的朗读支持并不统一，真正的文字内容还是要写在 HTML 里。

6.3 澄清“CSS3伪静态”：搜错词不等于走错路

如果你是因为“CSS3伪静态”这几个字进来的，我帮你把这个词拆一下。

CSS3 里没有叫“伪静态”的东西。我们常用的“伪类”和“伪元素”是 CSS 选择器里的概念，它们会选中某些状态或生成某些虚拟元素；“伪静态”则是服务器端将动态网址改写成看起来像静态网址的技术，比如把 article.php?id=1 变成 article/1.html，处理这种改写通常需要配置服务器或框架的路由规则，和 CSS 完全是两码事。

这两个词之所以会混在一起，很大概率是把“伪类/伪元素”记成了“伪静态”。如果你原本想学的是 CSS3 里面让界面状态丰富起来的选择器，那你在本节的收获就是对的：伪类管状态，伪元素管结构，它们是 CSS3 用户界面里不可或缺的一部分。

7. 实战案例：纯 CSS3 做一张现代用户卡片

理论讲再多，不如来一个能直接抄作业的案例。下面我用纯 CSS3 实现一个现代用户卡片，包含封面、头像、姓名、介绍、标签、进度条和操作按钮，不写一行 JS。

7.1 目标界面与 HTML 结构

界面要表达的信息是：一个用户卡片，封面显示渐变色，头像压在封面底部，下方是名字和简介，标签区展示技能标签，进度条表示学习完成度，两个按钮提供“关注”和“私信”操作。整个卡片可以放在网格布局里，适应不同屏幕宽度。

HTML 结构尽量语义化，额外装饰层用伪元素处理：

html复制<div class="card">
  <div class="card-cover"></div>
  <div class="card-body">
    <div class="avatar"></div>
    <h2 class="name">林一</h2>
    <p class="bio">前端开发，喜欢研究 CSS3 用户界面。</p>
    <ul class="tags">
      <li>CSS3</li>
      <li>UI</li>
      <li>前端</li>
    </ul>
    <div class="progress">
      <span class="progress-bar" style="width: 72%"></span>
    </div>
    <div class="actions">
      <button class="btn btn-primary">关注</button>
      <button class="btn btn-ghost">私信</button>
    </div>
  </div>
</div>

7.2 核心 CSS3 实现

先给容器和封面加圆角、阴影、渐变：

css复制.card {
  max-width: 320px;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 16px rgba(16, 24, 40, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 8px rgba(16, 24, 40, 0.06), 0 16px 24px rgba(16, 24, 40, 0.1);
}

.card-cover {
  height: 96px;
  background: linear-gradient(135deg, #6366f1, #a855f7);
}

头像需要压住卡片封面与正文之间的分界，我用负 margin 实现：

css复制.avatar {
  width: 64px;
  height: 64px;
  margin-top: -32px;
  margin-left: 16px;
  border-radius: 50%;
  border: 4px solid #fff;
  background: linear-gradient(135deg, #34d399, #22d3ee);
}

这里的负 margin 是关键，让头像向上偏移 32px，正好骑在封面和正文的交界处，再用白色边框制造“压住背景”的效果。这个手法在社交类 UI 里很常见。

标签区用 Flexbox，配合伪类设置最后一个标签不要右边距：

css复制.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  list-style: none;
}

.tags li {
  padding: 4px 10px;
  font-size: 12px;
  background: #f1f5f9;
  border-radius: 999px;
  color: #475569;
}

进度条用两层结构，外层是灰色轨道，内层是彩色进度条：

css复制.progress {
  height: 8px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
}

.progress-bar {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #6366f1, #a855f7);
}

按钮用 Flexbox 排成双列，主按钮和幽灵按钮形成对比：

css复制.actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.btn {
  flex: 1;
  padding: 8px 12px;
  border-radius: 8px;
  border: 0;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}

.btn-primary {
  background: #6366f1;
  color: #fff;
}

.btn-primary:hover {
  background: #4f46e5;
}

.btn-ghost {
  background: transparent;
  border: 1px solid #cbd5e1;
  color: #475569;
}

.btn-ghost:hover {
  background: #f1f5f9;
}

.btn:active {
  transform: scale(0.97);
}

最后把卡片放到响应式网格里：

css复制.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

这一段代码里几乎没有 JS 参与，所有视觉反馈全靠 CSS3 完成。

7.3 案例中每个属性解决什么问题

8. 兼容性、性能和无障碍：CSS3 UI 落地的最后一道坎

8.1 性能：不该为了视觉效果牺牲响应速度

CSS3 特效最容易出现的问题是“看起来很美，用起来很卡”。我在项目里见过一个详情页，总共十几个卡片，每张卡片都有大范围 blur 滤镜和动态阴影。在现代电脑上还行，换到中低端手机，滚一屏都掉帧。

优先优化的方向集中在三点。

第一，避免随处使用 backdrop-filter。它会把元素背后的内容实时模糊，浏览器处理成本很高。如果只是想做一个半透明毛玻璃头部，可以把背景做成一整块半透明色，再用一个极小的重复模糊背景图，兼容性和性能都更好。

第二，will-change 不要乱加。will-change: transform 只是提前告诉浏览器某个元素会变化，让浏览器提前做合成准备。它确实能优化动画，但加太多会占用 GPU 内存，反而更卡。我只在真正要动画的元素上使用，而且动画结束后会找机会移除。

第三，过度使用 box-shadow 也会产生大量绘制区域。多层阴影虽然好看，但手机端不宜过多。解决方案是把阴影的重叠部分合并，或者用伪元素模拟投影，减少绘制层次。

8.2 兼容性：现代 CSS3 也要看运行环境

CSS3 经历过很长一段“前缀满天飞”的时期。现在大部分基础属性已经去掉前缀，但部分属性和较新语法仍需要加前缀或降级处理。

比较典型的几个：

• appearance 仍建议写 -webkit-appearance: none。
• user-select 仍建议写 -webkit-user-select: none。
• gap 在 Flexbox 里的支持已经很好，但老旧浏览器仍可能不认。
• aspect-ratio 这类新属性在老旧 WebView 里可能失效，布局前要评估用户设备。

处理兼容性，我的工具箱里最重要的不是 Autoprefixer，而是 @supports。它可以根据浏览器是否支持某条 CSS 来决定是否应用一段样式，非常适合做增强和降级：

css复制.card {
  display: block;
}

@supports (display: grid) {
  .card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
  }
}

不支持 Grid 的浏览器看到的是普通块级排列，不会崩塌；支持的浏览器直接进入现代布局。这种“渐进增强”思路比一上来就满屏 Grid 更稳妥。

另一个容易翻车的点是 HTML 里的中文换行。以前 UI 里经常出现长串数字或英文把容器撑破，CSS3 的 overflow-wrap: break-word 可以解决：

css复制.text {
  overflow-wrap: break-word;
}

这虽然不起眼，但在真实表单和详情页里特别重要。

8.3 可访问性：焦点可见、状态可感知、动效可关闭

很多人会把可访问性理解为“给图片加 alt”，但在 CSS3 用户界面里，可访问性更核心的问题在于状态是否能被感知。

第一，任何时候都不要直接删掉焦点框。如果你觉得默认的蓝色虚线不好看，就使用 :focus-visible 定义自己的焦点框。把键盘用户留在视觉盲区里，等于把他们挡在界面外面。

第二，只用颜色表达状态是不够的。比如一个标签从蓝色变成灰色表示“已禁用”，色盲用户可能完全看不出区别。这时候需要用 cursor: not-allowed、辅助文字、透明度变化等多通道并行的方式，让状态变化不只依赖颜色。

第三，动效必须是可控的。前面提到的 prefers-reduced-motion 要放在全局样式里，确保在系统开启“减少动效”时，界面不会继续播放大量动画。这不仅是性能优化，也是健康层面的关怀。

最后，颜色对比度不能只凭感觉。文本和背景的对比度至少达到 WCAG AA 标准，这也是 CSS3 UI 落地过程中最容易被设计稿忽略的一环。如果发现设计稿里浅灰文字在浅灰背景上几乎看不清，宁可调整样式，也不要照单全收。

我在实际项目里最深的体会是：CSS3 用户界面做的不是“把每个控件单独做好看”，而是把容器、状态、布局、反馈、可访问性串成一个整体。每一处细节都像一个微小的接口，用户感知到的“顺不顺眼”“顺不顺手”，就是这些接口层层协作的结果。希望这篇内容能帮你把零散的 CSS3 知识点连成一张网，下次做界面时，可以少一点试错，多一点从容。