css如何设置椭圆
- 原创
- |
- 浏览：7937
- |
- 更新：
![css如何设置椭圆]()
1![css如何设置椭圆]()
2![css如何设置椭圆]()
3![css如何设置椭圆]()
4![css如何设置椭圆]()
5![css如何设置椭圆]()
6![css如何设置椭圆]()
7
css设置椭圆需要使用到border-radius属性，为了兼容各种大型浏览器，会在border-radius前面添加:-webkit-、-moz-、-ms-、-o- 前缀。css如何设置椭圆呢，让我们一起来看看吧。
方法/步骤
新建一个html文件。如图：
![css如何设置椭圆]()
在html文件里找到<body>标签，在<body>标签里创建一个<div>标签，然后为这个<div>标签添加class="ellipse"。如图：
![css如何设置椭圆]()
为ellipse类设置样式。
1.找到<title>标签，在<title> 标签后面添加一个<style>标签；
2.在<style>标签里设置ellipse类的属性：
.ellipse{
width: 200px;
height: 100px;
background-color: red;
}
![css如何设置椭圆]()
保存好html文件后，使用浏览器打开html文件查看ellipse属性是否设置成功。在浏览器上看到一个红色的矩形就表示ellipse样式设置成功，如图：
![css如何设置椭圆]()
设置椭圆。回到代码页面，在ellipse属性里添加：border-radius:100%; 即可设置椭圆。如图：
为了兼容各种浏览器我们在这里还要添加
-o-border-radius:100%;
-ms-border-radius:100%;
-moz-border-radius:100%;
-webkit-border-radius:100%;
![css如何设置椭圆]()
- 此文章未经许可获取自百度经验
把html文件保存后使用浏览器打开，就可以看到椭圆了。如图：
![css如何设置椭圆]()
html页面上所有代码，如有不明白可以把以下代码复制到新建的html文件上，即可看到椭圆效果。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css制作椭圆</title>
<style>
.ellipse{
width: 200px;
height: 100px;
background-color: red;
border-radius:100%;
-o-border-radius:100%;
-ms-border-radius:100%;
-moz-border-radius:100%;
-webkit-border-radius:100%;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
END
