how to make an oval in css?

前端未结

关注

 7  724

甜味超标

I want to make an oval like:

$\"enter$

But when i used this code:

相关标签:

7条回答

清酒与你

2020-12-03 01:32

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.

0 讨论(0)

别跟我提以往

2020-12-03 01:38
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

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)

Example :
```
border-radius: 50%;
```
```
 .oval {
   width: 160px;
   height: 80px;
   background: #a84909;
   border-radius: 50%;
 }
```
```
<div class="oval"></div>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
走了就别回头了

2020-12-03 01:45
All you have to do is to change border-radius: 40px to border-radius: 50%.
```
.oval {
  width: 160px;
  height: 80px;
  background: #a84909;
  border-radius: 50%;
}
```
```
<div class="oval"></div>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
南方客

2020-12-03 01:51

use a percentage as border radius, like: border-radius: 50%;.

0 讨论(0)
发布评论:

提交评论
- 加载中...

日久生厌

2020-12-03 01:52

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

0 讨论(0)

青春惊慌失措

2020-12-03 01:53

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

0 讨论(0)

1 2 下一页