实现一个圆形的可点击区域

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就没有想要效果

posted on   GameCat  阅读(73)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· 本地部署 DeepSeek:小白也能轻松搞定!
· 如何给本地部署的DeepSeek投喂数据,让他更懂你
· 从 Windows Forms 到微服务的经验教训
· 李飞飞的50美金比肩DeepSeek把CEO忽悠瘸了,倒霉的却是程序员
· 超详细,DeepSeek 接入PyCharm实现AI编程!(支持本地部署DeepSeek及官方Dee

导航

< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

统计

点击右上角即可分享
微信分享提示