在網(wǎng)頁設(shè)計中，常常需要使用圖片進(jìn)行美化和裝飾，而一個常見的需求就是將圖片變成圓形或者半圓形。下面將會介紹如何使用CSS來制作半圓形圖片。

.image {
width: 200px;
height: 100px;
border-radius: 100px 100px 0 0;
overflow: hidden;
}
.image img {
width: 100%;
height: 100%;
}

首先，在HTML中設(shè)置一個div容器，并給其設(shè)定一個固定寬高，同時通過border-radius屬性將其四個角設(shè)置成橢圓形，使其兩個角較大，而兩個角較小。然后，使用overflow屬性來隱藏圖片的溢出部分。最后，在容器內(nèi)部嵌套一張圖片，并設(shè)置其寬度和高度為100%以使圖片充滿容器。

設(shè)置border-radius的四個值，可以通過調(diào)整數(shù)值的大小和順序來達(dá)成不同的效果。例如，將border-radius的四個值都設(shè)置為50%時，可以制作出圓形圖片。

.image {
width: 200px;
height: 200px;
border-radius: 50%;
overflow: hidden;
}
.image img {
width: 100%;
height: 100%;
}

使用CSS制作半圓形圖片非常簡單，只需要使用border-radius屬性即可。這是因為border-radius不僅可以制作圓形，還可以制作橢圓形、半圓形以及其它各種形狀。掌握了這一技巧，可以為網(wǎng)頁增添更多的美感和創(chuàng)意。