用 CSS 实现渐变发光头像

一、代码解析1.border-radius: 50%这是实现圆形头像的关键。当元素的宽高相等时50%的圆角会把四个角完美地变成圆弧最终形成一个正圆。2.padding: 20pxpadding在这里的作用是给内发光效果留出显示空间。如果没有paddingbox-shadow的内发光会紧贴图片边缘效果会被压缩不够通透。3.box-shadow: ... inset这是实现渐变内发光的核心inset关键字表示这是内部阴影而不是默认的外部投影。6px 6px 12px 3px pink inset在元素的右下区域生成一层粉色的模糊内阴影。-6px -6px 12px 3px lightblue inset在元素的左上区域生成一层浅蓝色的模糊内阴影。两层阴影叠加就形成了自然的粉蓝渐变光晕效果。二、核心代码实现1. HTML 结构我们只需要一个基础的img标签来承载头像图片html预览!DOCTYPE html html head meta charsetutf-8 title渐变发光头像/title style /* 这里写我们的 CSS 样式 */ /style /head body img src你的头像图片链接 alt头像 /body /html2. CSS 样式核心代码css三、关键样式代码四、注意事项 。图片路径src属性里的图片链接要替换成你自己的头像地址可以是本地路径或网络链接。调整光晕强度想让光晕更宽增大padding的数值。想让光晕更柔和增大box-shadow中模糊值12px和扩展值3px。想换颜色把pink和lightblue换成你喜欢的颜色比如purple、orange等。保持宽高比一定要保证width和height数值相等。五、效果拓展你可以基于这个思路做更多有趣的变化多色渐变添加更多方向的inset阴影实现彩虹色渐变光晕。动态效果配合:hover伪类让鼠标悬停时光晕变亮或旋转。不同形状把border-radius改成15px就能得到带圆角的方形发光头像。