<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * {margin: 0;padding: 0;} .box { width: 380px;height: 186px; position: absolute; top: 50%;left: 50%; margin-top: -93px; margin-left: -190px; /* 盒子整体在浏览器居中 */ } .box div { width: 100px;height: 100px; border: 10px solid black; border-radius: 50%; /* 画圆 */ position: absolute; } .box .circle1 { border-color: red; top: 0;left: 0; } .box .circle2 { border-color: green; top: 0;left: 130px; z-index: 1; /* 提升层级 */ } .box .circle3 { border-color: yellow; top: 0;left: 260px; } .box .circle4 { border-color: blue; top: 70px;left: 65px; } .box .circle5 { border-color: purple; top: 70px;left: 195px; } /* 每个⚪设置各自颜色，添加偏移量 */ </style> </head> <body> <div class="box"> <div class="circle1"></div> <div class="circle2"></div> <div class="circle3"></div> <div class="circle4"></div> <div class="circle5"></div> </div> </body> </html>
效果图： 百度>>五环（滑稽）