色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css橢圓形圓心怎么設置

錢瀠龍2年前9瀏覽0評論

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屬性設置相應的圓心位置即可。