dl标签不支持html的border属性，因其未被html规范定义；加边框须用css并满足宽度、样式、颜色三要素，推荐对dl整体或dt/dd组合分别设置，避免语义退化。
描述列表（dl）本身不支持 border 属性，直接写 <dl border="1"></dl> 完全无效 —— 这不是浏览器 bug，是 HTML 规范根本没定义这个属性。
为什么 dl 加不了原生 border 属性
HTML 中只有 <table> 曾经有 <code>border 这个废弃属性，dl、ul、ol 等所有其他语义化列表标签，从一开始就没有 border 属性。试图写 <dl border="1"></dl> 或 <dl style="border: 1px solid #000"></dl> 却没反应，大概率是因为你漏了 border-style（比如只写了宽度和颜色），或者容器没设 display 导致边框不可见。
-
dl默认是块级元素，但它的子元素dt和dd是纯内容流，没有默认边框占位 - 直接对
dl写border是合法的 CSS，但必须满足三要素：宽度 + 样式 + 颜色（或继承色） - 如果
dl高度塌陷（比如内部全是浮动或 inline 元素），边框可能“看不见”——实际画出来了，只是高度为 0
dl 加边框的两种可靠写法
推荐用 CSS 控制，而不是幻想 HTML 属性能生效。两种常见需求对应不同策略：
- 给整个描述列表加外边框：直接作用于
dl元素，确保它有明确尺寸dl { border: 1px solid #ccc; padding: 12px; } - 给每个条目（
dt+dd组合）加分隔边框：更实用，适合 FAQ 或配置项列表dt { border-top: 1px solid #eee; padding-top: 8px; }dt:first-child { border-top: none; }
注意：dd 默认有左侧缩进（margin-left），若想让边框对齐，可加 dd { margin-left: 0; } 或统一用 display: grid 布局重构结构。
表格式描述列表？别用 table 模拟 dl
有人为了“带边框的描述列表”硬套 <table border="1">，这是典型语义退化。后果包括：
<ul>
<li>屏幕阅读器无法识别这是描述关系，<code>dt/dd 的语义优势全丢
border="1" 在现代 CSS 下行为不可控：单元格自带边框、双线重叠、无法设圆角或虚线table 容易横向溢出，而 dl + Flex/Grid 天然更灵活真要表格感布局，用 CSS Grid 更干净：dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; }，再配 border-bottom 分隔即可。
容易被忽略的细节：边框影响盒模型 & 可访问性
给 dl 加 border 后，元素总宽高会增加（除非设了 box-sizing: border-box）。更隐蔽的问题是 outline：
- 当用户键盘聚焦到
dt或dd内的可交互元素（如链接、按钮）时，冒出来的蓝圈是outline，不是border—— 别误删border去治它 - 若用
outline: none移除焦点轮廓，请至少补上:focus-visible或改用box-shadow替代，否则会损害键盘用户操作 -
border-color对比度不足（比如浅灰边框配浅灰背景）会导致视觉障碍用户难以分辨结构
真正难的不是“怎么画一条线”，而是让这条线在各种设备、配色方案、交互状态下都保持可用且语义清晰。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
