如何在css中制作椭圆形？

igetnqfo 于 2022-11-19 发布在其他

关注(0)|答案(8)|浏览(173)

我想做一个椭圆形像这样：

但是当我使用这个代码时：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
        <title>Oval</title>
        <style type="text/css">
            .oval {
                width: 160px;
                height: 80px;
                background: #a84909;
                border-radius: 40px;
            }
        </style>
    </head>
    <body>
        <div class="oval"></div>
    </body>
</html>

它告诉我：

做一个圆是可行的，但做一个椭圆就不行了。

css

来源：https://stackoverflow.com/questions/26961221/how-to-make-an-oval-in-css

8条答案

按热度按时间

nzrxty8p1#

您只需将border-radius: 40px更改为border-radius: 50%。
第一个

赞(0）回复(0）举报 2022-11-19

kqlmhetl2#

您需要以百分比设置边框半径：
百分比：使用百分比值表示圆半径的大小，或椭圆的长半轴和短半轴。水平轴的百分比是指框的宽度，垂直轴的百分比是指框的高度。负值无效。
资料来源：MDN
有关为什么border-radius的像素值不能输出椭圆形状的详细说明，请参见Border-radius in percentage (%) and pixels (px)
示例：

border-radius: 50%;

第一次

赞(0）回复(0）举报 2022-11-19

42fyovps3#

使用百分比作为边界半径，例如：border-radius: 50%; .

赞(0）回复(0）举报 2022-11-19

ldioqlga4#

试试看：

.oval {
            width: 160px;
            height: 80px;
            background: #a84909;
            moz-border-radius: 80px / 40px;
            webkit-border-radius: 80px / 40px;
            border-radius: 80px / 40px;
            }

PS.我面前没有编译器，所以可能会有一些小错误。

赞(0）回复(0）举报 2022-11-19

1dkrff035#

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
        <title>Oval</title>
        <style type="text/css">
            .oval {
                width: 160px;
                height: 80px;
                background: #a84909;
                border-radius: 50%;
            }
        </style>
    </head>
    <body>
        <div class="oval"></div>
    </body>
</html>

另一种思维方式是here。

赞(0）回复(0）举报 2022-11-19

wd2eg0qa6#

前面所有的答案，根据他的问题，他不想要一个圆。他想要一个椭圆。这是可行的，但可能有一个更好的方法。
第一个

赞(0）回复(0）举报 2022-11-19

insrf1ej7#

第一个
如果需要更多形状，可以使用