如何利用css实现圆环效果

发布日期:2020年8月21日 20:53 星期五

  • 正文内容
  • 相关推荐

利用css实现圆环效果

 

css实现圆环效果有多种方法,这里为大家分享五种方法:

首先我们来看一下实现效果:

d03382e71b96利用css实现圆环效果

接下来为大家介绍方法:

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%);

        }
趣乐分享-趣乐资源网
如有密码均为:www.itql.cn
学到东西应该懂得感恩作者 无脑喷子永封IP段+删帐号所有评论
本站资源软件和源码 文章大部分为网上收集,如侵犯您的权利,请告知管理员,我们会及时删除,并向您赔礼道歉.

站长QQ:209993299  

作者资料
描述: 90后草根站长!不忘初心,方得始终!

本文标签:

文章标题:如何利用css实现圆环效果

文章链接:https://www.itql.cn/post-3174.html

版权声明:若无特殊注明,本文皆为《钱哆哆》原创,转载请保留文章出处。