html - Circle svg如何用css添加框阴影

Question

你好，有人可以帮我解决 html 上的这个圆圈元素吗？我需要添加一个框阴影，但它不起作用

.circle-chart__circle {
  animation: circle-chart-fill 2s reverse; /* 1 */ 
  transform: rotate(-90deg); /* 2, 3 */
  transform-origin: center; /* 4 */
    box-shadow: 0 8px 8px 0 rgba(81, 136, 255, 0.2);
}


.circle-chart__info {
  animation: circle-chart-appear 2s forwards;
  opacity: 0;
  transform: translateY(0.3em);
}

@keyframes circle-chart-fill {
  to { stroke-dasharray: 0 100; }
}

@keyframes circle-chart-appear {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Layout styles only, not needed for functionality */
html {
  font-family: sans-serif;
  padding-right: 1em;
  padding-left: 1em;
}

.grid {
  display: grid;
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  grid-template-columns: repeat(1, 1fr);
}

@media (min-width: 31em) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

<div class="grid">
  <section>
    <h2>Positive chart value</h2>
    <svg class="circle-chart" viewbox="0 0 33.83098862 33.83098862" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
      <circle class="circle-chart__background" stroke="#efefef" stroke-width="2" fill="none" cx="16.91549431" cy="16.91549431" r="15.91549431" />
      <circle class="circle-chart__circle" stroke="#00acc1" stroke-width="2" stroke-dasharray="30,100" stroke-linecap="round" fill="none" cx="16.91549431" cy="16.91549431" r="15.91549431" />
      <g class="circle-chart__info">
        <text class="circle-chart__percent" x="16.91549431" y="15.5" alignment-baseline="central" text-anchor="middle" font-size="8">30%</text>
        <text class="circle-chart__subline" x="16.91549431" y="20.5" alignment-baseline="central" text-anchor="middle" font-size="2">Yay 30% progress!</text>
      </g>
    </svg>
  </section>

</div>

我已经尝试添加框阴影但是它不起作用有人可以帮助我吗我是编码新手，是否有针对这种类型的黑客攻击

Answer 1

您可以尝试将 box shadow 属性添加到 circle-chart 类本身。它应该工作!另外，纠正你的值(value)观。框阴影接受四个值:X 位置、Y 位置、模糊和颜色。你在应该消失的 rgb 之前有第二个“0”。