纯色方块需显式设 width/height 和 background-color；推荐用 css 类统一管理颜色与尺寸，兼容场景可选 aspect-ratio 或 padding-top fallback；svg 更适配高缩放与主题切换，须补充 aria-label 等可访问性支持。
用 <div> + <code>style 最快画出纯色方块
不用框架、不引库，一行 <div> 就能出效果。关键不是“怎么画”，而是“怎么控制大小和颜色不翻车”。
<p>常见错误是直接写 <code><div> 不设宽高，结果啥也看不见；或者用 <code>color 想改背景色，发现根本没用——那是文字颜色。
-
background-color才管背景色，color只管文字 - 必须显式设置
width和height，否则<div> 默认高度为 0 <li>想居中或对齐？别靠 <code>text-align: center对 div 本身，它只影响内联内容
示例：
<div style="width: 100px; height: 100px; background-color: #ff6b6b;"></div>
用 CSS 类批量管理颜色方块更靠谱
写十个方块就贴十次 style？很快失控。抽成 class 是最小成本的可维护方案。
立即学习“前端免费学习笔记（深入）”；
场景：配色系统固定（比如品牌蓝、警告红、成功绿），或需要响应式尺寸变化。
- 每个颜色对应一个 class，比如
.bg-blue-500，避免内联样式污染结构 - 尺寸统一用
aspect-ratio: 1替代固定px，适配不同设备更稳 - IE 不支持
aspect-ratio，如果要兼容，得 fallback 到padding-top: 100%+position: relative套壳
示例：
.swatch { width: 60px; height: 60px; display: inline-block; }<br>.swatch.red { background-color: #e53e3e; }
用 <svg></svg> 画方块适合高缩放或主题切换
如果方块要放大到 4K 屏还不糊，或者要随系统主题自动变色（比如深色模式下转为浅灰），<svg></svg> 比 <div> 更可控。
<p>不是为了炫技，是解决实际限制：CSS 的 <code>background-color 无法被 CSS 变量动态重写（除非用 color-scheme 或 @media (prefers-color-scheme)），但 SVG 的 fill 可以。
-
<svg viewbox="0 0 100 100"><rect width="100" height="100" fill="var(--swatch-color, #4299e1)"></rect></svg>—— 这样就能用 CSS 变量接管颜色 - SVG 方块默认不占文档流，
display: block或vertical-align: middle才好对齐 - 别在 SVG 里写
width="100px"同时又设viewBox，容易拉伸变形
别忽略语义和可访问性
纯色方块常用来表示状态（如“在线”“离线”），但屏幕阅读器看不到颜色。光有视觉提示不够。
错误做法：只靠红/绿方块传达信息，没文字说明也没 ARIA 标签。
- 加
aria-label，比如aria-label="在线状态：绿色" - 如果是状态指示器，用
role="status"或role="img"明确用途 - 颜色对比度要够（至少 4.5:1），否则色弱用户分不清
#90cdf4和#63b3ed
最简补救：
<div class="swatch online" aria-label="在线"></div>+ 对应 CSS 设置
content: "在线"; 伪元素（仅对支持用户可见）
颜色方块看着简单，真正卡住人的地方往往不在“怎么画”，而在“怎么让它在不同上下文里稳定表达含义”——尺寸、语义、主题适配、色觉友好，漏掉任意一环，后期都得返工。
