如何实现带有内环阴影的圆环进度条效果？-css教程-PHP中文网

如何实现带有内环阴影的圆环进度条效果？

碧海醫心

发布： 2024-10-24 18:00:38

转载

480人浏览过

如何实现带有内环阴影的圆环进度条效果？

内环阴影圆环进度条实现指南

问题描述：

在一个项目中需要实现一个包含内环阴影的圆环进度条，但目前所写的代码无法达到效果。现寻求实现该效果的最佳方法。

实现方法：

要实现内环阴影效果，我们需要应用以下 css 样式：

filter：drop-shadow()：为元素添加阴影效果。
background-clip：content-box：使阴影只在元素的内容框内绘制。
z-index：-1：将阴影层放置在元素后面。

以下是优化后的代码：

.circle-inner {
  position: absolute;
  width: 450rpx;
  height: 450rpx;
  border-radius: 50%;
  filter: drop-shadow(0rpx 0rpx 20rpx #4f4f5b);
  background-color: #1c1d23;
  background-clip: content-box;
  z-index: -1;
}

登录后复制

详细说明：

filter：drop-shadow()：设置阴影的偏移量、模糊半径和颜色。
background-clip：content-box：确保阴影仅绘制在元素的内容框内，而不是整个元素。
z-index：-1：将阴影层放置在元素后面，使其看起来像一个阴影环。

完整代码：

.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-size: cover;
    background-image: url('');

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

  .circle-right{
    position: absolute;
    width: 400rpx;
    height: 400rpx;
    clip: rect(0rpx,400rpx,400rpx,200rpx);
    border-radius: 50%;
    background-size: cover;
    background-image: url('');

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

  .circle-inner {
    position: absolute;
    width: 450rpx;
    height: 450rpx;
    border-radius: 50%;
    filter: drop-shadow(0rpx 0rpx 20rpx #4F4F5B);
    background-color: #1C1D23;
    background-clip: content-box;
    z-index: -1;
  }

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

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

登录后复制

效果：

应用此方法后，圆环进度条将带有清晰的内环阴影，如下图所示：

[图片]

如需参考示例代码，请访问：https://codepen.io/fractalpen...

以上就是如何实现带有内环阴影的圆环进度条效果？的详细内容，更多请关注php中文网其它相关文章！