啊~ 五环 你比四环多一环 啊~ 五环 你比六环少一环
又想起08年的北京奧運會 其實更多的是 小岳岳的五環 還有hot-dog的rap 哼~就把車子開上五環 廢話不說了 否則就變成演唱會了。
首先呢先分析我們需要設置五個寬高相等的div 并且要把border-radius屬性值設為50% 設置上10px的實心邊框默認顏色為黑色 當然只要比50%大都可以成圓。學過html和css都知道 啊 那這個簡單直接寫不就得了 仔細看圖片你會發現這幾個是一環套著一環的，第一次看到時覺得“哇 這是啥呀 咋還能一環套一環呢 用 z-index只能解決一部分啊” 后來才發現這里的奧秘 這是我們需要知道一個css3偽類選擇器 什么是為類選擇器呢 請自行百度 哈哈 以我現在的水平 我也說不清楚。接著說我們需要這個（::after）意思是：在對象后（依據對象樹的邏輯結構）發生的內容。
用來和content屬性一起使用，并且必須定義content屬性
content: ""; /:before和:after必帶技能，重要性為滿5顆星/
什么意思呢 就是現在我已經創建了一個div元素了 現在我需要在這份div后繼續創建一個跟他一模一樣的div元素 這時我們需要用到::after偽類選擇器 讓這兩個div重合。但是這里有個小坑 你發現這兩個定位的元素根本重合不到一起
這是因為用偽類選擇器后創建的元素是最開始元素的子元素并且我們最開始為這個div設置上了10px的邊框 所以會呈現出如圖片中的場景 這時我們需要將這個子元素向左移10px向上移10px就會重合了。
我們最開始將這幾個元素絕對定位，并一次設置他們的位置得到如下圖的樣子 也就是我們所說的五個環但他們不是互相嵌套的。
現在我們來解決一次嵌套 拿藍色和黃色來說 現在我們有四個元素在這里兩個黃色的在上方兩個藍色的在下方。就像最開始圖片所展示的黃色的左邊套在藍色的上面 藍色的右面套在黃色的上面。那么我們需要設置藍色div的子元素（就是那個用偽類選擇器生成的那個元素）的z-index的值可以設置成1或是大于零的數。這樣就會出現這樣的效果。（如下圖）
這時藍色div的子元素都在黃色的上面，現在我們把藍色div的子元素的border-bottom-color設置為transparent（透明）
是不是就邊成了一個套著另一個 以此類推就變成了五環 呦 呦。。。
html：
<div id="contain"><div class="circle blue"></div><div class="circle black"></div><div class="circle red"></div><div class="circle yellow"></div><div class="circle green"></div></div>css：
* {padding: 0;margin: 0;}div.circle , .circle::after{width: 200px;height: 200px;border-radius: 50%;border: 10px solid black;position: absolute;}div.blue {border-color: blue;}div.blue::after {content: " ";border-color: blue;top: -10px;left:-10px;z-index: 1;border-bottom-color: transparent;}div.black {border-color: black;top: 0;left: 230px;}div.black::after {top: -10px;left: -10px;content: "";border-color: black;z-index: 1;border-left-color: transparent;}div.red {border-color: red;top: 0;left: 460px;}div.red::after {border-color: red;top: -10px;left: -10px;content: "";z-index: 2;border-left-color: transparent;}div.yellow {border-color:yellow;top: 110px;left: 115px;}div.yellow::after {top: -10px;left: -10px;content: "";border-color: yellow;}div.green {top: 110px;left: 345px;border-color: green;}div.green::after {top: -10px;left: -10px;content: "";border-color: green;z-index: 1;border-top-color: transparent;}完整代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>* {padding: 0;margin: 0;}div.circle , .circle::after{width: 200px;height: 200px;border-radius: 50%;border: 10px solid black;position: absolute;}div.blue {border-color: blue;}div.blue::after {content: " ";border-color: blue;top: -10px;left:-10px;z-index: 1;border-bottom-color: transparent;}div.black {border-color: black;top: 0;left: 230px;}div.black::after {top: -10px;left: -10px;content: "";border-color: black;z-index: 1;border-left-color: transparent;}div.red {border-color: red;top: 0;left: 460px;}div.red::after {border-color: red;top: -10px;left: -10px;content: "";z-index: 2;border-left-color: transparent;}div.yellow {border-color:yellow;top: 110px;left: 115px;}div.yellow::after {top: -10px;left: -10px;content: "";border-color: yellow;}div.green {top: 110px;left: 345px;border-color: green;}div.green::after {top: -10px;left: -10px;content: "";border-color: green;z-index: 1;border-top-color: transparent;}</style> </head> <body><div id="contain"><div class="circle blue"></div><div class="circle black"></div><div class="circle red"></div><div class="circle yellow"></div><div class="circle green"></div></div> </body> </html>此篇五環就結束了 如果哪里有錯誤請指出 多多指教 共勉共勉。原諒我這孱弱文學功底還有我這個沒有標準的分布。
總結
以上是生活随笔為你收集整理的啊~ 五环 你比四环多一环 啊~ 五环 你比六环少一环的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 《分布式系统：概念与设计》一1.3 分布
- 下一篇： 华为FusionCube从融合到超融合