<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test页面</title> <style type="text/css"> /*关于css3 的两个伪类 ::before ::after*/ .box{ margin: 0 auto; width: 360px; height: 500px; } /*头部*/ .box_head{ margin: 0px auto; width: 260px; height: 140px; background-color: greenyellow; border-radius: 130px 130px 0 0; } .box_head::before{ content:''; display: block; width: 26px; height: 26px; border-radius: 13px; background-color: white; transform: translate(170px,58px); } .box_head::after{ content:''; display: block; width: 26px; height: 26px; border-radius: 13px; background-color: white; transform:translate(65px,33px); } /*中间*/ .box_conten{ margin: 0px auto; margin-top:10px; width: 260px; height: 240px; background-color: greenyellow; border-radius: 0 0 30px 30px; } .box_conten::before{ content:''; display: block; width: 50px; height: 180px; border-radius: 12px; background-color: greenyellow; transform: translate(-70px,20px); } .box_conten::after{ content:''; display: block; width: 50px; height: 180px; border-radius: 12px; background-color:greenyellow; transform:translate(280px,-162px); } /*底部*/ .footer{ margin: 0px auto; width:50px; height: 20px; } .footer::before{ content:''; display: block; width: 50px; height: 135px; border-radius: 0 0 15px 15px; background-color: greenyellow; transform: translate(-51px,-8px); } .footer::after{ content:''; display: block; width: 50px; height: 135px; border-radius: 0 0 15px 15px; background-color: greenyellow; transform: translate(51px,-143px); } </style> </head> <body> <div class="box"> <div class="box_head"></div> <div class="box_conten"></div> <div class="footer"></div> </div> </body> </html>
