图片边框不显示的主因是border-style默认为none，必须显式指定solid等样式；border简写需同时包含宽度、样式、颜色三要素，缺一不可，否则浏览器静默忽略。
图片边框不显示，八成是 border-style 没写——CSS 默认值为 none，等于开关关着，再宽再红也没用。必须同时指定宽度、样式、颜色三要素，缺一不可。
border: 2px solid #333 为什么有时不生效
这不是浏览器 bug，而是 CSS 规则被静默忽略的典型表现：
-
border简写中漏掉样式（如写成border: 2px #333）→ 无效 - 只设
border-width: 2px或border-color: red→ 无效，border-style: none仍生效 - 用了已废弃的 HTML 属性
<img border="2">→ HTML5 中完全无效 - 图片是
display: inline（默认），又加了border-radius→ 老版 Safari 可能裁切圆角或根本不渲染
验证方法：打开开发者工具，看 computed styles 里的 border 是否为 none；若显示 2px solid rgb(51, 51, 51) 才算真正生效。
图片链接（ 包裹 ![]()
）的“蓝边框”从哪来
那个点击/聚焦后出现的蓝色虚线，不是 img 的 border，也不是 a 的 border，而是 a:focus 的默认 outline。它不响应 border-radius，也不占布局空间，但键盘用户靠它导航。
- 错误做法：
img { outline: none }→ 作用对象错了，无效 - 错误做法：
a { outline: none }→ 剥夺键盘可访问性，不推荐 - 正确做法：重置并提供替代焦点样式，例如
a:focus img { border: 2px solid #007bff; border-radius: 4px; } - 若需轻量描边：
a:focus img { outline: 2px dashed #007bff; outline-offset: 2px; }（注意：outline 不支持圆角）
border-image 设置失败的三个硬门槛
border-image 不是“写了就出图”，它有三个强制依赖项，缺一即失效：
- 必须有显式的
border-width（如border: 20px solid transparent），border: none或border: solid（无宽度）直接关闭通道 -
border-image-slice数值不能超原图尺寸——比如frame.png是 100×100px，border-image-slice: 60就会导致退化为纯色 fallback，且控制台不报错 -
border-image-source跨域或用file://协议加载时会静默失败；验证方式：Network 面板查是否返回 403 或 blocked
最小可行配置示例：
border: 20px solid transparent;<br>border-image-source: url("frame.png");<br>border-image-slice: 30;<br>border-image-repeat: round;
hover 边框跳动、移动端不触发、高清屏发虚怎么解
这些不是孤立问题，而是盒模型、设备特性与 CSS 渲染机制共同作用的结果：
- 跳动：直接
img:hover { border: 2px solid red }→ 边框从无到有，宽度突增。应始终写img { border: 2px solid transparent; }，hover 时只改border-color - 移动端不触发：
:hover在 iOS Safari / Android Chrome 上基本不可靠；真要反馈，用:active或 JS 切换 class - 高清屏发虚：固定
1px在 @2x 屏上实际是 2 物理像素，易模糊；改用0.0625rem（≈1px @16px 基准）或calc(0.5px + 0.02vw) - 别用
transform: scale(0.5)模拟细线——边框会被缩放，锯齿明显，且过渡动画失真
真正容易被忽略的是组合态：比如 border-radius + object-fit: cover + overflow: hidden 套在一起时，圆角是否可见，取决于三者生效顺序和图片原始比例——这没法靠单一属性修复，得实测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
