border简写必须同时指定宽度、样式、颜色三值，顺序固定且缺一不可；它会重置所有方向边框，而单独设置border-color等则仅修改对应属性。
border 简写属性能设哪些值
直接用 border 一次性设置边框，必须同时指定三个部分：宽度、样式、颜色。缺一不可，否则整条声明会被浏览器忽略。
- 顺序固定：
border: <width> <style> <color>; - 三者之间用空格分隔，不能用逗号或分号
- 任意一项写错（比如
solid拼成solide），整条规则失效 - 不支持单独省略颜色——即使元素有继承色，也必须显式写出
color值或用transparent
常见错误：border 写了却没显示
最常踩的坑是漏掉 style，比如写成 border: 1px #333; —— 这完全无效，因为没有样式，浏览器不会渲染任何边框。
- 合法示例：
border: 2px solid #007bff; - 非法示例：
border: 1px #666;（缺style） - 非法示例：
border: solid #999;（缺width，单位也不能省） - 注意：
border: none;是特例，它等价于border-style: none;，会清除所有边框，但不算“三值简写”
border 简写和 border-width / border-color 分开写的区别
用 border 简写会**重置所有方向的边框**，包括 border-top、border-right 等子属性。而单独设置 border-color 不会改变已有的 width 或 style。
- 执行
border: 1px dashed red;后，border-top-width、border-bottom-style等全部被覆盖为新值 - 执行
border-color: blue;只改颜色，宽和样式保持之前设定（或默认值） - 如果之前只设了
border-top: 2px solid black;，再写border: 1px solid gray;，顶部边框就不再是2px了
要不要用 border 简写？看场景
简写适合初始化统一边框，比如卡片、输入框基础样式；但涉及响应式或局部调整时，容易误覆盖，反而更难维护。
立即学习“前端免费学习笔记（深入）”；
- 推荐用简写：组件初建时统一定义
border: 1px solid #e0e0e0; - 慎用简写：需要在 hover 状态只改颜色，或媒体查询里只调宽度——此时应优先用
border-color或border-width - 注意兼容性：
border简写在所有现代浏览器中行为一致，但 IE8+ 才支持border-image类扩展，别混用
/* 正确的简写 */
.box {
border: 1px solid #ccc;
}
<p>/<em> 想只改 hover 颜色？别重写整个 border </em>/
.box:hover {
border-color: #007bff;
}实际项目里，很多人在调试时发现边框“突然消失”，回溯才发现某处简写覆盖了之前精心设置的 border-bottom。这种隐式覆盖，比显式写四条边更难定位。
