实现一个圆形的可点击区域
1 使用css属性将一个div变成圆形
效果
<!DOCTYPE html>
<html>
<head>
<title>two</title>
<style>
.test{
width: 100px;
height: 100px;
border-radius: 50%;
/* 下面属性不重要 */
background-color: aqua;
}
</style>
</head>
<body>
<div class="test">
</div>
<script>
</script>
</body>
</html>
2 使用map和area来设置圆形区域
这是在图片中心设置一个点击区域
<!DOCTYPE html>
<html>
<head>
<title>one</title>
<style>
.test-div {
width: 400px;
height: 400px;
background-color: aquamarine;
}
</style>
</head>
<body>
<img src="https://www.runoob.com/try/demo_source/planets.gif" class="test-div" usemap="#mapOne">
</img>
<!-- <div class="test-div" usemap="#mapOne">
</div> -->
<map name="mapOne">
<!-- <area shape="rect" coords="0,0,82,126" alt="Sun" href="www.baidu.com"> -->
<area shape="circle" coords="200, 200, 50" target="_blank" href="www.baidu.com">
</map>
</body>
</html>
在实验室使用img标签可以点击, 但是用div就没有想要效果
这是我的签名