正在加载...

CSS 用户界面

Optional Advanced 刚给一张照片加了镂空模板。本课是另一套工具：用户界面。你改的是指针、插入光标和原生控件外观。这里不给海报打洞，也不把文章拆成报纸栏。

直接回答

CSS 用户界面属性提示如何交互。cursor 选择鼠标形状（pointer、wait、help、not-allowed…）。resize 让角可拖——多半用在 textarea。outline 配 outline-offset 画出不占布局空间的焦点环（盒模型课已讲过 outline；这里强调键盘习惯）。user-select 可减少误选。caret-color 给闪烁插入条上色。appearance（以及 -webkit-appearance）可剥掉原生皮肤以便重做样式。焦点要看得见。别把整页变成无法选中的海报。

为什么不是遮罩也不是分栏

遮罩决定一个盒子的哪些像素还看得见。多列切开一条文本流。界面属性两样都不做。宽高通常不变，除非用了 resize。滤镜和 mask-image 仍属于画面。这里问的是：「看起来能点吗？能打字吗？能把盒子拉大吗？键盘用户看得到自己在哪吗？」

cursor —— 说真话

cursor 是承诺。pointer 表示「可以点」。用在真正的按钮和链接。不要给什么也不做的标题加小手。

Cursor map for honest controls

css 
a.nav-link,
button.save {
cursor: pointer;
}

button[disabled] {
cursor: not-allowed;
}

.help-hint {
cursor: help;
}

.busy-panel {
cursor: wait;
}

default 是箭头。text 是可选文字上的 I 形光标。grab / grabbing 适合拖动手柄。自定义 url(...) 光标要小，并始终写回退关键字。骗人的光标比没有更糟：人去点口号，什么也不发生。

resize —— 拉大盒子，不是整页布局

resize 作用在能溢出的盒子上。日常用法是备注框：

Resize a textarea

css 
textarea.notes {
min-height: 6rem;
min-width: 16rem;
max-width: 100%;
resize: vertical;
overflow: auto;
}

取值：none、both、horizontal、vertical。搭配非 visible 的 overflow，否则手柄可能不出现。别给每张卡片洒 resize: both。min-height / max-width 防止字段塌掉或撑爆。

作为焦点环的 outline

盒模型课里 outline 画在边框外侧且不占空间。在界面工具箱里，你为键盘焦点保留这圈——常用 :focus-visible，避免鼠标每次点击都套框：

Focus outline with offset

css 
button.save:focus-visible {
outline: 3px solid #2563eb;
outline-offset: 3px;
}

button.save:focus:not(:focus-visible) {
outline: none;
}

不要全局 *:focus { outline: none; }，除非每个控件都有同样清楚的替代。outline-offset 把环推离边缘，邻居不跟着变大。这不是 border（会改尺寸），也不是给按钮标签做遮罩渐隐。

user-select —— 少误选

选择是功能。只在双击不该刷蓝的地方关掉——工具条标签、拖拽碎片——不是整篇文章。

Limit selection on chrome, not prose

css 
.toolbar-label {
user-select: none;
}

article.body {
user-select: text;
}

none 禁止高亮。text 是可读默认。all 一点就选中整个元素。旧 WebKit 仍可能要 -webkit-user-select。法律文字、价格、必须复制的报错不要禁选。

caret-color —— 给插入条上色

插入条是输入框里闪烁的竖线。跟品牌对齐，不要藏起来：

Caret color in a field

css 
input.email,
textarea.notes {
caret-color: #0f766e;
color: #0f172a;
}

caret-color: auto 跟随文字颜色。用 caret-color: transparent「图干净」是陷阱。这不是整页 color，也不是给字形套 mask-image。

appearance —— 重做原生控件外观

浏览器给复选框、搜索框画原生皮肤。appearance: none（需要时加 -webkit-appearance: none）剥掉它：

Reset appearance then restyle

css 
input.search {
appearance: none;
-webkit-appearance: none;
border: 1px solid #94a3b8;
border-radius: 0.5rem;
padding: 0.5rem 0.75rem;
}

input[type="checkbox"].tick {
appearance: none;
-webkit-appearance: none;
width: 1.15rem;
height: 1.15rem;
border: 2px solid #334155;
border-radius: 0.25rem;
}

写了 none 之后，你得补边框、选中态和焦点环。看不见的复选框不是自定义控件。支持因控件类型而异；测真实控件。appearance 修不好遮罩，也替不了多列。

界面对照遮罩、分栏与盒模型 outline

📊 UI vs mask vs columns vs outline

Tool Job Poor fit
cursor / resize / caret-color / appearance Interaction chrome on controls Stenciling a photo; newspaper columns
user-select Limit highlight on chrome, not articles Hiding copy people must paste
outline + :focus-visible Keyboard focus ring (no layout space) Replacing border math; fading labels with a mask
mask-image Soft holes on one element’s pixels Pointer shape; growing a textarea
Multi-column (column-*) Fragment flowing text Cursors, carets, native widget skin

Optional Advanced 用分栏处理正文、用遮罩处理图片。用户界面是控件层。设置表单上的 column-count、提交按钮上的 mask-image，并不会让表单「更像界面」。

不要抹掉什么

别拆光所有原生提示。滚动条、插入条、焦点环都有用。控件禁用时，cursor: not-allowed 加上真正的 disabled 属性，比用遮罩藏掉标签更稳。

UI polish is not a mask or columns

css 
.ok-ui {
cursor: pointer;
outline-offset: 2px;
}

.not-a-stencil {
/* don't: mask-image on the submit label to “soften” the click */
}

.not-a-newspaper {
/* don't: column-count on a login form to look advanced */
}

问题是照片边缘，回到遮罩。问题是长文，回到分栏或普通块流。感觉「不像能点」，从 cursor 和真正控件开始，不要靠装饰滤镜。

自己试试

  1. 真正的 <button> 用 cursor: pointer，[disabled] 用 not-allowed。
  2. 给 textarea：resize: vertical、min-height、overflow: auto。
  3. 加上 :focus-visible 的 outline 和 outline-offset——用 Tab 走过去。
  4. 只在工具条碎片上 user-select: none；正文仍可选。
  5. 给输入框改 caret-color。不要给字段做遮罩，也不要 column-count。

常见错误

  • 在既非链接也非按钮的文字上用 cursor: pointer
  • 给布局卡片和导航栏 resize: both
  • 全局 outline: none 却没有 :focus-visible 替代
  • 整页、价格或报错用 user-select: none
  • 为了「干净」用 caret-color: transparent
  • appearance: none 后没有边框、选中态、焦点环
  • 把遮罩或多列当成界面抛光

小结

  • 用户界面 CSS 提示交互：指针、resize、插入条、原生皮肤
  • cursor 必须说真话；resize 属于字段，不属于整页外壳
  • 保留可见的焦点环；user-select 和 caret-color 轻量使用
  • 只有彻底重做控件时才用 appearance: none
  • 既不是遮罩镂空，也不是报纸栏
  • Optional Advanced 下一课是 3D 变换（transforms-3d）

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
7
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 75 的 76
Css 教程