admin 发表于 2023-1-4 10:05:10

css3椭圆或半椭圆特效制作

css3椭圆或半椭圆特效制作

然后通过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>输出结果界面如下:



页: [1]
查看完整版本: css3椭圆或半椭圆特效制作