Web编程技术营地
研究、演示、创新

光影特效

撰写时间:2026-03-21

修订时间:2026-03-21

球状高光图标

手机上有许多图标是伪高光,例如:

note.svg
note.svg

高光部分使用了一个简单的线性渐变,主体的小圆使用一个乳白色,从而近似地模拟出一个晶莹剔透的高光效果。

而如果利用辐射渐变,则很容易制作出一个效果更逼真的球状高光图标。

根据用户所指定的--base-color,高光部分使用相对颜色,色相值取相邻30o的相近色,稍微提高亮度,并将高光置于右上角。

修改--base-color的值,高光值则自动随之改变。

参考资源

  1. SVG V1.1