* { margin:0; padding:0; } .center { width:350px; height:450px; margin:0 auto; /* border:1px solid red; */ position:relative; transition:all 5s ease; } .center:hover { opacity:.01; background-color:aquamarine; } .head-left,.head-right { width:50px; height:5px; background-color:greenyellow; position:absolute; top:30px; } .head-left { left:60px; transform:rotate(45deg); } .head-right { right:60px; transform:rotate(-45deg); } .face { position:absolute; top:10px; left:calc(50% - 100px); width:200px; height:100px; background-color:greenyellow; border-radius:100px 100px 0 0; } .eyes-left,.eyes-right { width:15px; height:15px; background-color:black; border-radius:50%; position:absolute; top:60px; } .eyes-left { left:100px; } .eyes-right { right:100px; } .belly { width:200px; height:230px; background-color:greenyellow; position:absolute; top:120px; left:75px; border-radius:0 0 20px 20px } .hand-left,.hand-right { width:50px; height:180px; background-color:greenyellow; border-radius:30px 30px 30px 30px; position:absolute; top:130px; } .hand-right { right:0; } .foot-left,.foot-right { width:50px; height:100px; background-color:greenyellow; position:absolute; bottom:25px; border-radius:30px 30px 30px 30px; } .foot-left { left:110px; } .foot-right { right:110px; }
圆角 border-radius的简单使用方式.