最常用方式是给文字容器加 border 并设 display: inline-block 和 padding；块级元素加边框需配 box-sizing: border-box 和比例制 border-radius；语义化分组才用 fieldset；推荐用 currentColor 或 CSS 变量实现自适应边框。
直接给文字容器加 border，不是给文字本身“描边”，也不是套表格或 fieldset——除非你真需要语义化分组或表单结构。
用 border + display: inline-block 包裹纯文字
这是最常用、最可控的方式。文字默认是行内元素，border 加上去会撑满整行宽度，必须限制作用范围。
-
display: inline-block让边框只包住文字内容，不占满父容器宽度 - 一定要配
padding，否则边框紧贴文字，视觉压迫感强 - 避免只写
border: 1px solid;——漏掉颜色时，浏览器按当前文字色渲染，可能和背景混在一起，看起来像没生效 - 如果文字含换行（如多行说明），改用
display: inline-flex或display: table更稳，inline-block对多行支持弱
示例：
<p style="border: 2px solid #3498db; padding: 6px 12px; display: inline-block;">带边框的提示文本</p>
给段落或标题整体加边框，但要控制尺寸和圆角
<p>、<h2> 这类块级元素加边框很简单，但容易忽略两点：尺寸溢出和圆角失效。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 块级元素默认
width: 100%，加边框后总宽 = 内容宽 + 左右padding+ 左右border→ 可能撑破容器 - 解决办法：统一加
box-sizing: border-box，让width包含边框和内边距 -
border-radius在小字号下易被截断（比如border-radius: 4px配font-size: 12px时角太尖），建议按字号比例设，如border-radius: 0.2em - 别在
<h1>上直接写align="center"——HTML5 已废弃，用text-align: center或margin: 0 auto（配合display: inline-block）
用 fieldset + legend 实现“带标题的边框”
仅当你需要语义化分组（如设置区块、表单区域）时才用这个组合，不是为普通文字加框的快捷方式。
-
<fieldset>自带边框，<legend>默认嵌入顶部，位置由浏览器决定，不能靠text-align居中 - 想让
legend居左？得用legend { margin-left: 0; }或display: flex微调 - 老浏览器（IE8）不支持
border-radius，但边框本身仍显示；若需圆角，得额外 hack 或放弃 IE8 - 禁用边框别删
fieldset标签，而是设border: none——否则语义丢失，影响无障碍访问
真正容易被忽略的是：边框是否随文字缩放、换行、深色模式自适应。比如用固定像素值 border: 1px solid #ccc，在高 DPI 屏幕下可能变细，深色模式下颜色又太浅。更稳妥的做法是用 currentColor 或 CSS 变量，例如：
<div style="border: 1px solid currentColor; color: var(--text-color, #333);">自适应边框文字</div>
这样边框色始终跟随文字色，响应式与主题切换都省心。
