css圆环的六种实现方式

在这里插入图片描述
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>
实现圆环进度条,你可以使用 CSS 的伪元素和 transform 属性来实现。以下是一个简单的示例: HTML: ```html <div class="progress-bar"> <div class="progress"></div> </div> ``` CSS: ```css .progress-bar { position: relative; width: 200px; height: 200px; border-radius: 50%; background-color: lightgray; } .progress { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; background-color: #00bcd4; transform-origin: center center; } .progress::before { content: ""; position: absolute; top: -10px; left: calc(50% - 10px); width: 20px; height: 20px; border-radius: 50%; background-color: #00bcd4; } .progress::after { content: ""; position: absolute; top: calc(50% - 10px); right: -10px; width: 20px; height: 20px; border-radius: 50%; background-color: lightgray; } .progress-bar::after { content: ""; position: absolute; top: calc(50% - 30px); left: calc(50% - 30px); width: 60px; height: 60px; border-radius: 50%; background-color: lightgray; } .progress-bar::before { content: ""; position: absolute; top: calc(50% - 40px); left: calc(50% - 40px); width: 80px; height: 80px; border-radius: 50%; background-color: lightgray; } ``` 在上面的示例中,我们有一个包含两个 div 的容器。`.progress-bar` 是圆环的外部容器,`.progress` 是实际的进度条。我们使用伪元素 `::before` 和 `::after` 来创建圆环的开始和结束点。 通过改变 `.progress` 元素的 `transform` 属性,你可以调整进度条的进度。例如,你可以使用 `transform: rotate(45deg)` 来表示进度条完成了 45%。 你可以根据你的需求修改样式,并使用 JavaScript 来动态更新进度条的进度。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值