css如何设置椭圆

 时间:2026-02-14 04:46:30

1、新建一个html文件。如图:

css如何设置椭圆

2、在html文件里找到<body>标签,在<body>标签里创建一个<div>标签,然后为这个<div>标签添加class="ellipse"。如图:

css如何设置椭圆

3、为ellipse类设置样式。

1.找到<title>标签,在<title> 标签后面添加一个<style>标签;

2.在<style>标签里设置ellipse类的属性:

.ellipse{

    width: 200px;

    height: 100px;

    background-color: red;

}

css如何设置椭圆

4、保存好html文件后,使用浏览器打开html文件查看ellipse属性是否设置成功。在浏览器上看到一个红色的矩形就表示ellipse样式设置成功,如图:

css如何设置椭圆

5、设置椭圆。回到代码页面,在ellipse属性里添加:border-radius:100%;  即可设置椭圆。如图:

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

-o-border-radius:100%;

-ms-border-radius:100%;

-moz-border-radius:100%;

-webkit-border-radius:100%;

css如何设置椭圆

6、把html文件保存后使用浏览器打开,就可以看到椭圆了。如图:

css如何设置椭圆

7、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>

  • b站竖屏模式怎么关
  • 灵魂潮汐3-2攻略
  • bilibili如何更换开启画面?
  • 恶魔少女怎么退出商店
  • visual studio Win窗体应用,属性说明不显示
  • 热门搜索
    淘宝花呗怎么开通 马自达怎么样 梗概怎么写 公务员考试常识题 歧视的近义词 邮费怎么算 怎么知道自己怀孕 鸡眼怎么治最快 亲爱的用英文怎么说 侵蚀的近义词