啊~ 五環你比四環多一環啊~ 五環你比六環少一環

時間 2019-11-06

標籤五環四環一環简体版

原文原文鏈接

又想起08年的北京奧運會其實更多的是小嶽嶽的五環還有hot-dog的rap 哼~就把車子開上五環廢話不說了不然就變成演唱會了。
css

首先呢先分析咱們須要設置五個寬高相等的div 而且要把border-radius屬性值設爲50% 設置上10px的實心邊框默認顏色爲黑色固然只要比50%大均可以成圓。學過html和css都知道啊那這個簡單直接寫不就得了仔細看圖片你會發現這幾個是一環套着一環的，第一次看到時以爲「哇這是啥呀咋還能一環套一環呢用 z-index只能解決一部分啊」後來才發現這裏的奧祕這是咱們須要知道一個css3僞類選擇器什麼是爲類選擇器呢請自行百度哈哈以我如今的水平我也說不清楚。接着說咱們須要這個（::after）意思是：在對象後（依據對象樹的邏輯結構）發生的內容。
用來和content屬性一塊兒使用，而且必須定義content屬性
content: ""; /:before和:after必帶技能，重要性爲滿5顆星/
什麼意思呢就是如今我已經建立了一個div元素了如今我須要在這份div後繼續建立一個跟他如出一轍的div元素這時咱們須要用到::after僞類選擇器讓這兩個div重合。可是這裏有個小坑你發現這兩個定位的元素根本重合不到一塊兒
html

這是由於用僞類選擇器後建立的元素是最開始元素的子元素而且咱們最開始爲這個div設置上了10px的邊框因此會呈現出如圖片中的場景這時咱們須要將這個子元素向左移10px向上移10px就會重合了。css3

咱們最開始將這幾個元素絕對定位，並一次設置他們的位置獲得以下圖的樣子也就是咱們所說的五個環但他們不是互相嵌套的。spa

如今咱們來解決一次嵌套拿藍色和黃色來講如今咱們有四個元素在這裏兩個黃色的在上方兩個藍色的在下方。就像最開始圖片所展現的黃色的左邊套在藍色的上面藍色的右面套在黃色的上面。那麼咱們須要設置藍色div的子元素（就是那個用僞類選擇器生成的那個元素）的z-index的值能夠設置成1或是大於零的數。這樣就會出現這樣的效果。（以下圖）code

這時藍色div的子元素都在黃色的上面，如今咱們把藍色div的子元素的border-bottom-color設置爲transparent（透明）htm

是否是就邊成了一個套着另外一個以此類推就變成了五環呦呦。。。對象

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>

此篇五環就結束了若是哪裏有錯誤請指出多多指教共勉共勉。原諒我這孱弱文學功底還有我這個沒有標準的分佈。blog