边界半径和图像

Question

我需要将图像的边框放置到半圆，但我无法将图像放置在控制图像出现次数的圆形中。 在第二种情况下，我应该能够单击图像或其他某种机制将我带到另一个页面。

我的代码：

 .box { width: 500px; height: 250px; background-color: coral; border: 10px solid burlywood; border-top-left-radius: 500px; border-top-right-radius: 500px; border-image-source: url("punto1.png"); }

 <div class="box"></div>

图片：

Answer 1

如果您希望图像出现在半圆内，您需要使用background-image而不是border-image-source 。

要将整个内容变成链接，请使用<a>标签。 像这样：

<a href="/example/page/">
    <div class="box"></div>
</a>

Answer 2

如果您将图像作为背景而不是作为边框，您将（部分地）在半圆中看到它。 此片段定位和调整图像大小，以便填充半圆。

它还把整个东西放到一个锚元素中，所以它是可点击的。

 .box { width: 500px; height: 250px; background-color: coral; border: 10px solid burlywood; border-top-left-radius: 500px; border-top-right-radius: 500px; background-image: url(https://picsum.photos/id/1015/300/200); background-repeat: no-repeat no-repeat; background-size: cover; background-position: center center; }

 <a href="#"><div class="box"></div></a>

 .box { width: 500px; height: 250px; background-color: coral; border: 10px solid burlywood; border-top-left-radius: 500px; border-top-right-radius: 500px; border-image-source: url("punto1.png"); }

 <div class="box"></div>

注意：如果需要，您可以使用相对单位（例如 %s）而不是固定单位（例如 px）使代码段更具响应性。