那些让界面轻轻发光的 CSS 细节

界面的精致感经常来自很小的地方：光标移上去时，卡片只抬起一点；用 Tab 键导航时，焦点始终清晰；系统设置减少动态效果后，页面也懂得安静下来。这些细节不抢眼，却决定了一个界面是否好用。

一次只强调一个动作

悬停效果的任务是提示“这里可以点击”，不必同时旋转、放大、变色。下面这张卡片只改变纵向位置和阴影，过渡时间保持在较短的范围。

<a class="note-card" href="/archive/">
  <span>继续探索</span>
  <h2>打开文章归档 →</h2>
</a>
<style>
  .note-card {
    display: block;
    padding: 2rem;
    color: #29243a;
    background: #f1ecff;
    border-radius: 1.5rem;
    text-decoration: none;
    transition: transform 180ms ease, box-shadow 180ms ease;
  }
  @media (hover: hover) {
    .note-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 32px #29243a12;
    }
  }
  .note-card:focus-visible {
    outline: 3px solid #7451c8;
    outline-offset: 5px;
  }
  @media (prefers-reduced-motion: reduce) {
    .note-card { transition: none; }
    .note-card:hover { transform: none; }
  }
</style>

把这段内容保存到 HTML 文件就能看到效果。真正放进项目时，把链接换成对应页面，并让整个卡片只承担一个导航动作，避免在链接里嵌套按钮。

焦点不是需要藏起来的瑕疵

鼠标用户知道指针在哪里，键盘用户则依靠焦点样式判断下一次按下 Enter 会发生什么。直接写 outline: none，相当于拿走了这份反馈。

:focus-visible 可以让键盘导航得到明确的轮廓，同时不必在每一次鼠标点击后都显示它。颜色应与卡片和背景有足够区别，轮廓外扩几像素，也能避免紧贴文字造成拥挤。

留意看不见的使用条件

触屏没有稳定的悬停状态，所以悬停动画放进 hover: hover 查询里。减少动态效果的设置，也应当得到尊重，而不是仅仅把动画从一秒缩短到半秒。

最后做一次很朴素的检查：放下鼠标，从页面顶部一直按 Tab。顺序是否符合阅读逻辑，所有交互是否可到达，焦点是否被容器裁掉。往往只需要几分钟，就能发现视觉稿里看不见的问题。