CSS3实现底部弧度效果
CSS3实现底部弧度效果伪类实现：
效果图：
<!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>
不需要伪类实现的：
效果图：
<!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>
页:
[1]