用border-radius:50%实现正圆按钮需宽高相等；box-shadow可模拟图标但需注意多层性能；必须补充:hover/:focus样式及aria-label以保障可访问性。
border-radius 做圆角图标按钮的关键取值
纯靠 border-radius 实现图标按钮，核心是让宽高相等且 border-radius 设为 50% —— 这样才能得到正圆。如果容器宽高不一致，50% 会变成椭圆；如果设成固定像素（比如 12px），缩放或响应式时容易失真。
实操建议：
- 用
width和height显式设为相同值（如40px） -
border-radius: 50%必须写，不能省略单位或写成100% - 避免依赖父容器 padding 或 line-height 撑开尺寸，否则圆角易塌陷
box-shadow 模拟图标的常用技巧
box-shadow 本身不生成内容，但能通过多层阴影叠加出「图标感」：比如用一个偏移阴影模拟箭头、用内阴影模拟凹陷按钮、用扩散阴影模拟光晕效果。它比伪元素轻量，也比 SVG 更易动态控制颜色和大小。
常见组合示例（单个按钮）：
button {
width: 40px;
height: 40px;
border-radius: 50%;
background: #4a6fa5;
box-shadow:
0 0 0 2px #fff, /* 外圈白边 */
0 -2px 0 2px #4a6fa5, /* 上方加厚，模拟「∨」箭头顶部 */
0 2px 0 2px #4a6fa5; /* 下方加厚，补全对称感 */
}注意：box-shadow 的第四值（扩张半径）是关键，它能无损扩大阴影范围而不影响布局流。
点击反馈与可访问性不能只靠视觉
仅用 border-radius + box-shadow 做图标按钮，容易忽略交互状态。比如悬停时只改背景色，但没调整阴影层次，会导致视觉“掉帧”；又或者没加 focus 样式，键盘用户无法感知焦点。
必须补充的几处：
- 给
:hover加一层更明显的box-shadow（如0 0 8px rgba(0,0,0,0.2)） - 给
:focus加outline: 2px solid #3b97d3，并确保不被box-shadow遮盖 - 按钮需有明确的
aria-label，例如，否则屏幕阅读器读不出意图
在真实项目中慎用纯 CSS 图标按钮
这种方案适合极简 UI、加载态占位、或需要高频切换颜色的小操作按钮（如静音、折叠）。但它有硬伤：无法缩放不失真、难以表达复杂图形（如齿轮、设置）、多分辨率下阴影模糊程度不一致。
真正要长期维护的项目，建议：
- 简单几何图标（✓ ✗ ▼ ◀）可用此法，但超过 3 个不同图标就该切 SVG
- 若需支持深色模式，
box-shadow的颜色值必须用 CSS 变量而非写死色值 - 测试时重点看 iOS Safari —— 它对多层
box-shadow的渲染性能较敏感，过多层可能卡顿
圆角和阴影只是表层，按钮的本质是「可识别、可操作、可反馈」——样式只是其中一环。
