css圆环的六种实现方式

最新推荐文章于 2025-06-16 15:54:18 发布

逝水年华305

最新推荐文章于 2025-06-16 15:54:18 发布

阅读量5k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/qq_21450825/article/details/87977169

css 专栏收录该内容

1 篇文章

订阅专栏

在这里插入图片描述
1.通过伪类实现

		.circle1{
            position: relative;
            width: 80px;
            height: 80px;
            line-height: 80px;
            border-radius: 50%;
            background: white;
            text-align: center;
            margin: 0 auto;
            margin-top: 120px;
        }
        .circle1::after {
            position: absolute;
            content: '';
            background: linear-gradient(red, yellow);
            bottom: 0;
            right: 0;
            left: 0;
            top: 0;
            z-index: -1;
            transform: scale(1.2);
            border-radius: 50%;
        }

2.也是通过伪类，当第一种方法无法实现可以用这种方法

		.circle2{
            position: relative;
            width: 100px;
            height: 100px;
            line-height: 100px;
            border-radius: 50%;
            background: linear-gradient(red, yellow);
            text-align: center;
            margin: 0 auto;
            margin-top: 120px;
            z-index: 0;
        }
        .circle2::after {
            position: absolute;
            content: '';
            background: white;
            height: 84px;
            width: 84px;
            top: 8px;
            left: 8px;
            border-radius: 50%;
            z-index:-1;
        }

3.通过盒子嵌套

		.circle3 {
            position: relative;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: linear-gradient(red, yellow);
            text-align: center;
            margin: 0 auto;
            margin-top: 120px;
            z-index: 0;
        }
        .circle3 .circle_3 {
            position: absolute;
            content: '';
            background: white;
            height: 84px;
            width: 84px;
            line-height: 84px;
            top: 8px;
            left: 8px;
            border-radius: 50%;
            z-index:-1;
        }

4.通过border实现

		.circle4 {
            width: 90px;
            height: 90px;
            text-align: center;
            line-height: 90px;
            margin: 0 auto;
            margin-top: 120px;
            background-color:#fff;
            border-radius: 50%;
            border: 8px solid red;
        }

5.通过阴影实现

		.circle5 {
            width: 90px;
            height: 90px;
            line-height: 90px;
            margin: 0 auto;
            margin-top: 120px;
            background-color: #fff;
            border-radius: 50%;
            box-shadow: 0 0 0 8px red;
        }

6.通过背景渐变实现

		.circle6 {
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            margin: 0 auto;
            margin-top: 120px;
            border-radius: 50%;
            background: -webkit-radial-gradient(circle closest-side,#fff 82%,red 18%);
        }

	<div class="circle1">第一种方法</div>
    <div class="circle2">第二种方法</div>
    <div class="circle3">
        <div class="circle_3">第三种方法</div>
    </div>
    <div class="circle4">第四种方法</div>
    <div class="circle5">第五种方法</div>
    <div class="circle6">第六种方法</div>