1. border-radius：画圆环，当值取50%时；
width:200px; height:200px;就会变成圆形
2.position:absolute; 绝对定位
就是可以将五个圆环进行位置设置的，比如上下、左右移动都可以。
二 、代码部分<!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>奥运五环</title> <style> .item{ width:200px; height:200px; border:10px solid; border-radius:50%; position:absolute; box-sizing:border-box; margin:auto; } .class1{ left:0; top:0; border-color:blue; z-index: 2; } .class2{ left:200px; top:0; border-color:#000; } .class3{ left:400px; top:0; border-color:red; z-index:2; } .class4{ left:100px; top:120px; border-color:yellow; } .class5{ left:300px; top:120px; border-color:green; } </style> </head> <body> <div class="item class1"></div> <div class="item class2"></div> <div class="item class3"></div> <div class="item class4"></div> <div class="item class5"></div> </body> </html>
三、效果
