Html 如何在css中制作椭圆形？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26961221/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to make an oval in css?
提问by rachid
I want to make an oval like:
我想做一个椭圆形，如：
But when i used this code:
但是当我使用这段代码时：
<!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>
It gives me this:
它给了我这个：
To make a circle it works, but an oval not.
做一个圆形它可以工作，但一个椭圆形不行。
采纳答案by Ali Aboussebaba
All you have to do is to change border-radius: 40pxto border-radius: 50%.
您所要做的就是更改border-radius: 40px为border-radius: 50%。
.oval {
width: 160px;
height: 80px;
background: #a84909;
border-radius: 50%;
}<div class="oval"></div>回答by web-tiki
You need to set the border radius in percentage :
您需要以百分比设置边框半径：
Percentage : Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipsis, using percentage values. Percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. Negative values are invalid.
百分比 ：使用百分比值表示圆半径或椭圆的长半轴和短半轴的大小。横轴的百分比是指盒子的宽度，纵轴的百分比是指盒子的高度。负值无效。
source : MDN
来源：MDN
For a detailed explanation of why pixel values for border-radius can't output an oval shape see Border-radius in percentage (%) and pixels (px)
有关为什么 border-radius 的像素值无法输出椭圆形状的详细说明，请参阅以百分比 (%) 和像素 (px) 表示的 Border-radius
Example :
例子 ：
border-radius: 50%;
.oval {
width: 160px;
height: 80px;
background: #a84909;
border-radius: 50%;
}<div class="oval"></div>回答by delbertooo
use a percentage as border radius, like: border-radius: 50%;.
使用百分比作为边界半径，例如：border-radius: 50%;。
回答by FeliceM
Try this:
尝试这个：
.oval {
width: 160px;
height: 80px;
background: #a84909;
moz-border-radius: 80px / 40px;
webkit-border-radius: 80px / 40px;
border-radius: 80px / 40px;
}
PS. I do not have the compiler in front of me so there may be some minor error.
附注。我面前没有编译器，所以可能会有一些小错误。
回答by FeliceM
<!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>
An other way of thinking is explained here.
回答by Billy
All the previous answers, He doesn't want a circle according to his question. He wants an Oval. This works but there is probably a better way.
之前所有的答案，根据他的问题，他不想要一个圆圈。他想要一个椭圆形。这有效，但可能有更好的方法。
#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"> </div><div id="oval"> </div><div id="two"> </div>回答by Bogdan Alexandru Militaru
.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>If you want more shapes, you can generate these using
如果你想要更多的形状，你可以使用
http://enjoycss.com/code/
