css使五環居中兩兩相扣
阿新 • • 發佈：2019-04-11
gre style aci absolute class lac position title ren
思路：
1.首先構建五個環：把一個正方形用border-radiu設置成圓形，border控制環的寬度，五環的各自的div的top和left控制位置，使形成五環的樣子。
2.運用偽元素的，用 z-index控制優先級， border-*-color: transparent;控制透明。
由於有限級都是一樣的，所有前面的顯示。控制透明的就可以顯示出下面的元素，所以把1的下，2左，3左，5的上又透明，從而構成兩兩相扣。
代碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*使用偽元素實現五環兩兩相扣*/ .aoyun{ /* 使div在屏幕中央，不隨屏幕移動 */ position: fixed; top: 50%; left: 50%; margin-left:-350px; margin-top: -140px; width: 690px; height: 330px; background-color: bisque; opacity: 0.5; } .a1,.a2,.a3,.a4,.a5{ width: 200px;/**/ height: 200px; border: 10px solid; border-radius: 50%; position: absolute; } .a1::after,.a2::after,.a3::after,.a4::after,.a5::after{ width: 200px; height: 200px; border: 10px solid; border-radius: 50%; position: absolute; content: ""; left: -10px; top:-10px; } .a1{ border-color: blue; top:0; left: 0; } .a1::after{ border-color: blue; z-index: 1; border-bottom-color: transparent;/*使的下半部分為透明，從而顯示出來下面的元素*/ } .a2{ border-color: black; top:0; left: 230px; } .a2::after{ border-color: black; z-index: 1; border-left-color: transparent; } .a3{ border-color: red; top:0; left: 460px; } .a3::after{ border-color: red; z-index: 1; border-left-color: transparent; } .a4{ border-color: yellow; top:110px; left: 110px; } .a4::after{ border-color: yellow; } .a5{ border-color: green; top:110px; left: 340px; } .a5::after{ border-color: green; z-index: 1; border-top-color: transparent; border-right-color: transparent; } </style> </head> <body> <div class="aoyun"> <div class="a1"></div> <div class="a2"></div> <div class="a3"></div> <div class="a4"></div> <div class="a5"></div> </div> </body> </html>
css使五環居中兩兩相扣