如何设置<a>标签为圆形且仅圆形区域可点击？

解决方案 #

给<a>标签补充overflow: hidden属性即可实现需求。
border-radius默认仅修改元素的视觉渲染效果，不会限制点击事件的触发范围。添加overflow: hidden后，<a>标签超出圆角范围的区域会被完全裁剪，对应的点击事件也只会在圆形区域内触发。

另外建议给内部<img>添加display: block属性，消除行内元素默认的基线下方空隙，避免出现尺寸偏差。

正确代码示例 #

<a href="https://example.com/path/to/file.txt" style="display: block; border-radius: 50%; overflow: hidden;">
    <img src="image.png" style="display: block; width: 100%;">
</a>

如果你的图片尺寸是固定的，也可以直接给<a>标签设置和图片完全一致的宽高，进一步保证点击区域和视觉圆形完全匹配。

内容的提问来源于stack exchange，提问作者Makonede