uni-app中radio边框无法直接用border设置，需通过伪元素和平台特有类名（如/deep/ .wx-radio-input::before）或自定义容器模拟；跨平台需分别覆盖各平台类名并注意scoped样式隔离。
uni-app 中 radio 组件的边框无法直接用 border 设置
因为原生 radio 在各小程序平台（微信、支付宝、字节）底层渲染逻辑不同，border 属性对 .wx-radio-input 等内部元素基本无效。你写 border: 2px solid red，大概率什么都不会变——这是最常踩的第一个坑。
真正起作用的是伪元素和平台特有类名：
- 微信小程序：用
/deep/ .wx-radio-input::before控制未选中圆环，::after控制选中对勾 - H5 和 App：用
/deep/ .uni-radio-input及其::before - 部分平台（如字节）需额外加
!important才能覆盖内联样式
给单选按钮加自定义边框的实操步骤
核心思路：放弃修改原生边框，改用「外层容器 + 自定义圆环」模拟带边框的单选按钮。
- 用
<view class="custom-radio"></view>包裹文字和状态图标，不依赖<radio></radio>的默认渲染 - 通过
v-model或@change手动控制选中状态（selectedValue === item.value） - 用两个
<view></view>分别表示外圈（边框）和内圈（选中填充），例如：<view class="radio-border" :class="{ 'radio-checked': selectedValue === item.value }"> <view class="radio-inner" v-if="selectedValue === item.value"></view> </view> - CSS 中设置
.radio-border的border: 2px solid #9B59B6和border-radius: 50%，.radio-inner用background-color: #9B59B6填充
跨平台边框颜色一致性怎么保证
不同平台默认色差异大：微信是绿色、支付宝是蓝色、字节是红色。如果只靠 color 属性设 <radio color="#xxx"></radio>，在 H5 有效，但在多数小程序里会被忽略。
- 必须用深度选择器覆盖各平台类名，例如：
/deep/ .wx-radio-input { border-color: #9B59B6 !important; } /deep/ .uni-radio-input { border-color: #9B59B6 !important; } - 微信小程序还需单独处理选中态边框：
/deep/ .wx-radio-input.wx-radio-input-checked::before { border-color: #9B59B6 !important; } - 条件编译不是万能的——H5 和 App 可共用一套样式，但微信和字节建议分开调试，尤其注意字节对
::before的支持较弱，有时得改用背景图
为什么用 radio-group 时边框样式容易失效
常见现象：单独一个 <radio></radio> 能生效，套进 <radio-group></radio-group> 就还原成默认样式。根本原因是 radio-group 内部会重置子元素的样式层级，且某些 UI 框架（如 uView、uni-ui）自带 scoped 样式隔离。
- 确保你的 CSS 写在组件
<style scoped></style>外，或用/deep//::v-deep显式穿透 - 避免在
radio-group上直接写border——它只是容器，不渲染可见边框 - 如果用了第三方 UI 库，先查文档看是否提供
customStyle或activeColor等透传属性，比硬改 CSS 更可靠
transform: scale() 的渲染差异，建议统一用 width/height 控制尺寸，少依赖缩放。 
