<html>
<head>
<style>
body{background-color: #ccc}
#main{background-color: #f57923
width: 415pxheight:300px
margin: 150px auto
border-radius: 25px}
#left,#right{background-color: #fff
margin-top:40px
height:220px}
#left{float:left
width:250px
margin-left:35px
border-top-right-radius: 65px
z-index: -99999}
#inner{background-color: #f57923
width:140px
height: 170px
margin-top:50px
border-top-right-radius: 40px
margin-left: 55px
z-index:10}
#center{background-color:#fff
position: relative
width: 50px
height: 125px
top:45px
left: 45px
z-index:999999}
#right{float: right
width: 50px
margin-right:35px}
</style>
</head>
<body>
<div id=”main”>
<div id=”left”>
<div id=”inner”>
<div id=”center”></div>
</div>
</div>
<div id=”right”></div>
</div>
</body>
</html>
在浏览器打开的效果
1、首先#big左浮动和#right右浮动，right你没有右浮动，right右浮动后设备宽高。2、#heart不要设上边距，#small 设上填充，并更改相应数值。
3、CSS边框半径，很多浏览器不支持，改后在我电脑上只有360 6.3正常显示。
#big的圆角建议用背景图片做，这并没有改变纯CSS制做的原则。
以下为改动地方：
#heart {
width:33px
height: 77px
margin-left: 28px
margin-right: 28px
background-color:orange
display: block
}
#small {
width:89px
height: 77px
margin-left: 35px
margin-top: 35px
margin-right: 35px
background-color:white
border-radius: 0px 19px 0px 0px
padding-top: 28px
}
增加：
#right {
float: right
height: 140px
width: 33px
background-color: #FFA500
}
