实现CSS圆环的方法有哪些-创新互联

小编给大家分享一下实现CSS圆环的方法有哪些，希望大家阅读完这篇文章后大所收获，下面让我们一起去探讨吧！

成都创新互联公司主要从事成都做网站、网站制作、网页设计、企业做网站、公司建网站等业务。立足成都服务建始,十多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18980820575

1. 两个标签的嵌套：

.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

.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:

.element3{
            width: 100px;
            height: 100px;
            background-color: #009966;
            border-radius: 50%;
            border: 50px solid lightpink ;
        }

4. 使用border-shadow

.element4{
            width: 100px;
            height: 100px;
            background-color: #009966;
            border-radius: 50%;
            box-shadow: 0 0 0 50px lightpink ;
            margin: auto;
        }

.element5{
            width: 200px;
            height: 200px;
            background-color: #009966;
            border-radius: 50%;
            box-shadow: 0 0 0 50px lightpink inset;
            margin: auto;
        }

5. 使用radial-gradient

.element6{
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: -webkit-radial-gradient( circle closest-side,#009966 50%,lightpink 50%);
        }

看完了这篇文章，相信你对实现CSS圆环的方法有哪些有了一定的了解，想了解更多相关知识，欢迎关注创新互联网站制作公司行业资讯频道，感谢各位的阅读！

分享文章：实现CSS圆环的方法有哪些-创新互联
链接地址：http://jkwzsj.com/article/pocpg.html