不能直接对 input[type="radio"] 用 opacity，因其由 UA 样式强管控，opacity 在 Chrome/Firefox 中常被忽略或导致热区错位、可访问性受损；应隐藏原生控件，用伪元素重绘并分层控制 rgba 透明度。
直接给 input[type="radio"] 设 opacity 会失效或行为异常——浏览器对原生表单控件的透明度支持不一致，尤其在 Chrome/Firefox 中可能被忽略，或导致点击热区错位。真正可控、可复用的做法是隐藏原生控件，用 ::before/::after 伪元素重绘，并对伪元素单独设透明度。
为什么不能直接对 input[type="radio"] 用 opacity
原生 radio 按钮不是普通渲染盒：它的外观由操作系统或浏览器 UA 样式强管控，opacity 在部分版本（如 Chrome 120+）中会被 UA 样式重置，表现为“设了没反应”；即使生效，也会连同隐藏的 checkbox/radio 热区一起变淡，造成点击反馈消失或偏移。另外，opacity 会影响整个元素盒，包括不可见但存在的 focus outline，破坏可访问性。
用 rgba() 控制背景/边框透明度更可靠
如果你的目标是让单选框的「视觉容器」（比如外圈、内点、高亮层）呈现半透效果，而不是整块变灰，应该把透明度拆解到具体颜色属性上：
-
border-color: rgba(0, 0, 0, 0.3)→ 外圈描边带轻微存在感，不抢眼也不消失 -
background-color: rgba(50, 120, 255, 0.8)→ 选中态的圆点用高饱和但略透的蓝，避免纯色压迫感 - 禁用
opacity，改用transition: background-color 0.2s, border-color 0.2s实现平滑淡化入场
伪元素方案中透明度要分层控制
典型做法是：input 本身 position: absolute; opacity: 0（仅保留语义和可访问性），再用 label::before 绘外圈、label::after 绘内点。这时：
-
label::before的background-color可设为rgba(200, 200, 200, 0.4)，模拟未选中时的浅灰环 -
label::after在input:checked ~ label::after下设background-color: rgba(30, 144, 255, 0.9)，比外圈更实一点，形成层次 - 不要给
label整体加opacity，否则文字也变淡，违背“只美化控件”的初衷
最易被忽略的一点：伪元素的 z-index 必须明确，否则在 Safari 或旧 Edge 中，::after 可能被 ::before 盖住，导致选中态始终不显示——哪怕你写了 background-color 和 opacity 都对。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
