本文介绍如何通过CSS代码为子比主题的文章图片添加圆角样式。核心是使用 border-radius 属性控制图片的圆角程度，并提供针对文章内容图片、特色图片、文章列表缩略图等不同场景的解决方案。所有修改均在后台自定义CSS中完成，无需修改主题核心文件，升级主题时效果不会丢失。

适用人群：使用Zibll子比主题并希望优化文章图片视觉效果的WordPress站长

核心价值：通过极简的CSS代码，为网站文章中的图片添加圆角，让页面布局更柔和、更具设计感。

操作前准备

在开始配置之前，需要先确认以下几点：

• 无需修改主题文件：所有效果均通过后台自定义CSS实现，升级主题时效果不会丢失。
• 操作入口：WordPress后台 → 「Zibll子比主题」→「主题设置」→「全局&功能」→「自定义代码」→「自定义CSS样式」。
• 核心CSS属性：border-radius 用于控制元素圆角大小，数值越大圆角越明显。
• 备份建议：在添加任何自定义代码前，建议先备份网站。

CSS代码方案

以下是几种常用的图片圆角方案，可根据需求选择使用。

方案一：文章内容所有图片添加圆角（最常用）

为文章正文中的所有图片统一添加圆角：

方案二：仅文章特色图片（缩略图）添加圆角

如果只想为文章列表中的特色图片（缩略图）添加圆角：

方案三：为所有图片添加圆角（全局）

如果希望网站所有图片都应用圆角效果：

方案四：不同位置不同圆角大小

为不同区域的图片设置不同的圆角大小：

说明：友链头像圆角代码参考自相关美化教程。

方案五：仅特定角落添加圆角

如果只想为图片的某几个角添加圆角：

方案六：图片圆角 + 阴影组合效果

将圆角与阴影效果结合，让图片更具立体感：

操作步骤

进入自定义CSS设置

• 登录WordPress后台。
• 进入 「Zibll子比主题」→「主题设置」。
• 在左侧菜单找到 「全局&功能」 ，点击 「自定义代码」 选项卡。
• 找到 「自定义CSS样式」 文本框。

粘贴代码并保存

• 从上方方案中，选择一款你喜欢的圆角样式，完整复制对应的CSS代码。
• 粘贴到 「自定义CSS样式」 文本框中。
• 点击页面底部的 「保存设置」 按钮。

刷新前台查看效果

• 打开网站首页或任意文章页面。
• 查看文章中的图片是否已应用圆角效果。

效果参数自定义说明

参数	说明	可调整值
border-radius: 12px	四个角的圆角大小	4px（微圆角）、8px（适中）、16px（大圆角）、50%（圆形）
border-radius: 12px 0 12px 0	分别设置左上、右上、右下、左下	按需调整各角数值
box-shadow: 0 4px 16px	图片阴影	调整数值控制阴影深度和扩散范围
transition: 0.3s	动画过渡时间	0.2s（更快）、0.5s（更慢）

功能验证

配置完成后，建议进行以下验证：

验证步骤

• 保存配置：确保已点击「保存设置」按钮。
• 刷新前台：打开网站首页或任意包含图片的文章页面。
• 检查效果：查看图片是否已显示圆角。
• 测试不同区域：在文章内容、列表页、侧边栏等不同区域分别测试。

排障指引

如效果未生效，请依次检查：

• CSS代码是否完整复制、无遗漏
• 是否粘贴在 「自定义CSS样式」 文本框（而非「自定义JavaScript代码」）
• 是否已点击 「保存设置」 按钮
• 浏览器缓存是否已清除（按 Ctrl+F5 强制刷新）

常见问题

问题	解决方法
圆角效果未显示	检查代码是否粘贴在「自定义CSS样式」中；清除浏览器缓存后刷新
圆角太大或太小	调整 border-radius 的像素值（如 12px 改为 8px 或 16px）
仅部分图片生效	检查CSS选择器是否覆盖了目标图片；可尝试使用 img 全局选择器
图片出现白边或裁切	检查图片是否设置了 overflow: hidden；确保父容器未限制尺寸
升级主题后效果丢失	代码保存在主题设置的自定义代码中，升级主题不会丢失
内容缩略图列表没有圆角	子比主题部分图片后台可控圆角，但内容缩略图列表需通过自定义CSS单独设置