border: 1px solid #000 是 border 的简写，依次解析为 border-width: 1px、border-style: solid、border-color: #000；缺一不可，否则样式失效，且会覆盖已有方向性边框设置。
border: 1px solid #000 是怎么解析的
这行 CSS 不是单个属性，而是 border 这个复合属性的简写，浏览器会把它拆成三个独立声明：border-width、border-style、border-color。顺序固定，缺一不可——少一个值，后面就可能错位。
常见错误现象：border: 1px #000 看起来省事，但没写 solid，结果边框直接消失（因为 border-style 默认是 none，它不继承颜色或宽度）。
-
1px→ 对应border-width，所有四边统一 -
solid→ 对应border-style，必须显式指定，否则无效 -
#000→ 对应border-color，支持任何合法颜色值（black、rgb(0,0,0)都行）
什么时候不能用这个简写
当四边边框不一致时，border 简写会覆盖掉所有方向的设置，容易误清已有样式。比如你之前写了 border-left: 2px dashed red，再写一句 border: 1px solid #000，左边那条虚线就没了。
使用场景：初始化重置、快速加统一边框、原型阶段速写；不适合微调某一边或混合样式。
立即学习“前端免费学习笔记（深入）”；
- 要单独改底边？用
border-bottom，别碰border - 要三边实线+右边无边？必须分开写
border-top/border-right等，不能靠简写“省略”右边 - 用
border后又想加border-radius？没问题，它俩不冲突；但别指望border简写能带出圆角
和 border-width / border-color 单独设的区别
单独设属性更可控，但写法多、体积略大；border 简写紧凑，可读性依赖团队习惯。真正要注意的是继承行为：
-
border-color单独设时，未指定方向会按上右下左顺序赋值（border-color: #f00 #0f0→ 上下红、左右绿） -
border简写里只接受一个颜色值，它会同时应用到四边 -
border-width单独设支持thin/medium/thick关键字，但border简写里只认具体长度单位（1px、0.1em），不认关键字
兼容性和性能影响几乎为零
border 是 CSS 2.1 就支持的语法，所有现代浏览器包括 IE8+ 都能正确解析。它不是新特性，没有 polyfill 需求，也不触发重排以外的额外开销。
唯一容易被忽略的点：如果你在 CSS-in-JS 或内联 style 里动态拼字符串，记得空格不能少——"border:1pxsolid#000"（没空格）会被当成非法值丢弃，得写成 "border: 1px solid #000"。
