HTML/CSS 實現單選框立體陰影效果：純 CSS 方案與圖片替換法

想要單選框（Radio Button）擁有「圓圈內陰影、左上半圓陰影」的立體質感，主要有兩種主流實現路徑。

方案一：純 CSS 3D 效果 (現代瀏覽器推薦)

隱藏原生 <input type="radio">，用 ::before/::after 偽元素繪製外框與內圓，配合 box-shadow、radial-gradient 產生立體感。

.radio-3d {
  position: relative;
  width: 20px; height: 20px;
  appearance: none;
  border: 2px solid #999;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff 0%, #e0e0e0 100%);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.2), 0 1px 0 #fff;
  cursor: pointer;
  transition: all .2s;
}
.radio-3d:checked {
  border-color: #007bff;
  background: radial-gradient(circle at 30% 30%, #6ab0ff 0%, #0056d2 100%);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.3), 0 0 0 2px #fff, 0 2px 4px rgba(0,123,255,.4);
}
.radio-3d:focus { outline: none; box-shadow: 0 0 0 3px rgba(0,123,255,.4); }

方案二：圖片替換法 (相容舊瀏覽器)

準備兩張圖：radio_off.png、radio_on.png (含陰影立體效果)，用 CSS 背景圖切換。

.radio-img {
  width: 22px; height: 22px;
  appearance: none;
  background: url(radio_off.png) no-repeat center;
  background-size: contain;
}
.radio-img:checked { background-image: url(radio_on.png); }

參考連結中的 alt_on.gif, alt_off.gif 即為此類圖片，JS 僅用於舊 IE 不支援 :checked 時的類別切換，現代專案可完全移除 JS。

關鍵優勢比較

建議

• 新專案優先採用 **純 CSS 方案**，搭配 @supports 降級。
• 若設計稿極度複雜（如金屬質感、複雜反光），可用 SVG 或高解析度 PNG 圖片替換。
• 務必保留原生 <input> 的語意與無障礙存取 (ARIA)，僅用 CSS 隱藏視覺呈現。