border-width必须带单位或关键字，border-style是边框显示前提且不可省略，简写border需严格按width/style/color顺序，工具类应封装完整边框而非拆分属性。
border-width 不能直接写数字，必须带单位
很多人写 border-width: 2; 发现没效果，是因为 CSS 规定这个属性值必须是带单位的长度（如 px、em）或关键字（thin、medium、thick）。浏览器不认纯数字。
-
border-width: 2px;✅ 有效 -
border-width: medium;✅ 有效（约等于 4px，但不可控） -
border-width: 2;❌ 无效，会被忽略 - 如果只设一个值，四边等宽；设两个值（如
1px 2px），则上下/左右分别生效
border-style 是 border 显示的前提，缺它边框不出现
border-style 决定边框是否“画出来”。即使写了 border-width 和 border-color，只要 border-style 是默认的 none，边框就完全不可见——这是最常被忽略的“隐形原因”。
- 必须显式设置，比如
border-style: solid;、dashed;、dotted; -
hidden和none表面相似，但hidden在表格边框冲突时有特殊裁剪行为，日常不用 - 简写中不能省略样式：
border: 1px #000;无效；border: 1px solid #000;才生效
用 border 简写时顺序固定，错位会导致部分值被忽略
border 是复合属性，语法为 border: <width><style> <color>;</style></width>，三者顺序不能调换，且 style 不可省略。
-
border: 1px solid #333;✅ 完整有效 -
border: solid 1px #333;❌ 浏览器按顺序解析，把solid当作 width，报无效值 - 颜色可以省略（默认为当前文字色），但宽度和样式不能同时省：
border: solid #333;❌；border: 1px solid;✅（颜色取 text-color） - 简写会重置所有方向的边框，想单独改某一边，得用
border-top这类方向性属性
封装 border 工具类时，别把 width 和 style 拆成独立 class
有人喜欢写 .border-1 + .border-solid + .border-gray 三类组合，看似灵活，实则隐患多：优先级冲突、覆盖难预测、继承色干扰、伪元素边框失效。
立即学习“前端免费学习笔记（深入）”；
- 推荐单类封装完整边框：
.border-1-solid→border: 1px solid currentColor; - 如果要支持主题色，用 CSS 自定义属性更可控：
border: var(--border-width, 1px) var(--border-style, solid) var(--border-color, #ddd); - 避免在工具类里写
border-color: inherit，因为按钮、输入框等原生元素的currentColor可能不是你想要的边框色
真正麻烦的不是写法，而是当 border-style 被父元素或重置样式悄悄设为 none 时，你检查了十遍宽度和颜色，却忘了翻一翻 computed style 里的 style 值。
