blocks|key|4557345|text|您需要做的就是将border-radius:+40px更改为border-radius:+50%25。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4557346|​|4557347|.oval+{
++width:+160px;
++height:+80px;
++background:+#a84909;
++border-radius:+50%25;
}|code-block|syntax|javascript|4557348|<div+class="oval"></div>|4557349|4557350|entityMap^0|8|J|U|I|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|X|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|Z|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|Q|$]]

<p>All you have to do is to change <code>border-radius: 40px</code> to <code>border-radius: 50%</code>. </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.oval {
  width: 160px;
  height: 80px;
  background: #a84909;
  border-radius: 50%;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="oval"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4557173|text|使用百分比作为边界半径，如：border-radius:+50%25;。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4557174|entityMap^0|E|J|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>use a percentage as border radius, like: <code>border-radius: 50%;</code>.</p>


blocks|key|50636|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|50637|+++++.oval+{
++++++++++++width:+160px;
++++++++++++height:+80px;
++++++++++++background:+#a84909;
++++++++++++moz-border-radius:+80px+/+40px;
++++++++++++webkit-border-radius:+80px+/+40px;
++++++++++++border-radius:+80px+/+40px;
++++++++++++}|code-block|syntax|javascript|50638|PS。我的前面没有编译器，所以可能会有一些小错误。|50639|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Try this:</p>

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

<p>PS. I do not have the compiler in front of me so there may be some minor error.</p>


blocks|key|4557275|text|<!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%25;
++++++++++++}
++++++++</style>
++++</head>
++++<body>
++++++++<div+class="oval"></div>
++++</body>
</html>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4557276|另一种思维方式是解释here。|unstyled|offset|length|4557277|entityMap|0|LINK|mutability|MUTABLE|url|http://css-tricks.com/the-shapes-of-css/^0|0|A|4|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|R|8|@]|9|@$G|S|H|T|1|U]]|A|$]]|$1|I|3|-4|5|F|7|V|8|@]|9|@]|A|$]]]|J|$K|$5|L|M|N|A|$O|P]]]]

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;meta http-equiv="Content-Type" content="text/html"; charset="utf-8" /&gt;
        &lt;title&gt;Oval&lt;/title&gt;
        &lt;style type="text/css"&gt;
            .oval {
                width: 160px;
                height: 80px;
                background: #a84909;
                border-radius: 50%;
            }
        &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div class="oval"&gt;&lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>An other way of thinking is explained <a href="http://css-tricks.com/the-shapes-of-css/" rel="nofollow">here</a>.</p>


blocks|key|4557421|text|所有之前的答案，他不想根据他的问题的圆圈。他想要一个椭圆形。这是可行的，但可能还有更好的方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4557422|​|4557423|#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%25;position:relative;left:100px;}
#two{background-color:green;+display:inline-block;width:200px;height:100px;border-radius:50%25;position:relative;left:-100px;}|code-block|syntax|javascript|4557424|<div+id="one">&nbsp;</div><div+id="oval">&nbsp;</div><div+id="two">&nbsp;</div>|4557425|4557426|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>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.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#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;}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="one"&gt;&amp;nbsp;&lt;/div&gt;&lt;div id="oval"&gt;&amp;nbsp;&lt;/div&gt;&lt;div id="two"&gt;&amp;nbsp;&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|50867|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|50868|.oval+{
++width:+10px;/*change+here*/
++height:+157px;/*+or+here+if+you+want+to+be+more+sharper*/
++border-radius:+50%25;
++background:+#1abc9c;
}|code-block|syntax|javascript|50869|<div+class="oval"></div>|50870|50871|如果您想要更多的形状，可以使用|50872|http://enjoycss.com/code/|50873|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Q|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|T|8|@]|9|@]|A|$]]|$1|L|3|M|5|D|7|U|8|@]|9|@]|A|$E|F]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.oval {
  width: 10px;/*change here*/
  height: 157px;/* or here if you want to be more sharper*/
  border-radius: 50%;
  background: #1abc9c;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="oval"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>If you want more shapes, you can generate these using</p>

<pre><code>http://enjoycss.com/code/
</code></pre>


<p>I want to make an oval like:</p>

<p><img src="https://i.stack.imgur.com/SxfFZ.png" alt="enter image description here"></p>

<p>But when i used this code:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;meta http-equiv="Content-Type" content="text/html"; charset="utf-8" /&gt;
        &lt;title&gt;Oval&lt;/title&gt;
        &lt;style type="text/css"&gt;
            .oval {
                width: 160px;
                height: 80px;
                background: #a84909;
                border-radius: 40px;
            }
        &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div class="oval"&gt;&lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>It gives me this:</p>

<p><img src="https://i.stack.imgur.com/uRZHH.png" alt="enter image description here"></p>

<p>To make a circle it works, but an oval not.</p>


how to make an oval in css?

编译器

我想做一个椭圆形：​​但是当我使用这段代码时：<!DOCTYPE html><html>    <head>        <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />        <title>Oval</title>        <style type="text/css">         

问如何在css中做一个椭圆？
EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在css中做一个椭圆？EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在css中做一个椭圆？
EN