CSS中可以通過border-radius屬性來將一個方形邊角改為圓形邊角。但如果想將邊角變成橢圓形該怎么辦呢？這時候我們可以使用兩個border-radius屬性來分別設置水平和垂直方向上的圓角半徑。

.rounded{
border-radius: 30px/50px; /*水平方向半徑為30px，垂直方向半徑為50px*/
}

上面代碼中，30px表示水平方向上的圓角半徑，50px表示垂直方向上的圓角半徑。當水平方向上的圓角半徑小于元素高度的一半時，橢圓形的短軸可以自適應元素的高度；當垂直方向上的圓角半徑小于元素寬度的一半時，橢圓形的長軸可以自適應元素的寬度。

除了使用兩個border-radius屬性來分別設置水平和垂直方向上的圓角半徑，還可以使用border-radius縮寫屬性來實現。如果只設置一個值，則水平和垂直方向上的圓角半徑相等；如果設置兩個值，則第一個值表示水平方向上的圓角半徑，第二個值表示垂直方向上的圓角半徑。如果設置4個值，則依次表示左上角、右上角、右下角和左下角的半徑。

.rounded{
border-radius: 30px 50px; /*水平方向半徑為30px，垂直方向半徑為50px*/
}

上面代碼中，30px表示左上角和右下角的圓角半徑，50px表示右上角和左下角的圓角半徑。

現在你已經知道如何將邊角變為橢圓形了，趕緊去試試吧！