如何使用 html5 获得椭圆形，css3

Question

<!DOCTYPE html>
 <head>
 <title> Oval shape</title>
 </head>
 <body>
 <div style="width:400px; height:400px; background-color:#ff0;">Oval</div>

  <p> This is Oval shape by using html5, css3.</p>
 <body>
</html>

我写了这样的代码..我想要 div 标记为椭圆形..你能告诉我吗...

Answer 1

html

 <div id="oval">Oval</div> <p> This is Oval shape by using html5, css3.</p>

css

#oval {
width: 200px;
height: 100px;
background: red;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}

见下文link

http://jsfiddle.net/Mithun146/b4k20ruw/

Answer 2

您可以使用 border-radius 来允许动态大小。我还要指出真的不需要前缀 css:

div{
  height:100px;
  width:200px;
  border-radius:50%;
  background-color: #ff0;
  }

<div></div>

如何使用 html5 获得椭圆形，css3

How to get a ovel shape by using html5, css3

html

css

css-shapes