HTML颜色方块制作教程【干货】

• background-color 才管背景色，color 只管文字
• 必须显式设置 width 和 height，否则
  默认高度为 0
• 想居中或对齐？别靠 text-align: center 对 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; }
.swatch.red { background-color: #e53e3e; }

用 画方块适合高缩放或主题切换

如果方块要放大到 4K 屏还不糊，或者要随系统主题自动变色（比如深色模式下转为浅灰）， 比

CodeIgniter集成Opbeat监控教程

上一篇

CodeIgniter集成Opbeat监控教程

下一篇

Laravel自定义异常返回JSON详解