logo标签列表

如何在CSS中制作椭圆形？

htmlcsscss-shapes
40

我想制作一个椭圆形，如下图所示：

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>

它给我这个：

在此输入图片描述

制作圆形可以，但椭圆不行。

8个回答
44

您只需将 border-radius: 40px 更改为 border-radius: 50% 即可。

.oval {
  width: 160px;
  height: 80px;
  background: #a84909;
  border-radius: 50%;
}
<div class="oval"></div>

6
你需要以百分比设置边框半径：
百分比：使用百分比值表示圆半径的大小，或椭圆的半长轴和半短轴的大小。水平轴的百分比指盒子的宽度，垂直轴的百分比指盒子的高度。负值无效。
来源：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>

1

.oval {
  width: 10px;/*change here*/
  height: 157px;/* or here if you want to be more sharper*/
  border-radius: 50%;
  background: #1abc9c;
}
<div class="oval"></div>

如果您需要更多形状，可以使用以下方式生成这些形状
http://enjoycss.com/code/
1

试试这个：

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

PS. 我手头没有编译器，因此可能会有一些小错误。

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

这里解释了另一种思考方式此处。

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

所有以前的答案都没有按照他的问题的要求，他想要一个椭圆形。这个方法可以用，但可能有更好的方法。

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

0

.oval {
  background-color: #ff0000;
  width: 200px;
  height: 100px;
  border-radius: 100px/50px;
  border: 1px solid #000000;
  position: absolute;
}
<div class="oval"></div>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接