css - 如何设计具有椭圆圆边的矩形 div？

Question

如何设计带有椭圆圆边的矩形 div？

Answer 1

设置border-radius为50%即可得到椭圆。

你可以得到两个元素，一个在另一个里面，大小不同，这样就得到了所需的 2 个椭圆

.test {
    position: absolute;
    left: 40px;
    top: 40px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden; 
}


.test:after {
    content: "";
    position: absolute;
    left: -30%;
    top: 10%;
    width: 160%;
    height: 80%;
    background-color: lightblue;
    border-radius: 50%;

}

在这种情况下，使用伪元素，因此只需要一个 div

demo