css实现椭圆、半椭圆

迈不过友情╰ 2022-12-12 15:22 219阅读 0赞

# css实现椭圆、半椭圆 #

参考自[css实现椭圆、半椭圆][css]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>css实现椭圆、半椭圆</title>
        <style>
            .ellipse {
                width: 250px;
                height: 150px;
                margin: 50px;
                background: #FFD900;
                /*左上 右上 右下 左下*/
                border-radius: 50% / 50%;
                /*相当于：border-radius: 50%；*/
                /*border-radius: 左上角水平圆角半径大小 右上角水平圆角半径大小 右下角水平圆角半径大小 左下角水平圆角半径大小/左上角垂直圆角半径大小 右上角垂直圆角半径大小 右下角垂直圆角半径大小 左下角垂直圆角半径大小*/
            }
    
            .ellipse1 {
                width: 550px;
                height: 150px;
                margin: 50px;
                background: #FFD900;
                border-radius: 50% / 100% 100% 0 0;
            }
    
            .ellipse2 {
                width: 450px;
                height: 100px;
                margin: 50px;
                background: #FFD900;
                border-radius: 100% 0 0 50%;
            }
    
            .ellipse3 {
                width: 350px;
                height: 100px;
                margin: 50px;
                background: #FFD900;
                border-radius: 50% / 100% 0 0 0;
            }
        </style>
    </head>
    <body>
    <div class="ellipse"></div>
    <div class="ellipse1"></div>
    <div class="ellipse2"></div>
    <div class="ellipse3"></div>
    </body>
    </html>

效果图如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ZpZ2h0aW5nX05vMQ_size_16_color_FFFFFF_t_70_pic_center]

[css]: https://www.cnblogs.com/Anita-meng/p/7873242.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ZpZ2h0aW5nX05vMQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/f69ad181391745a79ecb9586e0a4bfd8.png