一、代码解析
1. border-radius: 50%
这是实现圆形头像的关键。当元素的宽高相等时，50% 的圆角会把四个角完美地变成圆弧，最终形成一个正圆。
2. padding: 20px
padding 在这里的作用是给内发光效果留出显示空间。如果没有 padding，box-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 charset="utf-8">
<title>渐变发光头像</title>
<style>
/* 这里写我们的 CSS 样式 */
</style>
</head>
<body>
<img src="你的头像图片链接" alt="头像">
</body>
</html>
2. CSS 样式核心代码
css
三、关键样式代码
四、注意事项 。
- 图片路径：
src属性里的图片链接要替换成你自己的头像地址，可以是本地路径或网络链接。 - 调整光晕强度：
- 想让光晕更宽：增大
padding的数值。 - 想让光晕更柔和：增大
box-shadow中模糊值（12px）和扩展值（3px）。 - 想换颜色：把
pink和lightblue换成你喜欢的颜色，比如purple、orange等。
- 想让光晕更宽：增大
- 保持宽高比：一定要保证
width和height数值相等。
五、效果拓展
你可以基于这个思路做更多有趣的变化：
- 多色渐变：添加更多方向的
inset阴影，实现彩虹色渐变光晕。 - 动态效果：配合
:hover伪类，让鼠标悬停时光晕变亮或旋转。 - 不同形状：把
border-radius改成15px，就能得到带圆角的方形发光头像。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
