手风琴边框由css控制，非html或属性开关决定；需对容器如.accordion-item设border及overflow:hidden配对border-radius；无边框应通过间距、背景色、阴影等替代，避免粘连。
手风琴组件本身没有内置边框样式，所谓“有边框”或“无边框”，完全取决于你给 .accordion-item、.accordion-header、.accordion-body 这些容器加的 CSS 边框规则——不是 HTML 能控制的，也不是某个属性开关。
为什么直接写 <details></details> 没边框？
<details></details> 是原生手风琴语义标签，但浏览器默认样式极简：Chrome/Firefox 都不渲染外边框，只靠 summary 的小三角和折叠行为体现交互。想有边框，必须手动加 border。
- 常见误操作：只给
<details></details>加border，但没设display: block或overflow: hidden，导致边框包不住展开后的内容 - 正确做法是把边框加在包裹容器上，比如用
<div class="accordion-item"><details>...</details></div>，再对.accordion-item设border: 1px solid #ddd - 若用 Bootstrap 等框架，其
.accordion类默认已含border，删掉对应 CSS 规则（如border: none）就能去边框
border-radius 和 overflow: hidden 必须配对用
圆角边框看起来干净，但单独设 border-radius: 8px 不生效——因为展开时 .accordion-body 内容会溢出父容器，盖掉圆角。必须同时加 overflow: hidden 在父级（如 .accordion-item）上。
- 错误写法：
.accordion-item { border-radius: 6px; }→ 圆角被内容顶破 - 正确写法：
.accordion-item { border: 1px solid #e0e0e0; border-radius: 6px; overflow: hidden; } - 如果用了
transform动画展开，overflow: hidden可能截断动画，此时改用clip-path或分段加圆角（首项上圆角、末项下圆角）更稳妥
无边框 ≠ 不设边框，而是用其他视觉区分替代
真要“无边框”，别直接删所有 border，否则相邻条目会粘连、失去层次。可用这些方式保持可读性：
- 用
margin-bottom: 1rem隔开每个.accordion-item - 用浅色背景差（如
background-color: #fafafa）代替边框线 - 悬停时加
box-shadow: 0 1px 3px rgba(0,0,0,0.05)，比边框更轻量 - Bootstrap 5 的
accordion-flush类就是靠移除border+ 增加border-radius: 0+ 调整内边距实现“无边框感”
边框是否显示，本质是视觉层级问题；真正容易被忽略的是：当多个手风琴并列时，第一个和最后一个的圆角逻辑要单独处理，否则顶部/底部会被切掉——这得靠 :first-child/:last-child 选择器微调，不是加个 class 就完事的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
