border-radius: 50% 本身不能直接生成圆形按钮，必须配合宽高相等的正方形容器；因其百分比按width和height分别计算：水平半径=width×50%，垂直半径=height×50%，仅当width===height时才形成正圆，否则为椭圆。
直接用 border-radius: 50% 就能做出圆形按钮，但前提是按钮必须是正方形——宽高相等，否则只会得到椭圆或胶囊形。
为什么只写 border-radius: 50% 不行？
因为 border-radius 的百分比值是分别按宽度和高度计算的：水平半径 = 宽 × 50%，垂直半径 = 高 × 50%。如果 width: 120px、height: 40px，那结果就是个横向拉长的椭圆，不是圆。
- 必须同时设置
width和height为相同数值（如都设48px或都用2em） - 避免混用单位：不要写
width: 48px; height: 3rem;，计算后大概率不等 - 用
aspect-ratio: 1 / 1可替代固定宽高，但需注意兼容性（Safari 15.4+ 起支持）
border-radius 的像素值 vs 百分比怎么选？
像素值（如 24px）适合做「固定尺寸的圆角矩形」；而 50% 是唯一能稳定生成正圆的百分比写法，但它只在正方形元素上生效。
- 想做图标按钮（如 ×、❤️），优先用
width: 44px; height: 44px; border-radius: 50% - 想做文字按钮且内容长度不固定？别硬撑正圆，改用大像素圆角（如
border-radius: 32px）配足够padding，更安全 - 避免写
border-radius: 999px—— 浏览器会截断，不如50%明确
按钮内容居中总偏移？Flex 比 line-height 可靠
纯靠 text-align: center + line-height 在不同字体、缩放、浏览器下极易错位，尤其 iOS Safari 对行高解析更敏感。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 加
display: flex; align-items: center; justify-content: center;是最稳解法 - 如果按钮里是 SVG 图标，记得设
vertical-align: middle或包裹一层div避免基线对齐干扰 - 禁用
font-size过小（如10px）+ 大圆角组合，视觉上会显得内容被“挤”到顶部
热区、可访问性、禁用状态这些容易被跳过
视觉是圆的，但用户点不准或读不出，等于没做成。
- 触控热区建议 ≥
44px × 44px，可用padding扩展再用overflow: hidden隐藏溢出 - 纯图标按钮必须加
aria-label，比如<button aria-label="删除">×</button> -
:disabled状态要同步改opacity、cursor: not-allowed和pointer-events: none，否则悬停时仍显示手型
真正难的不是画出圆，而是让这个圆在各种设备、缩放、辅助技术下都“可点、可读、可预期”。border-radius: 50% 只是起点，后面每一步都在补交互的漏洞。
