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

时间 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

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

html：

css：

完整代码：

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