<!DOCTYPE html> <html> <head> <title>奧運五環</title> <style type="text/css"> *{ margin: 0; padding: 0; } .wrapper{ width: 780px; height: 370px; border:1px solid black; position: absolute; left: 50%; top: 50%; margin-left: -390px; margin-top: -185px; } .circle{ width: 200px; height: 200px; border-radius: 50%; position: absolute; } /*藍黑紅黃綠*/ .blue{ border:20px solid blue; } .blue2{ border:20px solid transparent; border-right-color: blue; z-index: 2; } .black{ border:20px solid black; left: 270px; } .black2{ border:20px solid transparent; border-bottom-color: black; border-right-color: black; left: 270px; z-index: 2; } .red{ border:20px solid red; left: 540px; } .red2{ border:20px solid transparent; border-left-color: red; left: 540px; z-index: 2; } .yellow{ border:20px solid yellow; left: 140px; top:130px; } .green{ border:20px solid green; left: 410px; top:130px; } .green2{ border:20px solid transparent; border-left-color: green; left: 410px; top:130px; z-index: 2; } </style> </head> <body> <div class="wrapper"> <div class = "circle blue"></div> <div class = "circle blue2"></div> <div class = "circle black"></div> <div class = "circle black2"></div> <div class = "circle red"></div> <div class = "circle red2"></div> <div class = "circle yellow"></div> <div class = "circle green"></div> <div class = "circle green2"></div> </div> </body> </html>
效果：
實現原理：在有重疊部分，每個環對應位置有兩個環，一個有色環，一個透明環，根據重疊部分應有的顏色設置透明環邊框的顏色。
例如:
transparent屬性：
用來指定全透明色彩
- transparent是全透明黑色(black)的速記法，即一個類似rgba(0,0,0,0)這樣的值。
- 在CSS1中，transparent被用來作為background-color的一個參數值，用於表示背景透明。
- 在CSS2中，border-color也開始接受transparent作為參數值，《Open eBook(tm) Publication Structure 1.0.1》[OEB101]延伸到color也接受transparent作為參數值。
- 在CSS3中，transparent被延伸到任何一個有color值的屬性上。