CSS中可以使用border-radius屬性來(lái)設(shè)置一個(gè)元素的圓角，但是若想要得到一個(gè)橢圓形的元素就需要特殊操作，這篇文章將會(huì)介紹如何使用CSS按比例縮放橢圓。

.ellipse{
width: 200px;
height: 100px;
border-radius: 50%;
}

首先創(chuàng)建一個(gè)寬200px，高100px的正方形。因?yàn)橥ㄟ^(guò)設(shè)置寬度等于高度的值，可以得到一個(gè)圓形，所以現(xiàn)在我們將border-radius設(shè)置為50%。這樣便可以得到一個(gè)圓了。

.ellipse{
width: 200px;
height: 100px;
border-radius: 50%/25%;
}

接下來(lái)，我們需要使用CSS的縮放轉(zhuǎn)換來(lái)讓這個(gè)圓形變成橢圓形。具體操作是在border-radius屬性后添加一個(gè)斜杠，然后再設(shè)置一個(gè)百分比值。這個(gè)值決定了橢圓的長(zhǎng)短軸的比例。在上面的代碼中，我們將橢圓的長(zhǎng)軸設(shè)置為寬度的50%，短軸設(shè)置為高度的25%。

.ellipse{
width: 400px;
height: 200px;
border-radius: 50%;
transform: scale(0.5);
}

若是想要改變橢圓形的大小，可以使用transform屬性中的scale函數(shù)。在上面的代碼中，我們將寬度和高度都放大一倍，然后使用scale(0.5)將寬度和高度都縮小為原來(lái)的一半。

通過(guò)上面的操作，即可得到一個(gè)按比例縮放的橢圓形。感謝您的閱讀，歡迎交流討論。