子比主题美化：鼠标悬停图片添加外发光效果

在使用 WordPress 子比（Zibll）主题搭建网站时，精美的视觉效果能显著提升用户体验。图片作为文章的重要组成部分，默认样式往往略显单调。本文将分享一个简单实用的美化技巧 —— 为文章内的图片添加鼠标悬停外发光效果，仅需几行 CSS 代码，就能让你的图片在鼠标移过时呈现出灵动的发光效果，让文章视觉表现更出色。

效果预览

默认状态：文章内图片保持原有样式，无额外视觉效果，不影响正常浏览；

悬停状态：当鼠标移动到图片上时，图片边缘会出现一层柔和的浅蓝色外发光（#63B8FF），发光范围为 8px，视觉上突出图片，提升交互感。

代码部署

1. 登录你的 WordPress 后台管理面板；
2. 在左侧菜单栏找到并点击「主题设置」；
3. 在主题设置页面中，依次展开「全局 & 功能」→「自定义代码」；
4. 找到「自定义 css 样式」输入框；
5. 将以下完整的 CSS 代码粘贴到输入框中；
6. 滚动到页面底部，点击「保存设置」按钮，完成部署。

自定义调整

你可以根据自己的网站风格，调整以下参数实现个性化效果：

1. 发光颜色调整

将代码中的 #63B8FF 替换为你喜欢的颜色值即可，推荐几款适配性高的颜色：

• 温馨暖色调：#FF9966（橙粉色）
• 高级冷色调：#9999FF（淡紫色）
• 简约黑白调：#CCCCCC（浅灰色）
• 活力亮色调：#33CC33（嫩绿色）

2. 发光范围 / 强度调整

box-shadow 属性的参数格式为：box-shadow: 水平偏移 垂直偏移 模糊半径 颜色;

• 水平 / 垂直偏移：保持 0px 即可（发光均匀环绕图片）；
• 模糊半径：数值越大，发光范围越广、效果越柔和；数值越小，发光越集中、越清晰。示例：
  • 更柔和的效果：0px 0px 15px #63B8FF
  • 更紧凑的效果：0px 0px 5px #63B8FF

3. 过渡效果调整

代码中新增的 transition 属性用于让发光效果从无到有更丝滑，可调整参数：

• 0.3s 为过渡时长，数值越大，动画越慢（如 0.5s）；数值越小，动画越快（如 0.1s）；
• 若不需要过渡效果，直接删除 transition: box-shadow 0.3s ease-in-out; 即可。

结语

本文分享的子比主题图片外发光美化技巧，操作简单且无兼容性问题，仅通过几行 CSS 代码就能大幅提升文章图片的交互体验。你可以根据网站的整体风格，灵活调整发光颜色、范围等参数，让图片效果与网站风格高度契合。