用CSS实现灰色点状边框的关键是设置border-style为dotted，颜色选#999等灰色系，宽度推荐2–4px；既可用内联style快速应用，更宜用CSS类统一管理，兼容性好且易于维护。
直接用 CSS 的 border 属性就能实现灰色点状边框，关键在样式值设为 dotted，颜色选灰色系（如 #999 或 gray），宽度适中（推荐 2–4px）。
用内联样式快速添加
在 <img> 标签里加 style 属性，一行搞定：
说明：
- 3px 是点与点之间的“线宽”，不是点的大小；
- dotted 表示点状，浏览器会自动均匀分布圆点；
- #999 是中灰，比纯黑柔和，也比浅灰更稳重。
用 CSS 类统一管理（推荐）
更规范的做法是定义一个类，便于复用和后期调整：
.grey-dotted { border: 2px dotted #777; }
</style>
<img src="photo.jpg" alt="示例图" class="grey-dotted">
好处：
- 多张图共用同一效果，改一处全更新；
- 可轻松叠加其他样式，比如加点圆角：border-radius: 4px;；
- 避免内联样式污染 HTML 结构。
微调点状效果的小技巧
原生 dotted 在不同浏览器中点的大小和间距略有差异，若想更可控，可配合以下调整：
立即学习“前端免费学习笔记（深入）”；
- 点太密？适当加大边框宽度（如
4px dotted），点会更清晰； - 点太淡？换深一点的灰，比如
#555或rgb(85, 85, 85)； - 想让点更“圆润”？加
border-radius: 100%（部分浏览器支持，对点状边框有轻微优化）； - 注意：不要同时设
border-radius和过宽的border，否则角落可能不自然。
不建议的替代方案
有人尝试用 box-shadow 模拟点状或用背景图拼接，但这些方法复杂、难维护，且响应式表现不稳定。原生 border: dotted 兼容性好（IE9+、所有现代浏览器），语义清晰，加载快，够用又干净。
