CSS是一種用來(lái)美化網(wǎng)頁(yè)樣式的語(yǔ)言，除了常見(jiàn)的常用標(biāo)簽，CSS還給我們提供了制作橢圓的方式。

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

上述代碼中，我們使用了border-radius屬性來(lái)實(shí)現(xiàn)橢圓的效果。該屬性一共可以接受四個(gè)值，分別為左上角、右上角、右下角、左下角的圓角半徑值。而我們只需要將這四個(gè)值設(shè)為相等的一個(gè)百分比值即可實(shí)現(xiàn)完整的橢圓。如果我們只希望橢圓的某個(gè)角落有圓角，可以為該角添加單獨(dú)的值。

如下代碼只將左上角和右下角設(shè)置為圓角：

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

如果想要制作不同分辨率下的響應(yīng)式橢圓，可以利用CSS媒體查詢來(lái)實(shí)現(xiàn)。

@media screen and (max-width: 768px) {
.ellipse {
width: 150px;
height: 75px;
}
}
@media screen and (max-width: 480px) {
.ellipse {
width: 100px;
height: 50px;
}
}

上述代碼中，我們通過(guò)媒體查詢根據(jù)屏幕寬度來(lái)改變橢圓的大小，實(shí)現(xiàn)了響應(yīng)式布局。

CSS提供了很多制作橢圓的方案，使用何種方式取決于實(shí)際需要，只需要熟練運(yùn)用，就可以輕松實(shí)現(xiàn)各種效果。