CSS是一種用來美化網頁樣式的語言,除了常見的常用標簽,CSS還給我們提供了制作橢圓的方式。
.ellipse { width: 200px; height: 100px; border-radius: 50%; background-color: blue; }
上述代碼中,我們使用了border-radius屬性來實現橢圓的效果。該屬性一共可以接受四個值,分別為左上角、右上角、右下角、左下角的圓角半徑值。而我們只需要將這四個值設為相等的一個百分比值即可實現完整的橢圓。如果我們只希望橢圓的某個角落有圓角,可以為該角添加單獨的值。
如下代碼只將左上角和右下角設置為圓角:
.ellipse { width: 200px; height: 100px; border-radius: 50% 0 0 50%; background-color: blue; }
如果想要制作不同分辨率下的響應式橢圓,可以利用CSS媒體查詢來實現。
@media screen and (max-width: 768px) { .ellipse { width: 150px; height: 75px; } } @media screen and (max-width: 480px) { .ellipse { width: 100px; height: 50px; } }
上述代碼中,我們通過媒體查詢根據屏幕寬度來改變橢圓的大小,實現了響應式布局。
CSS提供了很多制作橢圓的方案,使用何種方式取決于實際需要,只需要熟練運用,就可以輕松實現各種效果。