必须用等行内元素包裹重点词再加border，因纯文本节点无盒模型；border需width、style、color三要素齐全；推荐使用class统一管理，并配padding、border-radius和背景色提升可读性。
重点词汇加外框，不是用 HTML 标签“画框”，而是用 CSS 的 border 套在包裹该词的行内元素上——直接套在 <span></span> 上最稳妥。
为什么不能直接给文字加 border？
纯文本节点（比如 <p>这是重点</p> 里的“重点”）没有盒模型，border 无效。必须先用一个行内容器把它包起来，比如 <span></span> 或语义更准的 <mark></mark>（但 <mark></mark> 默认只有背景，没边框）。
常见错误现象：<p style="border: 1px solid red;">重点词</p> —— 这会给整段加框，不是“重点词”本身；或者只写 border: 1px solid; 漏颜色，边框不显示。
- 必须三要素齐全：
border-width、border-style（如solid）、border-color -
border-style不能省略，浏览器默认是none，写了宽度和颜色也没用 - 行内元素加
border后会撑高行距，必要时加vertical-align: middle或line-height: normal微调
怎么写才干净又可控？
推荐写法：用 <span></span> 包住词，再加内联样式或 class。
例如：<p>这个<span style="border: 1px solid #0066cc; padding: 1px 4px; border-radius: 2px;">API</span>需要鉴权</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill7761" title="Article To Html"><img
src="https://img.php.cn/upload/skill/000/000/081/179168408018805.jpg" alt="Article To Html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill7761" title="Article To Html" class="overflowclass">Article To Html</a>
<p class="overflowclass">文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。</p>
</div>
<a rel="nofollow" href="/xiazai/skill7761" title="Article To Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
-
padding让边框不贴字，视觉更清晰 -
border-radius避免直角割裂阅读流，2–3px 就够 - 颜色别用纯黑/纯白，选有对比度但不刺眼的，比如
#0066cc或#d32f2f - 避免在
<strong></strong>或<em></em>上直接加border—— 它们语义是强调，不是装饰，混用易误导屏幕阅读器
想统一管理样式？别用内联
项目里多个地方标重点词，就该抽成 CSS class，而不是重复写 style="..."。
比如在 里加：
.highlight {
border: 1px solid #2e7d32;
padding: 1px 5px;
border-radius: 3px;
background-color: #f1f8e9;
}
然后 HTML 里用：<span class="highlight">响应式</span>
- 加
background-color是为了提升可读性，尤其浅色背景上单靠边框不够醒目 - 不要用
!important强覆盖，靠选择器权重或就近原则控制优先级 - 如果要适配深色模式，用
color-scheme: light dark;+@media (prefers-color-scheme: dark)调整边框和背景色
border 和 outline 别搞混了
有人试过 outline: 2px solid red，发现它“浮在文字外面”，还跟着焦点乱跑——那是 outline，专为键盘导航设计，不占布局空间，也不支持 border-radius，不能当外框用。
- 要精确控制位置、圆角、内外留白，只能用
border+padding+display: inline-block（必要时） -
outline只适合临时调试或焦点反馈，正式标注重点词请绕开它 - 特别注意：input 等表单控件有浏览器默认
outline，删它之前务必补上:focus-visible替代方案，否则损害可访问性
真正难的不是加框，而是判断这个词值不值得加——加太多，框就变成噪音；加太细，比如给每个术语都套一层，反而模糊了真正关键的信息层级。边框是视觉锚点，不是装饰印章。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
