你如何使<a>元素循环？

Question

我有一个包含<img>的<a>元素。图像是圆形的，我希望链接也是圆形的。我试过：

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

但链接仍然是方形的，它可以在圆圈外点击。

有什么方法可以将border-radius与<a>元素一起正确使用吗？

Answer 1

为图像和a标记添加边界半径。

a, img {
border-radius: 50%;
}

<a href="#">
<img src="https://i.picsum.photos/id/180/200/200.jpg?hmac=YtJJ-CeQThqv_K6NzUnKS6Q8-tjxUVkSKeDsStrjEyM">
</a>

Answer 2

a, img {
width: 200px;
height: 200px;
border-radius: 50%;
object-fit: cover;
}

<a href="#">
<img src="https://picsum.photos/500/500">
</a>

Answer 3

它在我的设备中工作。

a {
float: left;
shape-outside: circle();
border-radius: 999px;
display: flex;
justify-content: center;
align-items: center;
}
img {
border-radius: 999px;
}

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

Answer 4

只要这样做，它就会工作：

a, img {
border-radius: 50%;
overflow: hidden;
}
<a href="#"> <img src="https://i.picsum.photos/id/180/200/200.jpg?hmac=YtJJ-CeQThqv_K6NzUnKS6Q8-tjxUVkSKeDsStrjEyM"> </a>