前端CSS圓角

在前端開發中，經常會需要設置元素的圓角，通常使用border-radius屬性實現。該屬性可用于設置一個元素所有四個角的圓角大小，也可以分別設置四個角的大小。

以下是一個示例盒子，設置了5px的圓角：

.box {
width: 200px;
height: 200px;
background-color: #f7f7f9;
border-radius: 5px;
}

接下來將展示一些常見的圓角效果：

1. 上部分圓角，下部分直角。

.box1 {
border-top-left-radius: 50px;
border-top-right-radius: 50px;
background-color: #d8e5ee;
}

2. 下部分圓角，上部分直角。

.box2 {
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
background-color: #dee5d8;
}

3. 上下左右兩個對角線方向的圓角。

.box3 {
border-top-left-radius: 50px;
border-bottom-right-radius: 50px;
background-color: #e5d8d8;
}