给纯文字加边框必须用行内元素（如）包裹并设置border+padding，或改用outline/box-shadow；table的border属性不适用于文字边框，因其语义不符、样式不可控且已废弃。
直接用 border 属性加边框，文字不会被“框住”——它只作用于块级容器（比如 <table>、<code><td>、<code><div>），不是文字本身。想给纯文字加边框，得用 <code>border + padding 包裹在行内元素上，或者改用 outline / box-shadow 等替代方案。
给文字加边框：必须用行内元素包裹并设 border
HTML 没有“文字边框”原生属性，border 只对可设置宽高的元素生效。所以要把文字包进 <span></span> 或 <strong></strong> 这类行内标签里，再加样式：
<span style="border: 2px solid #007BFF; padding: 4px 8px; border-radius: 3px;">这是带边框的文字</span>
-
padding是关键：不加它，边框会紧贴文字，视觉上像“没框住”，加了才有呼吸感 -
border-radius能圆角，避免生硬直角；值太大会让圆角压过文字高度，建议 ≤ 4px - 别用
<p></p>包文字再加 border——它自带上下 margin，容易撑开布局 - 如果文字跨多行，
display: inline-block更稳，否则 border 只包第一行
为什么 table 的 border="1" 不适合套文字边框
老式写法 <table border="1"> 是给整个表格加外框，不是文字边框。它还有几个硬伤：
<ul><li>每个 <code><td> 也会自动带默认边框，导致“双线重叠”，看起来粗且不干净
<li>无法单独控制某段文字的边框颜色/圆角/粗细，所有单元格强制统一</li>
<li>HTML5 中已废弃，部分校验工具报错，W3C 不再推荐</li>
<li>响应式场景下，表格宽度固定，文字缩放或换行时边框容易错位</li>
<h3>border-collapse: collapse 是表格边框的命门</h3>
<p>真要靠表格“模拟”文字边框（比如诗句、签名等单行内容），必须用 CSS 控制，否则边框永远是双线：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5117" title="HTML Extract"><img
src="https://img.php.cn/upload/skill/000/000/081/179033952939354.jpg" alt="HTML Extract" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill5117" title="HTML Extract" class="overflowclass">HTML Extract</a>
<p class="overflowclass">使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...</p>
</div>
<a rel="nofollow" href="/xiazai/skill5117" title="HTML Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<pre class="brush:php;toolbar:false;"></pre>
<table style="border-collapse: collapse; border: 2px solid #E63946;"><tr><td style="border: none; padding: 6px 12px;">独钓寒江雪</td></tr></table>
<ul><li>
<code>border-collapse: collapse 必须设在 <table> 上，否则 <code><td> 和 <code><table> 边框各自渲染
<li><code><td> 的 <code>border: none 是为了关掉单元格自带边框，只留外框
table-layout: fixed 防止文字撑破容器更现代的替代方案：outline 和 box-shadow
如果只是要视觉强调，又不想影响布局流，outline 和 box-shadow 更轻量：
-
outline: 2px dashed #2A9D8F;不占空间、支持虚线，但不支持圆角，且不能只设单边 -
box-shadow: 0 0 0 2px #E76F51;模拟边框效果，可配inset做内边框，兼容性好（IE9+） - 两者都不触发重排（reflow），比
border性能略优，适合高频更新的文字 - 注意：
outline默认随焦点出现（如 input 聚焦时的蓝线），手动设需加outline-offset避免贴边
真正“漂亮”的边框，不在粗细或颜色，而在 padding 是否自然、border-radius 是否匹配字体 x-height、以及是否和周围元素的 spacing 一致。很多失败案例，问题不出在代码，而出在没把文字当一个有呼吸感的视觉块来对待。
