使用CSS制作只有上邊是圓角的盒子

隨著CSS3的推出，圓角盒子已經成為了網頁中非常流行的一個設計元素。不過有時候，我們只需要把盒子的上邊做成圓角，而其他的邊則保持直角不變。今天，我們就來講一講如何使用CSS實現這種效果。

首先，我們需要了解一下CSS中border-radius屬性的用法。這個屬性可以設置盒子四個角的圓角半徑，如下圖所示：

.box {
border-radius: 10px;  /* 四個角都是圓角 */
}

如果我們只想讓盒子的上邊是圓角，可以使用border-top-left-radius和border-top-right-radius屬性單獨設置上邊角的圓角半徑，其他三個角則不設置圓角，如下所示：

.box {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

這樣，我們就成功實現了只有上邊是圓角的盒子。另外，我們還可以使用border-bottom-left-radius和border-bottom-right-radius屬性單獨設置下邊角的圓角半徑，其他三個角則不設置圓角。

如此便完成了CSS圓角只要上邊圓的效果，使用這種設計元素可以為網頁帶來更多的美感和視覺效果。