圈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類本身。 它應該工作！ 此外，更正您的值。 框陰影接受四個值：X位置，Y位置，模糊和顏色。 您應該在rgb之前有第二個“ 0”。