CSS長方形上的半圓，是我們開發網頁時經常需要的一種效果。通過使用CSS的border-radius屬性，我們可以輕松地將長方形變成一個擁有半圓形的矩形。

.box {
width: 200px;
height: 100px;
background-color: #f0f0f0;
border-radius: 50px 50px 0 0;
}

上面的代碼將會生成一個200x100像素的長方形，在左右兩側分別有半徑為50像素的圓角。同時，由于border-radius屬性使用了四個值，分別為左上角、右上角、右下角、左下角，因此這個長方形的底部就會是平直的。

如果我們想要在底部也加入半圓形，可以使用如下代碼：

.box {
width: 200px;
height: 100px;
background-color: #f0f0f0;
border-radius: 50px 50px 0 0 / 100px;
}

這里，我們在border-radius屬性的末尾加入了"/ 100px"，表示將圓角的半徑設為100像素。

當然，我們也可以設定每個角的半徑大小，如下：

.box {
width: 200px;
height: 100px;
background-color: #f0f0f0;
border-radius: 50px 20px 30px 40px / 100px 50px 40px 30px;
}

上面的代碼將會生成一個四個角半徑不相同的矩形，如果你對CSS比較熟悉，這應該很容易理解。如果還不太明白，可以試著修改代碼中的數值，看看效果有何變化。