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>
三、效果
更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
