邊界半徑和圖像

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）使代碼段更具響應性。