啊~ 五环 你比四环多一环 啊~ 五环 你比六环少一环
又想起08年的北京奧運(yùn)會(huì) 其實(shí)更多的是 小岳岳的五環(huán) 還有hot-dog的rap 哼~就把車子開(kāi)上五環(huán) 廢話不說(shuō)了 否則就變成演唱會(huì)了。
首先呢先分析我們需要設(shè)置五個(gè)寬高相等的div 并且要把border-radius屬性值設(shè)為50% 設(shè)置上10px的實(shí)心邊框默認(rèn)顏色為黑色 當(dāng)然只要比50%大都可以成圓。學(xué)過(guò)html和css都知道 啊 那這個(gè)簡(jiǎn)單直接寫(xiě)不就得了 仔細(xì)看圖片你會(huì)發(fā)現(xiàn)這幾個(gè)是一環(huán)套著一環(huán)的，第一次看到時(shí)覺(jué)得“哇 這是啥呀 咋還能一環(huán)套一環(huán)呢 用 z-index只能解決一部分啊” 后來(lái)才發(fā)現(xiàn)這里的奧秘 這是我們需要知道一個(gè)css3偽類選擇器 什么是為類選擇器呢 請(qǐng)自行百度 哈哈 以我現(xiàn)在的水平 我也說(shuō)不清楚。接著說(shuō)我們需要這個(gè)（::after）意思是：在對(duì)象后（依據(jù)對(duì)象樹(shù)的邏輯結(jié)構(gòu)）發(fā)生的內(nèi)容。
用來(lái)和content屬性一起使用，并且必須定義content屬性
content: ""; /:before和:after必帶技能，重要性為滿5顆星/
什么意思呢 就是現(xiàn)在我已經(jīng)創(chuàng)建了一個(gè)div元素了 現(xiàn)在我需要在這份div后繼續(xù)創(chuàng)建一個(gè)跟他一模一樣的div元素 這時(shí)我們需要用到::after偽類選擇器 讓這兩個(gè)div重合。但是這里有個(gè)小坑 你發(fā)現(xiàn)這兩個(gè)定位的元素根本重合不到一起
這是因?yàn)橛脗晤愡x擇器后創(chuàng)建的元素是最開(kāi)始元素的子元素并且我們最開(kāi)始為這個(gè)div設(shè)置上了10px的邊框 所以會(huì)呈現(xiàn)出如圖片中的場(chǎng)景 這時(shí)我們需要將這個(gè)子元素向左移10px向上移10px就會(huì)重合了。
我們最開(kāi)始將這幾個(gè)元素絕對(duì)定位，并一次設(shè)置他們的位置得到如下圖的樣子 也就是我們所說(shuō)的五個(gè)環(huán)但他們不是互相嵌套的。
現(xiàn)在我們來(lái)解決一次嵌套 拿藍(lán)色和黃色來(lái)說(shuō) 現(xiàn)在我們有四個(gè)元素在這里兩個(gè)黃色的在上方兩個(gè)藍(lán)色的在下方。就像最開(kāi)始圖片所展示的黃色的左邊套在藍(lán)色的上面 藍(lán)色的右面套在黃色的上面。那么我們需要設(shè)置藍(lán)色div的子元素（就是那個(gè)用偽類選擇器生成的那個(gè)元素）的z-index的值可以設(shè)置成1或是大于零的數(shù)。這樣就會(huì)出現(xiàn)這樣的效果。（如下圖）
這時(shí)藍(lán)色div的子元素都在黃色的上面，現(xiàn)在我們把藍(lán)色div的子元素的border-bottom-color設(shè)置為transparent（透明）
是不是就邊成了一個(gè)套著另一個(gè) 以此類推就變成了五環(huán) 呦 呦。。。
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>此篇五環(huán)就結(jié)束了 如果哪里有錯(cuò)誤請(qǐng)指出 多多指教 共勉共勉。原諒我這孱弱文學(xué)功底還有我這個(gè)沒(méi)有標(biāo)準(zhǔn)的分布。
總結(jié)
以上是生活随笔為你收集整理的啊~ 五环 你比四环多一环 啊~ 五环 你比六环少一环的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 《分布式系统：概念与设计》一1.3 分布
- 下一篇： 华为FusionCube从融合到超融合