css怎样设置椭圆

百变鹏仔 4个月前 (09-20) #CSS

文章标签椭圆

css设置椭圆的方法：1、给元素添加“{width:宽度值;height:高度值;}”样式，将元素设置为矩形；2、给矩形元素添加“{border-radius:100%;}”圆角样式将其设置为椭圆即可。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

css设置椭圆的方法

1、我们可以先给div元素创建成矩形，然后使用css的border-radius属性类设置矩形的圆角，就可以得到椭圆，代码如下：

先创建一个矩形

立即学习“前端免费学习笔记（深入）”；

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>css制作椭圆</title><style>.ellipse{width: 200px;height: 100px;background-color: red;}</style></head><body><div class="ellipse"></div></body></html>

输出结果：

2、然后通过border-radius属性来设置圆角，在ellipse属性里添加：border-radius:100%; 即可设置椭圆。

为了兼容各种浏览器我们在这里还要添加

-o-border-radius:100%;-ms-border-radius:100%;-moz-border-radius:100%;-webkit-border-radius:100%;

代码如下：

<!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 class="ellipse"></div></body></html>

输出结果：

更多编程相关知识，请访问：编程视频！！

文章推荐

css怎样设置椭圆

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写