摘要：显然目前并不是我们想要的，因此需要用定位来让每一环到达其应该在的位置。因为每一个环前面的环都有高度，所以要在相同的样式里面加一个绝对定位让每一个环都能脱离文档流，再来看一下效果。这样初步的五环就形成了。
说到奥运五环，毋庸置疑，作为中国人我们都非常的熟悉，那么你知道如何用 html+css 来实现它吗？
If you say"I don"t know"，那么电脑屏幕前的你就一定要看过来啦！
首先要写 5 个 div ,为了在写 css 时的样式方便，先给所有 div 设置一个相同的类名，然后每一个 div 再分别设置一个类名以便于区分。
接下来就要写 css 的样式了。
相同的样式
给所有的 div 都设置一个宽高、边框以及边框圆角（因为我们需要的是一个圆环，所以边框圆角的半径要为宽/高加上边框宽度的一半），先看一下效果。
显然目前并不是我们想要的，因此需要用定位来让每一环到达其应该在的位置。因为每一个环前面的环都有高度，所以要在相同的样式里面加一个绝对定位让每一个环都能脱离文档流，再来看一下效果。
.ring{
width: 200px;
height: 200px;
border: 10px solid;
position: absolute;
border-radius: 110px;
}
不同的样式与定位
首先分别给每一个环写上蓝黑红黄绿的颜色样式，然后给每一个环都写上具体的left值和top值。这样初步的五环就形成了。
.one{
border-color: blue;
top: 0;
left: 0;
}
.two{
border-color: black;
top: 0;
left: 230px;
}
.three{
border-color: red;
top: 0;
left: 460px;
}
.four{
border-color: yellow;
top: 110px;
left: 110px;
}
.five{
border-color:green;
top: 110px;
left: 340px;
}
after
现在我们看到的五环并不是套在一起的，在这里用到了 after 选择器，通过此选择器可以再制作出5个与之前一样的环，除颜色外的样式和位置都没有变，完全就叠加在原来之上。
下面介绍以下 after 的用法：
所有主流浏览器都支持 :after 选择器。
:after 选择器在被选元素的内容后面插入内容。
使用 content 属性来指定要插入的内容。
此时相同代码部分与之前一样，所以就用兄弟选择器的方法写在一起。
.ring,.ring::after{
width: 200px;
height: 200px;
border: 10px solid;
position: absolute;
border-radius: 110px;
}
.ring::after{
content: "";
top: -10px;
left: -10px;
}
伪元素选择器的样式
接下来要想办法让环与环套在一起了，现在是5个带有颜色的环上面有5个还没有设置边框颜色的环，在设置 border-radius 之前它们是正方形，因此现在也是一样有上下左右4个边框的，所以只要把显示在邻近环底下的那一部分边框颜色设置为透明，并且把显示在邻近环上面的那一部分边框设置 z-index=1。
.one::after{
border-color: blue;
z-index: 1;
border-bottom-color: transparent;
}
.two::after{
border-color: black;
z-index: 1;
border-left-color: transparent;
}
.three::after{
border-color: red;
z-index: 2;
border-left-color: transparent;
}
.four::after{
border-color: yellow ;
}
.five::after{
border-color:green;
z-index: 1;
border-top-color: transparent;
}
到这里已经完成了，^_^···
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/117510.html
摘要：显然目前并不是我们想要的，因此需要用定位来让每一环到达其应该在的位置。因为每一个环前面的环都有高度，所以要在相同的样式里面加一个绝对定位让每一个环都能脱离文档流，再来看一下效果。这样初步的五环就形成了。 说到奥运五环，毋庸置疑，作为中国人我们都非常的熟悉，那么你知道如何用 html+css 来实现它吗？If you sayI dont know，那么电脑屏幕前的你就一定要看过来啦！ 首...
摘要：又想起年的北京奥运会其实更多的是小岳岳的五环还有的哼就把车子开上五环废话不说了否则就变成演唱会了。我们最开始将这几个元素绝对定位，并一次设置他们的位置得到如下图的样子也就是我们所说的五个环但他们不是互相嵌套的。 又想起08年的北京奥运会 其实更多的是 小岳岳的五环 还有hot-dog的rap 哼~就把车子开上五环 废话不说了 否则就变成演唱会了。showImg(https://segm...
摘要：又想起年的北京奥运会其实更多的是小岳岳的五环还有的哼就把车子开上五环废话不说了否则就变成演唱会了。我们最开始将这几个元素绝对定位，并一次设置他们的位置得到如下图的样子也就是我们所说的五个环但他们不是互相嵌套的。 又想起08年的北京奥运会 其实更多的是 小岳岳的五环 还有hot-dog的rap 哼~就把车子开上五环 废话不说了 否则就变成演唱会了。showImg(https://segm...
摘要：根据以往的经验，对于很多初学者，分页功能实现起来还是有一定的困难的，为了帮大家解决这样的问题特此献上五环之歌。正式进入千锋五环之歌之步骤实现分页功能。 根据以往的经验，对于很多初学者，分页功能实现起来还是有一定的困难的，为了帮大家解决这样的问题：特此献上五环之歌。从此分页功能便是如小妹一样简练，漂亮，精干。哈哈，不闲扯了。正式进入千锋PHP五环之歌之步骤实现分页功能。第一环：计算总的记...
阅读 2739·2021-11-16 11:44
阅读 952·2021-10-09 09:58
阅读 4457·2021-09-24 09:48
阅读 4081·2021-09-23 11:56
阅读 2387·2021-09-22 15:48
阅读 1877·2021-09-07 10:07
阅读 3167·2021-08-31 09:46
阅读 489·2019-08-30 15:56
