中間畫了一個圓，下邊的這個半圓 怎樣實現(xiàn)，求解
2 回答
成者并非一蹴而就
TA貢獻(xiàn)20條經(jīng)驗 獲得超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看效果......
兩個圓嵌套就行了...
添加回答
舉報
0/150
提交
取消