使用一个div实现5个圆环

最新推荐文章于 2024-09-05 14:01:36 发布

原创最新推荐文章于 2024-09-05 14:01:36 发布 · 1.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css

CSS 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何仅使用CSS通过背景颜色、border属性、伪元素before和after，以及box-shadow，来实现一个div创建出五个圆环的效果。尽管在面试中未通过，但作者发现CSS的潜力，并鼓励大家探讨更多解决方案。

使用一个div实现5个圆环

面试的时候遇到了一个考察css的题，觉得挺有意思的，来记录一波：
题目：

怎么实现以下这张图片的效果？不许用图片，不许用svg。

在这里插入图片描述

我：(⊙o⊙)… 我当时的回答是可以div嵌套，emmmm…好像有点low啊，，，
面试官提示：能不能用一个div实现呢？
我：(⊙o⊙)…我只知道背景色和border可以设置颜色，那也只有两个环，，，
面试官：你可以想想盒模型中，哪些属性可以设置背景色的
我：(⊙o⊙)…border和margin
面试官：这俩可以设置颜色吗？？？你确定？？
我：(⊙o⊙)…不能设置颜色，我再想想，，
面试官又提示：伪元素了解吗？
我：(⊙o⊙)…before和after吗？
面试官：对哦，他们是块级的还是什么？
我：块儿级的
面试官：那他们可以设置宽高吗？可以设置颜色吗？
我：(⊙o⊙)…好像可以
面试官：那你现在可以有几个环了
我：四个？？
面试官：好吧，这个不纠结了，你可以再去研究一下。
我：凉。。。。。

行吧，，，今天来完成一下这个，废话不多说，直接上代码：

	div {
        width: 100px;
        height: 100px;
        background-color: brown;
        border: 10px solid gold;
        border-radius: 50%;
        box-shadow: 0px 0px 0px 10px;
        margin: 10px;
      }
      div::before {
        background-color: green;
        height: 50%;
        width: 50%;
        border-radius: 50%;
        display: block;
        content: '';
        position: relative;
        top: 25%;
        left: 25%;
      }
      div::after {
        background-color: sandybrown;
        height: 80%;
        width: 80%;
        border-radius: 50%;
        display: block;
        content: '';
        margin-top: -40%;
        margin-left: 10%;
      }