summary 默认小三角应通过 list-style: none 清除，而非 display 或 float；::marker 可控但 safari 15.4 前不支持；自定义图标用 ::after 更稳妥，动画仅用 transform + transition 避免重排。
summary 默认带的小三角（▶/▼）可以去掉，但不能靠删 DOM 或设 display: block 硬压——那样会破坏可访问性和点击逻辑。
用 list-style: none 清除原生箭头最稳妥
所有现代浏览器都支持这个写法，且不影响 summary 的按钮语义和键盘焦点能力：
summary {
list-style: none;
}
这是第一步，也是必须做的。不加这句，后续自定义图标可能被原生箭头干扰或叠在一起。
::marker 在新浏览器里能精细控制，但 Safari 旧版不认
::marker 是专门用来选中 summary 前那个小符号的伪元素，但它在 Safari 15.4 之前完全不支持。如果你项目要兼容 iOS 16 之前的设备，别依赖它。
-
summary::marker { content: ""; }—— 清空原生符号（Chrome 115+/Firefox 117+ OK） -
summary::after { content: "▶"; margin-left: 6px; }—— 手动补图标，更稳 -
details[open] summary::after { transform: rotate(90deg); }—— 展开时转箭头方向
千万别碰 display 和 float 这两个属性
给 summary 设 display: block 或 float: left 是高频翻车点：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 它会让
summary失去原生按钮行为：空格/回车无法触发展开，屏幕阅读器读不出“可切换”语义 - Safari 可能直接忽略点击，尤其当
summary不是details的第一个子元素时 - 移动端点击区域变小，手指点不准
真要布局对齐？用 flex 或 grid 包一层容器，别动 summary 自身的 display。
箭头动画只该用 transform，别碰 height 或 margin
想让箭头旋转平滑，只对 ::after 做 transform + transition：
summary::after {
content: "▶";
transition: transform 0.2s;
}
details[open] summary::after {
transform: rotate(90deg);
}
避免用 margin-left 动画位移——它会触发布局重排，卡顿明显；也别试图用 height 控制箭头显隐，::after 没有 height 概念。
真正容易被忽略的是：哪怕你只改一个像素的 margin，只要它在 transition 里，就可能让整行重绘。箭头动效这事，越轻量越可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
