最直接的装饰性线条用 border，但应写在 css 中而非内联；outline 适合不占布局的焦点描边；box-shadow 可实现双线/内嵌等高级效果；复杂图案需伪元素；需权衡性能与维护性。
用 border 属性加单色实线最直接
多数人想的“装饰性线条”其实就是给图片加个边框，border 是最轻量、兼容性最好的方式。它不改变图片结构，也不依赖额外元素，写一行 CSS 就能生效。
常见错误是直接在 <img> 标签里写 style="max-width:90%"，看似可行，但一旦后续要统一调整所有图片边框，就得逐个改——维护成本高。
- 推荐写在 CSS 文件或
<style></style>块里，比如：img.decorated { border: 3px solid #e0e0e0; } - 注意
border会撑大元素尺寸（除非设了box-sizing: border-box），如果布局紧凑，可能造成错位 - 别用
border: none来“清除”默认边框——现代浏览器默认没边框，这行纯属冗余
用 outline 实现不占布局的描边效果
当你要加一圈“浮在图片上”的线条（比如焦点状态、悬停高亮），又不想影响周围元素排版，outline 比 border 更合适。它不参与盒模型计算，不会挤开文字或相邻图片。
典型误用是把它当 border 的替代品来画常驻边框——outline 在部分浏览器里不支持圆角（outline-radius 并不存在），且无法单独设置某一边。
- 适合场景：图片获得焦点时加一圈虚线，如
img:focus { outline: 2px dashed #007bff; } - 不能用
outline-offset设负值来内缩描边——它只往外偏移，内缩会裁剪 - IE8 及更早版本不支持
outline，若需兼容，得回退到border+box-sizing
用 box-shadow 模拟双线/发光/内嵌边框
真正有“装饰感”的线条，往往不是平直单调的。用 box-shadow 可以一层叠一层，实现双线、阴影边框、甚至内凹效果，而且完全不影响布局。
容易踩的坑是把 box-shadow 当成绘画工具乱叠：参数太多、模糊值过大，结果图片边缘发虚，或者在高 DPI 屏幕上出现渲染锯齿。
- 双线边框示例：
img.fancy-border { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #333; }（白线+黑线，注意顺序：外层写在后面才盖住内层） - 内嵌边框用
inset关键字：box-shadow: inset 0 0 0 2px #666;
，但仅对有背景色的容器可靠，纯透明 PNG 上可能看不见 - 避免同时设
blur和spread过大，尤其在移动端，GPU 渲染压力明显上升
用伪元素 ::before 做复杂装饰框（含图案/渐变）
当线条需要渐变色、斜纹、点线，或者要带小图标角标时，border 和 box-shadow 都力不从心。这时把图片包进 <div>，再用伪元素画框，自由度最高。
<p>代价是 HTML 结构变重，而且必须确保父容器设 <code>position: relative，否则伪元素定位会脱标。
- 基础结构：
<div class="img-container">@@##@@</div>
+.img-container::before { content: ""; position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px; border: 2px linear-gradient(45deg, #ff6b6b, #4ecdc4) solid; } - 伪元素默认不触发硬件加速，加
transform: translateZ(0)或will-change: transform可提升动画流畅度 - 如果图片宽高不固定，伪元素的
top/left/right/bottom偏移值要配合aspect-ratio或 JS 动态算，否则角落留白或溢出
真正难的不是加线条，而是判断哪条线该由 CSS 控制、哪条该交给设计资源（比如 SVG 边框图）。过度依赖 CSS 画复杂装饰，会让样式表膨胀、调试困难，也增加低配设备的渲染负担。
