CSS3实现底部弧度效果

admin · 发表于 2021-3-26 10:54:21

您需要登录才可以下载或查看，没有账号？立即注册

x

CSS3实现底部弧度效果

伪类实现：

效果图：
图示.png

<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>demo</title>
<style type="text/css">
.box { width: 250px; margin: auto; overflow: hidden; }
.home_top { position: relative; width: 100%; height: 100px; text-align: center; line-height: 50px; }
.home_top:after { width: 140%; height: 100px; position: absolute; left: -20%; top: 0; z-index: -1; content: ''; border-radius: 0 0 50% 50%; background: linear-gradient(#2cbaf9, #04a9f4); }
</style>
</head>
<body>
<div class="box">
<div class="home_top"> demo </div>
</div>
<script>
</script>
</body>
</html>

复制代码

不需要伪类实现的：

效果图：
图示2.png

<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>demo</title>
<style type="text/css">
.box { width: 750px; height: 300px; margin: auto; background: linear-gradient(#2cbaf9, #04a9f4);border-radius: 0 0 30% 30%; text-align: center; line-height: 300px; color:#fff;}
</style>
</head>
<body>
<div class="box">
demo
</div>
<script>
</script>
</body>
</html>

复制代码

		自动登录	找回密码
密码			立即注册

[HTML5/CSS3] CSS3实现底部弧度效果