在笔划宽度进度条上添加内框阴影

Question

我有一个 css 和 html 带有 svg 样式的圆形进度条，我想在附加的屏幕截图中添加浅灰色圆圈中的内框阴影，如何在描边中添加内框阴影宽度 css.[![

.progress-bar .base-circle-bar {
    stroke: #f5f4f4;
    fill: transparent;
    stroke-width: 28;
    r: 120;
    cx: 149;
    cy: 136;
}
.progress-bar .progress-circle-bar {
    stroke: #ffc20e;
    fill: transparent;
    stroke-width: 28;
    stroke-linecap: round;
    r: 122;
    cx: 161;
    cy: 140;
    stroke-dasharray: 476.522083;
    stroke-dashoffset: 310.38935382;
    transform: rotate(-32deg);
    transform-origin: 50% 50%;
}

<svg class="progress-bar">
      <circle class="base-circle-bar" />
      <circle class="progress-circle-bar" />
</svg>

]2]2

Answer 1

您可以使用此网站进行 Neumorphism ：https://neumorphism.io/#e0e0e0

或者你可以使用它：

<svg width="360" height="360" viewBox="0 0 180 180">
  <defs>

    <!-- Gaussian blur filter used to soften the shadow edges -->
    <filter id="blur" filterUnits="userSpaceOnUse" x="-90" y="-90"
            width="180" height="180">
      <feGaussianBlur in="SourceGraphic" stdDeviation="1" />
    </filter>

    <!-- Annular clip path for the progress meter background -->
    <clipPath id="ring" clip-rule="evenodd">
      <path d="M0-81A81 81 0 0 1 0 81A81 81 0 0 1 0-81z
               M0-63A63 63 0 0 1 0 63A63 63 0 0 1 0-63z" />
    </clipPath>

  </defs>

  <!-- Set orgin to centre of drawing -->
  <g transform="translate(90,90)">

    <!-- Start with pale yellow background -->
    <rect x="-90" y="-90" width="180" height="180" fill="#e8e0ce"
          stroke="none" />

    <!-- Draw the progress ring on top, and clip using the above clip path -->
    <g clip-path="url(#ring)">

      <!-- Dark grey background -->
      <rect x="-85" y="-85" width="170" height="170" fill="#433"
            stroke="none" />

      <!-- Lighter grey circle with blur filter applied -->
      <circle cx="0" cy="2.5" r="72" stroke="#655" stroke-width="18"
              stroke="#655" fill="none" filter="url(#blur)"/>

    </g>

    <!-- Progress bar and text -->
    <path class="main-arc" d="M 0 -72 A 72 72 0 1 1 -4.52 -71.86"
          style="stroke-dasharray: 452.389; stroke-dashoffset: 366.435;"
          fill="transparent" stroke-width="18" stroke="#b65"
          stroke-linecap="round" />
    <text x="0" y="0" font-size="40" font-family="'Trebuchet MS', sans-serif"
          fill="#655" text-anchor="middle" dominant-baseline="central">
      20%
    </text>

  </g>
</svg>

或者这个：

<svg width="180" height="180" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="inset-shadow">
  <feFlood flood-color="black"/>
  <feComposite operator="xor" in2="SourceGraphic"/>
  <feGaussianBlur stdDeviation="1"/>
  <feComposite operator="in" in2="SourceGraphic" result="map"/>
  <feDiffuseLighting lighting-color="white" surfaceScale="2" diffuseConstant="1">
  <feSpotLight x="-30" y="-30" z="230"/>
</feDiffuseLighting>
  <feBlend mode="multiply" in="SourceGraphic" />
  <feComposite operator="in" in2="SourceGraphic"/>

</filter>
</defs>

  <circle filter="url(#inset-shadow)" cx="90" cy="90" r="72" fill="none" stroke="#ddd" stroke-width="18"></circle>
  <path class="main-arc" d="M 90 18 A 72 72 0 1 1 85.47908259388944 18.142075553164446" fill="transparent" stroke-width="18" stroke="black" stroke-linecap="round" style="stroke-dasharray: 452.389; stroke-dashoffset: 366.435;">
  </path>
</svg>

Answer 2

是这样的吗？

修改阴影颜色flood-color。
通过调整 stdDeviation

.progress-bar {
  width: 300px;
  height: 280px;
}

.progress-bar .base-circle-bar {
    stroke: #f5f4f4;
    fill: transparent;
    stroke-width: 28;
    r: 120;
    cx: 149;
    cy: 136;
    filter: url(#inset-shadow);
}
.progress-bar .progress-circle-bar {
    stroke: #ffc20e;
    fill: transparent;
    stroke-width: 28;
    stroke-linecap: round;
    r: 120;
    cx: 149;
    cy: 136;
    stroke-dasharray: 476.522083;
    stroke-dashoffset: 310.38935382;
    transform: rotate(-32deg);
    transform-origin: 149px 136px;
}

<svg class="progress-bar">
  <defs>
    <filter id="inset-shadow">
      <feFlood flood-color="#ccc"/>
      <feComposite operator="out" in2="SourceAlpha"/>
      <feGaussianBlur stdDeviation="4"/>
      <feComposite operator="in" in2="SourceGraphic"/>
      <feBlend mode="multiply" in="SourceGraphic" />
    </filter>
  </defs>
  
  <circle class="base-circle-bar" />
  <circle class="progress-circle-bar" />
</svg>

在笔划宽度进度条上添加内框阴影

add inner box shadow on stroke width progress bar

html

css

svg

shadow