Question

我想制作一个椭圆形：

enter image description here

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

<!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>

它给了我这个：

enter image description here

制作一个圆圈，但不是圆形。

Answer 1

您所要做的就是将border-radius: 40px更改为border-radius: 50%。

.oval {
  width: 160px;
  height: 80px;
  background: #a84909;
  border-radius: 50%;
}

<div class="oval"></div>

Answer 2

您需要以百分比设置边框半径：

百分比：使用百分比表示圆半径的大小，或省略号的半长轴和半短轴值。横轴的百分比是指横轴的宽度框中，垂直轴的百分比是指框的高度。负值无效。

来源：MDN

有关为什么border-radius的像素值无法输出椭圆形状的详细说明，请参阅Border-radius in percentage (%) and pixels (px)

示例：

border-radius: 50%;

 .oval {
   width: 160px;
   height: 80px;
   background: #a84909;
   border-radius: 50%;
 }

<div class="oval"></div>

Answer 3

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

Answer 4

试试这个：

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

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

Answer 5

<!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。

Answer 6

所有以前的答案，他根据他的问题不想要一个圆圈。他想要一个椭圆形。这有效，但可能有更好的方法。

#oval{position:relative;background-color:green;width:20px;height:100px;  
  display:inline-block;z-index:100;
  }
#one{background-color:green; display:inline-block;width:200px;height:100px;border-radius:50%;position:relative;left:100px;}
#two{background-color:green; display:inline-block;width:200px;height:100px;border-radius:50%;position:relative;left:-100px;}

<div id="one">&nbsp;</div><div id="oval">&nbsp;</div><div id="two">&nbsp;</div>

Answer 7

<div class="oval"></div>

http://enjoycss.com/code/

如果您想要更多形状，可以使用

生成这些形状

{{1}}

如何在CSS中制作椭圆形？

7 个答案: