如何使用html5,css3获得椭圆形状

时间:2015-01-02 07:07:33

标签: html5 css3 css-shapes

<!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标签为椭圆形......你能告诉我......

2 个答案:

答案 0 :(得分:3)

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;
}

请参阅以下链接

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

答案 1 :(得分:0)

您可以使用border-radius来允许动态尺寸。我还要指出,这个css的前缀不存在

&#13;
&#13;
div{
  height:100px;
  width:200px;
  border-radius:50%;
  background-color: #ff0;
  }
&#13;
<div></div>
&#13;
&#13;
&#13;