CSS中橢圓形的創建方法與圓形類似,但需要注意的是,橢圓形與圓形不同,橢圓形有兩個圓心,所以需要設置兩個橢圓心的位置。
.ellipse { width: 200px; height: 100px; border-radius: 50%; background-color: #ccc; position: relative; /*設置為相對定位*/ } .ellipse:before, .ellipse:after { content: ""; /*生成一個空元素*/ position: absolute; /*定位*/ width: 20px; height: 20px; border-radius: 50%; background-color: #000; } .ellipse:before { top: 40px; /*設置左側圓心的位置*/ left: 40px; } .ellipse:after { top: 40px; /*設置右側圓心的位置*/ right: 40px; }
代碼中,我們首先創建一個寬度為200px,高度為100px的橢圓形,使用border-radius設置圓角半徑為50%來實現。接著,我們通過:before和:after偽元素分別創建出兩個圓形,即橢圓形的兩個圓心。再將它們設置為position: absolute;,然后分別通過top、left和top、right屬性設置相應的圓心位置即可。
上一篇css棱形div