如何利用css实现圆环效果-css教程-PHP中文网

如何利用css实现圆环效果

王林

发布： 2020-08-21 17:02:27

转载

4162人浏览过

如何利用css实现圆环效果

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

（推荐教程：CSS教程）

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

立即学习“前端免费学习笔记（深入）”；

接下来为大家介绍方法：

1、两个标签的嵌套

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

查看详情

<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 ;
        }

登录后复制

（学习视频推荐：css视频教程）

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

登录后复制

以上就是如何利用css实现圆环效果的详细内容，更多请关注php中文网其它相关文章！