直接用border-radius: 50%可做出视觉与点击区域均为圆形的按钮，但前提是必须严格设置width和height相等（如48px），否则热区仍为矩形；button需设display: block或inline-block才生效宽高，且默认盒模型即为点击热区。
直接用 border-radius: 50% 就能做出视觉上圆、点击区域也圆的按钮，但前提是宽高必须严格相等；否则点击热区仍是矩形，只是“看起来像圆”。
border-radius: 50% 是最常用但最容易翻车的方式
它不是“画一个圆”，而是把一个正方形的四个角各切掉 50% 的边长。所以：
• 必须同时设置 width 和 height 为相同值（比如都设 48px 或都用 min-width: 48px; min-height: 48px;）
• 只写 border-radius: 50% 不加宽高控制，元素可能还是 inline，默认尺寸下根本看不出变化
• 在 Flex 容器里用 aspect-ratio: 1 / 1 更安全，但注意 Safari 15.4 以下不支持
• button 默认是 inline 元素，不加 display: block 或 inline-block，width/height 无效
• 点击热区默认就是整个盒模型区域，所以只要盒子是正圆，热区自然就是圆——不用 JS 判断坐标
area + shape="circle" 适合图片上的固定圆形热点
当你要在一张静态图（比如地图、产品示意图）上定义某个圆形区域可点，<area> 是语义正确且原生支持的方式：
• <img usemap="#myMap"> 必须和 <map name="myMap"></map> 的 name 值完全一致（含大小写）
• <area shape="circle" coords="100,100,50" href="#"> 中的三个值分别是圆心 x、y 坐标和半径，单位是像素，原点在图片左上角
• 浏览器对 coords 的解析非常严格：少一个数、多一个空格、顺序错位都会让区域失效
• 不支持响应式缩放——图片尺寸变了，coords 值就得重算，这点比 CSS 方案差很多
JS 坐标距离判断适用于动态或非 DOM 元素场景
当你没法改 HTML 结构（比如 canvas 渲染的图形、SVG 路径、或第三方库生成的 div），只能靠运行时计算点击位置是否落在圆内：
• 核心逻辑是 Math.hypot(e.clientX - cx, e.clientY - cy) ，比手写 <code>Math.sqrt(Math.pow(...)) 更简洁安全
• 注意坐标系：用 clientX/clientY 是相对于视口，而 offsetX/offsetY 是相对于目标元素左上角，选错会导致偏移
• 如果目标元素有滚动、transform 或缩放，必须先用 getBoundingClientRect() 校正圆心坐标
• 这种方式性能开销极小，但每点一次都要算一次，别在 mousemove 里滥用
clip-path: circle() 是灵活但兼容性受限的替代方案
它不改变盒模型尺寸，只“裁出”一个圆形显示区域，适合需要保留原有布局流、又想视觉上变圆的场景：
• clip-path: circle(50% at 50% 50%) 表示以元素中心为圆心、半径为宽高一半画圆
• 和 border-radius 不同，它不影响事件热区——点击区域仍是原始矩形，除非你额外加 pointer-events: none 再套一层遮罩
• Chrome 107+、Firefox 103+、Safari 15.4+ 支持，IE 完全不支持
• 不能用百分比半径配合非正方形容器（比如 width: 200px; height: 100px;），否则会变成椭圆裁剪
真正容易被忽略的是：视觉圆 ≠ 点击圆。很多开发者调完 border-radius 就以为完成了，结果手指点在“圆边”却没触发，其实是热区还是矩形；或者用了 clip-path 却忘了热区没跟着变。判断依据永远只有一个：浏览器 DevTools 的 “Toggle element outline” 功能下，那个亮起的轮廓是不是你想要的圆。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
