给纯文字加边框必须用行内元素（如<span>）包裹并设置border+padding，或改用outline/box-shadow；table的border属性不适用于文字边框，因其语义不符、样式不可控且已废弃。
直接用 border 属性加边框，文字不会被“框住”——它只作用于块级容器（比如 <table>、<td>、<div>），不是文字本身。想给纯文字加边框，得用 border + padding 包裹在行内元素上，或者改用 outline / box-shadow 等替代方案。
给文字加边框：必须用行内元素包裹并设 border
HTML 没有“文字边框”原生属性，border 只对可设置宽高的元素生效。所以要把文字包进 <span> 或 <strong> 这类行内标签里，再加样式：
<span style="border: 2px solid #007BFF; padding: 4px 8px; border-radius: 3px;">这是带边框的文字</span>
-
padding是关键：不加它，边框会紧贴文字，视觉上像“没框住”，加了才有呼吸感 -
border-radius能圆角，避免生硬直角；值太大会让圆角压过文字高度，建议 ≤ 4px - 别用
<p>包文字再加 border——它自带上下 margin，容易撑开布局 - 如果文字跨多行，
display: inline-block更稳，否则 border 只包第一行
为什么 table 的 border="1" 不适合套文字边框
老式写法 <table border="1"> 是给整个表格加外框，不是文字边框。它还有几个硬伤：
- 每个
<td>也会自动带默认边框，导致“双线重叠”，看起来粗且不干净 - 无法单独控制某段文字的边框颜色/圆角/粗细，所有单元格强制统一
- HTML5 中已废弃，部分校验工具报错，W3C 不再推荐
- 响应式场景下，表格宽度固定，文字缩放或换行时边框容易错位
border-collapse: collapse 是表格边框的命门
真要靠表格“模拟”文字边框（比如诗句、签名等单行内容），必须用 CSS 控制，否则边框永远是双线：
立即学习“前端免费学习笔记（深入）”；
<table style="border-collapse: collapse; border: 2px solid #E63946;"> <tr><td style="border: none; padding: 6px 12px;">独钓寒江雪</td></tr> </table>
-
border-collapse: collapse必须设在<table>上，否则<td>和<table>边框各自渲染 -
<td>的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 一致。很多失败案例，问题不出在代码，而出在没把文字当一个有呼吸感的视觉块来对待。
