<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定位练习1</title> <style type="text/css"> .con{ width:100px; height:100px; background-color:gold; margin:50px auto 0; position:relative; border-radius:14px; /* 角是圆的 */ } .box{ width:28px; height:28px; background-color:red; color:#fff; text-align: center; line-height:28px; position:absolute; left:86px; top:-14px; border-radius:14px; /* 圆形 */ } </style> </head> <body> <div class="con"> <div class="box">5</div> </div> </body> </html>
页面效果：