利用CSS写一个底部弧度效果

来源:互联网 发布:网络电视直播回看 编辑:程序博客网 时间:2024/05/22 14:55
效果图:

代码:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></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">
这里是内容
</div>
</div>
</body>
</html>



原创粉丝点击