用CSS怎样画圆环，都有几种实现方式

发布时间：2023-09-25 15:23:45 所属栏目：语言来源：

导读：想到去年面试实习的时候被问到实习圆环的问题，特意写篇文章总结一下吧！总结了一下大概有5种方法。

1. 两个标签的嵌套：

<div class="element1">

<div class="child1"></div>

</div>

.elem

想到去年面试实习的时候被问到实习圆环的问题，特意写篇文章总结一下吧！总结了一下大概有5种方法。

1. 两个标签的嵌套：

<div class="element1">

    <div class="child1"></div>

</div>

.element1{

            width: 200px;

            height: 200px;

            background-color: lightpink;

            border-radius: 50%;

        }

        .child1{

            width: 100px;

            height: 100px;

            border-radius: 50%;

            background-color: #009966;

            position: relative;

            top: 50px;

            left: 50px;

        }

2. 使用伪元素，before／after

<div class="element2"></div>

.element2{

            width: 200px;

            height: 200px;

            background-color: lightpink;

            border-radius: 50%;

        }

        .element2:after{

            content: "";

            display: block;

            width: 100px;

            height: 100px;

            border-radius: 50%;

            background-color: #009966;

            position: relative;

            top: 50px;

            left: 50px;

        }

3. 使用border:

<div class="element3"></div>

.element3{

            width: 100px;

            height: 100px;

            background-color: #009966;

            border-radius: 50%;

            border: 50px solid lightpink ;

        }

4. 使用border-shadow

<div class="element4"></div>

.element4{

            width: 100px;

            height: 100px;

            background-color: #009966;

            border-radius: 50%;

            box-shadow: 0 0 0 50px lightpink ;

            margin: auto;

        }

<div class="element5">

  .element5{

            width: 200px;

            height: 200px;

            background-color: #009966;

            border-radius: 50%;

            box-shadow: 0 0 0 50px lightpink inset;

            margin: auto;

        }

5. 使用radial-gradient

<div class="element6"></div>

.element6{

            width: 200px;

            height: 200px;

            border-radius: 50%;

            background: -webkit-radial-gradient( circle closest-side,#009966 50%,lightpink 50%);

        }

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!