CSS3 同心圓環動畫：border-radius 與定位實現儀表盤效果

需求：實現外層黑色圓環、內層橙色實心圓的同心圓布局，模擬進度指示器/儀表盤外觀。

核心 CSS 技巧

• `border-radius: 50%` 將方塊變圓。
• 父容器 `position: relative`，子元素 `position: absolute` 疊加定位。
• 利用 `margin-left: -radius` + `left: 50%` 實現水平居中；`bottom: offset` 控制垂直位置。

完整代碼

<!doctype html>
<style>
.dashboard {
    width: 200px; height: 200px;
    background: #f0f0f0;
    position: relative;
    border-radius: 50%;
}
.outer-ring {
    width: 100%; height: 100%;
    border: 30px solid #333; /* 環寬度 */
    border-radius: 50%;
    box-sizing: border-box;
    position: absolute; top: 0; left: 0;
}
.inner-core {
    width: 80px; height: 80px;
    background: #ff6600;
    border-radius: 50%;
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%); /* 完美居中 */
}
</style>

<div class="dashboard">
    <div class="outer-ring"></div>
    <div class="inner-core"></div>
</div>

進階：動態進度環 (Conic Gradient)

.progress-ring {
    width: 120px; height: 120px;
    border-radius: 50%;
    background: conic-gradient(#4caf50 calc(var(--p) * 1%), #eee 0);
    display: flex; align-items: center; justify-content: center;
}
.progress-ring::before {
    content: attr(data-label);
    width: 90px; height: 90px;
    background: white;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: bold;
}

使用：`

兼容性提示

• `border-radius`：IE9+ 全支援。
• `conic-gradient`：Chrome 69+, Firefox 83+, Safari 14+，舊瀏覽器需 polyfill 或 SVG 方案。
• `transform: translate(-50%,-50%)`：IE9+ 支援，替代負 margin 更穩健。