中间画了一个圆，下边的这个半圆 怎样实现，求解
2 回答
成者并非一蹴而就
TA贡献20条经验 获得超7个赞
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
*{
border:0;
padding:0;
outline: 0;
margin:0;
}/*CSS SIMPLE RESET*/
.wrap{
position:relative;
width:200px;
height:200px;
background: #FFF;
border:5px solid #DDD;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
-ms-border-radius: 100px;
-o-border-radius: 100px;
border-radius: 100px;
overflow: hidden;
}
.child{
position:absolute;
top:100px;
width:200px;
height:100px;
background: rgba(153,70,10,.69);;
-webkit-border-radius: 0 0 50px 50px;
-moz-border-radius: 0 0 50px 50px;
-ms-border-radius: 0 0 50px 50px;
-o-border-radius: 0 0 50px 50px;
border-radius: 0 0 50px 50px;
}
.child h3{
padding:20px;
text-align: center;
font-family: "微软雅黑";
font-size:12pt;
color:rgba(255, 255, 255, 0.8);;
}
</style>
</head>
<body>
<div>
<div>
<h3>收益完爆<br>普通理财</h3>
</div>
</div>
</body>
</html>放到firefox或者chrome看效果......
两个圆嵌套就行了...
点击展开后面1条
- 2 回答
- 0 关注
- 1658 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消