details标签默认箭头需先用list-style:none和伪元素隐藏，再通过summary::before插入箭头并配合details[open]>summary::before{transform:rotate(180deg)}实现自动旋转动画。
details标签默认箭头怎么替换成旋转的CSS箭头
浏览器原生 <details></details> 会显示一个默认小箭头（方向随 open 状态变化），但样式不可控。想用 CSS 实现带旋转动画的自定义箭头，必须先隐藏原生箭头，再用伪元素 + transform: rotate() 模拟。
关键点是：不同浏览器隐藏原生箭头的方式不同，且 details[open] > summary::marker 在部分浏览器（如 Safari）不生效，得靠更稳妥的方案。
- Chrome / Edge：用
summary::-webkit-details-marker { display: none; } - Safari / Firefox：用
summary::marker { content: "" }或直接覆盖list-style - 统一做法是给
summary设list-style: none，再用::before插入 Unicode 箭头（如"▼"）或 SVG
如何让箭头随 open 状态自动旋转
不能依赖 JS 监听 toggle 事件来切 class——太重，且 open 属性是原生响应式的。正确方式是用属性选择器 + transition：
summary::before {
content: "▼";
display: inline-block;
margin-right: 8px;
transition: transform 0.2s ease;
}
details[open] > summary::before {
transform: rotate(180deg);
}
注意：transform 必须写在 ::before 上，而不是 summary 本身；否则 Safari 下可能不触发重绘。旋转角度选 180° 最稳妥，避免 90°/270° 在某些缩放比例下出现模糊。
Firefox 下 summary::marker 不生效怎么办
Firefox 对 ::marker 的支持较弱，尤其当 summary 是 flex 或 grid 子项时，::marker 可能被忽略。这时优先用 list-style: none + ::before，并确保 summary 是块级或 inline-flex：
- 给
summary加display: inline-flex或display: block - 避免在
summary上设display: contents或display: grid - 如果用了
font-size: 0清除间隙，记得给::before单独设font-size
旋转动画卡顿或闪一下？检查这些
常见卡顿不是因为 JS，而是 CSS 层叠或硬件加速没触发：
- 加
will-change: transform到::before（仅必要时，别滥用） - 避免同时动画
transform和color或width——只动transform和opacity最流畅 - 如果箭头是 SVG，确保
viewBox正确，否则rotate()中心偏移 - 移动端 Safari 有时对
details[open]的 CSS 响应有延迟，可加details { contain: layout style paint }强制优化
真正麻烦的是跨浏览器一致性——Safari 对 details 的 open 过渡支持最弱，动画可能跳变。如果要求严苛，就得 fallback 到 JS 控制 class，但多数场景纯 CSS 已够用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
