边框不显示是因为border-style默认为none，必须显式设置如solid；仅设border-color无效，需配合border-style和border-width（或使用border简写）。
直接用 border 配合 border-color 就能控制图片边框颜色，但必须同时声明 border-style（比如 solid），否则边框不显示。
为什么加了 border-color 却没边框？
因为 CSS 的 border 是复合属性，border-color 单独设置只管“颜色”，不管“有没有线”。如果没显式定义样式（solid、dashed 等），浏览器默认是 none —— 也就是“无边框”。
常见错误写法：img { border-color: red; } → 没效果
正确写法至少要有：img { border: 2px solid red; } 或分开写：img { border-style: solid; border-color: red; border-width: 2px; }
要点：
- border-style 不能为 none 或 hidden
- border-width 为 0 时也等效于无边框
- 颜色值支持 red、#f00、rgb(255,0,0)、transparent
只想改某一边的颜色？用方向性属性
比如只要左边红色、其余黑色，或上下不同色，就得拆开写：
一款AI工具，主要用于生成可直接复制粘贴的 Bash 脚本，用于 Ralph Wiggum/AI 代理循环（Codex、Claude Code、OpenCode、Goose）。适用于“拉尔夫循环”“Ralph Wiggum 循环”或 AI 循环请求，依据 PROMPT.md、AGENTS.md、SPECS、IMPLEMENTATION_PLAN.md 进行计划/构建，包含计划与构建模式、背压、沙箱及完成条件，适合需要提升相关任务效率的用户。
-
border-left-color: #e74c3c;（仅左边缘） -
border-top-color: #3498db; border-bottom-color: #9b59b6;（上下异色） -
border-color: #000 #ff0 #0f0 #f0f;（顺时针：上右下左）
注意顺序不能错；如果只写两个值，如 border-color: #000 #333，表示上下为 #000、左右为 #333。
border 和旧版 img border 属性混用会怎样？
HTML 4 里曾有 <img src="x.jpg" border="1"> 这种写法，它只设宽度（像素），颜色和样式由浏览器默认（通常是黑色实线）。它已被 HTML5 废弃，且与 CSS 的 border 冲突：
- 如果同时存在，CSS 规则优先级更高，但
border="1"可能触发某些老浏览器的怪异渲染 -
border="0"会强制移除边框（即使 CSS 里写了border: 2px solid blue），这是历史遗留坑 - 现代项目务必删掉所有
border属性，统一走 CSS 控制
边框颜色影响布局吗？
会。边框属于盒子模型的 border 区域，它增加元素总宽高（除非用了 box-sizing: border-box）。
例如：img { width: 200px; height: 150px; border: 5px solid #000; }
实际占用空间是 210×160 像素（左右各+5，上下各+5）。
容易被忽略的点：
- 如果图片本身带 max-width: 100%（响应式场景），border 会让它更容易溢出容器
- border-color: transparent 仍占空间，只是不可见，适合做 hover 扩展或三角形 hack
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
