<!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"> <link rel="stylesheet" href="css.css"> <title>Document</title> </head> <body> <div class="plat"> <div class="circle1"></div> <div class="circle2"></div> <div class="circle3"></div> <div class="circle4"></div> <div class="circle5"></div> </div> </body> </html>
css代码如下
* { margin: 0; padding: 0; } .plat { position: absolute; left: 50%; top: 50%; margin-left: -190px; margin-top: -93px; height: 186px; width: 380px; } .circle1, .circle2, .circle3, .circle4, .circle5 { position: absolute; width: 100px; height: 100px; border: 10px solid red; border-radius: 50%; } .circle1 { border-color: red; left: 0; top: 0; } .circle2 { border-color: green; left: 130px; top: 0px; z-index: 3; } .circle3 { border-color: yellow; left: 260px; top: 0px; } .circle4 { border-color: olive; left: 65px; top: 65px; } .circle5 { border-color: pink; left: 195px; top: 65px; }
结果显示如下：
参考自腾讯课堂！
谢谢