如何利用CSS实现圆环进度条的内环阴影效果？

圆环进度条实现内环阴影方法

要实现带有阴影效果的圆环进度条，需要使用 CSS 中的 box-shadow 属性。

具体步骤：

1. 创建圆环容器（.circle）：设置容器为正方形，并使用 justify-content 和 align-items 对齐子元素。
2. 创建左半圆（.circle-left）：使用 clip 属性裁剪一个一半圆，并填充背景颜色和图层遮罩。
3. 创建右半圆（.circle-right）：与左半圆类似，但裁剪的是另一半圆。
4. 创建外环（.circle-l）：使用圆形 border-radius 和 box-shadow 创建外环阴影效果。
5. 创建内环（.circle-s）：再次使用圆形 border-radius 和 box-shadow 创建内环，但这次阴影应朝相反方向（-2rpx -2rpx）。
6. 调整文本（.circle_num）：添加一个 position: absolute 的文本元素，并根据 percent 值动态更新其样式。

参考示例：

万兴爱画

万兴爱画AI绘画生成工具

下载

  
    
  
  
    
  
  
  
  {{percent}}%

.circle {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 450rpx;

  .circle-left {
    position: absolute;
    width: 400rpx;
    height: 400rpx;
    clip: rect(0rpx, 200rpx, 400rpx, 0rpx);
    border-radius: 50%;
    background-color: #1C1D23;

    .left {
      position: absolute;
      width: 400rpx;
      height: 400rpx;
      clip: rect(0rpx, 200rpx, 400rpx, 0rpx);
      background-color: #1C1D23;
      border-radius: 50%;
    }
  }

  .circle-right {
    position: absolute;
    width: 400rpx;
    height: 400rpx;
    clip: rect(0rpx, 400rpx, 400rpx, 200rpx);
    border-radius: 50%;
    background-color: #1C1D23;

    .right {
      position: absolute;
      width: 400rpx;
      height: 400rpx;
      clip: rect(0rpx, 400rpx, 400rpx, 200rpx);
      background-color: #1C1D23;
      border-radius: 50%;
    }
  }

  .circle-l {
    position: absolute;
    width: 450rpx;
    height: 450rpx;
    border-radius: 50%;
    box-shadow: 0rpx 0rpx 20rpx #4F4F5B;
    background: #1C1D23;
  }

  .circle-s {
    position: absolute;
    width: 280rpx;
    height: 280rpx;
    border-radius: 50%;
    box-shadow: -2rpx -2rpx 6rpx #fff;
    background: #23232B;
  }

  .circle_num {
    position: absolute;
    width: 100%;
    font-size: 2rem;
    color: #fff;
    z-index: 6;
  }
}

通过使用这些技巧，可以轻松创建带有阴影效果的圆环进度条。

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