使用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圆角只要上边圆的效果，使用这种设计元素可以为网页带来更多的美感和视觉效果。