这道题目是比较开放的题目，答案显然是不只一个的，考察你的应变能力，要能拿出多几个解决方案，获取面试官的芳心。以下给大家讲解三种解决方案。

1. map+area
   [html] view plain copy
   

1. border-radius（H5）
   [html] view plain copy
   
   智学无忧

1. 纯js实现
   需要求一个点在不在圆上简单算法、获取鼠标坐标等等
   两点之间的距离计算公式
   上面公式对于JavaScript代码如下：

|AB|=Math.abs(Math.sqrt(Math.pow(X2-X1),2)+Math.pow(Y2-Y1,2)))
Math.abs()求绝对值
Math.pow(底数,指数)
Math.sqrt()求平方根
示例：
假设圆心为（100,100）,半径为50，在圆内点击弹出相应的信息，在圆外显示不在圆内的信息
[javascript] view plain copy
document.onclick=function(e){
var r=50;//圆的半径
var x1=100,y1=100,x2= e.clientX;y2= e.clientY;
//计算鼠标点的位置与圆心的距离
var len=Math.abs(Math.sqrt(Math.pow(x2-x1,2)+Math.pow(y2-y1,2)));
if(len<=50){
console.log(“内”)
}else{
console.log(“外”)
}
}