details的border-radius常不生效，因浏览器默认不渲染其边框：Chrome/Firefox视其为语义容器不触发圆角，Safari甚至忽略border声明；需显式设display:block、overflow:hidden于details自身，并在深色模式下重申border和背景色。
details 标签的 border-radius 为什么经常“不生效”
直接给 details 元素写 border-radius 很大概率没反应，不是你写错了，而是浏览器根本不让它参与圆角渲染——Chrome 和 Firefox 默认把 details 当作“容器语义元素”，不触发边框绘制逻辑；Safari（尤其 iOS 17.4 及更早）甚至会忽略整个 border 声明，只留内容区域裸奔。
常见错误现象包括：
• 写了 border: 1px solid #ccc; border-radius: 6px;，但边缘仍是直角
• 开启 open 后，下拉内容溢出父容器，圆角被裁掉
• DevTools 里能看到 computed 样式有 border-radius，但视觉上完全没变化
- 必须显式设置
display: block（IE/Edge Legacy 必须，现代浏览器也建议加） - 不能依赖
outline或box-shadow模拟边框：它们不响应border-radius -
overflow: hidden要加在details自身上，而不是外层 wrapper —— 否则 Safari 会拒绝裁剪内部summary和内容流
Firefox 深色模式下 details 边框变灰、圆角消失怎么办
Firefox 在深色系统或启用 @media (prefers-color-scheme: dark) 时，会覆盖 UA 样式中的 border-color 和 background-color，导致 border-radius 因背景缺失而“不可见”。这不是 bug，是它的 UA 样式策略：当检测到深色上下文，它会把 details 的默认边框设为 transparent，同时移除背景。
实操要点：
立即学习“前端免费学习笔记（深入）”；
- 不要只写一次
border，必须在暗色媒体查询中重申：@media (prefers-color-scheme: dark) { details { border: 1px solid #4a5568; background-color: #1a202c; } } - 避免用
inherit或currentcolor做边框色，它们在深色模式下容易坍缩为不可见值 - 如果用了
backdrop-filter或半透背景，要额外测试圆角是否被模糊层“吃掉”——某些版本 Firefox 会把border-radius应用在滤镜前，造成视觉错位
嵌套 details 时外层圆角失效的根本原因
嵌套 details（比如 <details><summary>...</summary><details>...</details></details>）会导致外层 border-radius 失效，核心不是样式问题，而是 DOM 渲染层级断裂：Safari 和微信 X5 内核会把内层 details 视为“脱离父容器流”，从而跳过外层的边框绘制流程；Chrome 则可能将两个 details 渲染为独立匿名块，圆角只作用于各自边界，中间出现直角缝隙。
能用的方案只有两个：
- 放弃嵌套，改用 JS 控制的
div+button组合，手动同步aria-expanded和open状态，再统一加border-radius - 保留嵌套结构，但用
details > *:not(summary)选择器单独给内容区加border-radius: 0 0 6px 6px，外层details只负责顶部圆角，靠视觉衔接“假装”整体圆滑
移动端 Safari 中 details 圆角被截断的修复条件
iOS Safari（尤其是 16.x–17.4）对 details 的 border-radius 支持极不稳定：有时只渲染左上+右上，有时下拉后底部圆角被硬生生切平。根本原因是它的渲染引擎把 details 的展开动画和 overflow 裁剪逻辑耦合太紧，一旦高度动态变化，就放弃圆角重绘。
稳定生效的条件很具体：
-
details必须有明确的max-height（哪怕设成max-height: 100vh），不能依赖height: auto - 内容区（
details > *除summary外）需加transform: translateZ(0)强制 GPU 层，否则 Safari 不触发圆角缓存 - 禁用
-webkit-overflow-scrolling: touch（如果父容器用了），它和details的滚动层冲突，会导致圆角在滑动中闪烁或消失
最常被忽略的一点：iOS Safari 对 border-radius 的像素精度敏感，border-radius: 4.5px 比 border-radius: 4px 更容易触发渲染异常——统一用整数 px 或 em 单位更稳妥。
