如何修改图片单选按钮选中的outline样式实现圆形柔和光晕效果

解决方案 #

你只需要修改选中状态的CSS规则，同时给图片添加圆形裁剪属性即可实现目标效果，修改后的完整CSS代码如下：

[type=radio] { 
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* IMAGE STYLES */
[type=radio] + img {
  cursor: pointer;
  /* 新增：将图片裁剪为正圆形，和笑脸形状匹配 */
  border-radius: 50%;
}

/* CHECKED STYLES */
[type=radio]:checked + img {
  /* 移除原有的方形outline */
  /* outline: 2px solid #f00; */
  /* 新增：圆形柔和光晕效果，可按需调整参数 */
  box-shadow: 0 0 8px 3px rgba(255, 0, 0, 0.6);
}

你可以根据实际视觉需求调整参数：

• 调低rgba的最后一位透明度参数（取值0-1）可以让光晕更柔和
• 调大第三个模糊半径、第四个扩散半径数值可以扩大光晕范围
• 修改rgba前三位数值（对应红、绿、蓝通道，取值0-255）可以更换光晕颜色

内容的提问来源于stack exchange，提问作者ander99