你是否觉得图片上传到 WordPress 网站后，就像消失在了背景里？你精心挑选了视觉效果，但一旦放到页面上，它们就显得很平淡，仿佛根本不存在一样。
这种情况在简洁的白色布局中尤其常见。它会让你的内容显得不够吸引人，即使其他部分看起来都很精致。
这时，添加一个简单的边框就能带来巨大的改变。
在 猫哥，我们喜欢为截图添加干净的边框，这能让它们更突出，并提升页面的整体外观。这是我们提升互动率、实现更平衡设计和更专业感的秘诀之一。
在本指南中，我们将向你展示在 WordPress 中为图片添加边框的三种简单方法。学完之后，你将知道如何让你的图片脱颖而出，并保持访客对你内容的兴趣。
为什么要在 WordPress 中给图片添加边框？
边框能帮助你的图片从内容中脱颖而出，尤其是在浅色或繁忙的背景下。它创建了一个清晰的视觉界限，让你的图片更容易被看到，也更有可能吸引注意力。
图片是强大的沟通工具。它们可以快速传达信息，让文字密集的页面更具吸引力。
然而，有时图片会与网站背景融为一体。如果你使用了背景图片，或者网站的颜色与图片相似，就更容易出现这种情况。
有视力障碍或色盲的人也可能难以将图片与背景区分开来。如果你想了解更多，可以查看我们关于提升 WordPress 网站可访问性的指南。
在 WordPress 中为图片添加边框，可以清晰地将图片与网站背景区分开来。这也是吸引读者注意你最重要视觉元素的好方法。
考虑到这一点，我们将引导你了解如何在 WordPress 博客中为图片添加边框。
以下是本文涵盖的所有方法的快速概览：
- 方法 1：使用自定义 CSS 类在 WordPress 中为图片添加边框
- 方法 2：使用页面构建器在 WordPress 中为图片添加边框
- 方法 3：使用 HTML 和 CSS 在 WordPress 中为图片添加边框
- 额外技巧：使用图形设计工具为图片添加边框
- 常见问题：在 WordPress 中为图片添加边框
- 更多图片使用指南
准备好了吗？让我们开始吧。
方法 1：使用自定义 CSS 类在 WordPress 中为图片添加边框
创建自定义 CSS 类是一种聪明且简单的方法，可以为你的图片添加边框。CSS 类是一段可重用的代码，允许你将相同的样式（如边框、颜色或间距）应用于网站上的多个元素。
这样，你无需逐一编辑每个图片，只需在一个地方定义边框设置，然后通过几次点击将它们应用到你需要的地方。如果你计划在网站上为多个图片添加边框，这非常完美。
有几种方法可以创建自定义 CSS 类。你可以使用主题自定义器、全站编辑器或 WPCode 插件。
我们强烈推荐使用 WPCode 插件，因为它对初学者友好且与主题无关。这意味着即使你更换了主题，自定义 CSS 仍然有效。
在我们的合作伙伴品牌中，我们使用 WPCode 来添加和管理自定义代码片段。要了解更多信息，请查看我们的详细 WPCode 评测。
那么，让我们安装并激活 WPCode 插件。如果你需要帮助，可以参阅我们关于如何安装 WordPress 插件的指南。
注意：你可以使用 WPCode 的免费版本，但升级到 WPCode Pro 将解锁更多功能，如代码调度和完整的修订历史记录。
激活后，你需要导航到 代码片段 » + 添加片段。
然后，将鼠标悬停在“添加你的自定义代码（新片段）”选项上，然后点击“使用片段”。
在下一个屏幕上，WPCode 会要求你选择代码类型。
你可能会注意到 WPCode 的默认设置指向“PHP 片段”，但在这里，你需要点击“CSS 片段”。
这将打开 WPCode 编辑器。首先，为自定义片段创建一个名称。例如，我们使用“border-black”。
请注意，在创建 CSS 类时，你需要指定边框的宽度和颜色。
例如，你可以为宽度设置像素（px），为颜色设置十六进制颜色代码。
在以下代码片段中，我们创建了一个宽度为 5 像素的黑色边框：
.border-black {
border: #000 solid 5px;
}在上面的示例代码中，border-black 是 CSS 类的名称（与 WPCode 中的自定义代码片段名称相同，这有助于保持组织性）。
你可以使用任何你想要的名字，但每次创建边框时都需要输入 CSS 类名。因此，你需要一个简短且易于记忆的 CSS 类名。
现在，你只需将那段代码片段复制到 WPCode 的“代码预览”字段中，如下所示：
之后，你可以切换开关激活该片段，然后点击“保存片段”或“更新”按钮。有关详细说明，请参阅我们关于向 WordPress 添加自定义 CSS 的指南。
你可以添加任意数量的 CSS 类。例如，你可以创建不同颜色的边框。
现在，为图片添加边框就非常简单了。
首先，点击 WordPress 页面或文章中的图片。接下来，查看屏幕右侧的“区块”选项卡，找到“高级”选项。
点击展开该部分。
在“额外 CSS 类”字段中，输入你想要添加到图片的 CSS 类名。
请注意，如下图所示，边框不会出现在 WordPress 内容编辑器中。
要查看边框在访客眼中的效果，请点击“预览”按钮。
你现在将看到应用了边框的图片。
如果你对边框的外观满意，那么只需发布或更新页面即可。
方法 2：使用页面构建器在 WordPress 中为图片添加边框
另一种方法是使用页面构建器插件。
拖放式页面构建器允许你轻松设计和自定义网页，例如登录页面和着陆页。你可以在没有任何编码技能的情况下添加文本、图片和其他元素。
这些工具还允许你轻松地为每个图片创建独特的边框。你可以使用基于视觉的编辑器来设计它们，这对许多人来说更容易。
我们推荐 SeedProd，它是 WordPress 最好的着陆页构建器。它易于使用，让你轻松创建专业外观的页面。
请随意查看我们的完整 SeedProd 评测，了解我们推荐此工具的原因。
SeedProd 有一个特殊的图片区块，内置了边框选项。你还可以轻松添加阴影和调整间距。
首先，你需要安装并激活该插件。如果你需要帮助，请参阅我们关于如何安装 WordPress 插件的指南。
注意：在本指南中，我们将使用 SeedProd 的免费版本，这样无论预算如何，你都可以为图片添加边框。还有 SeedProd Pro 版本，可以让你访问包含 200 万张库存照片的库，以及额外的区块。
激活后，让我们从 WordPress 仪表盘进入 SeedProd » 着陆页。
SeedProd 提供了数百个专业设计的模板，这些模板按类别分组。在屏幕顶部，你会看到一些类别，你可以使用它们来：
- 构建 404 页面。
- 创建自定义登录页面。
- 设计漂亮的“即将推出”页面。
- 以及更多。
要查看设计，只需将鼠标悬停在模板上，然后点击出现的放大镜图标。
这将显示模板的预览。
如果你对模板的外观满意，请点击“选择此模板”。
在“页面名称”字段中，为页面输入一个名称。默认情况下，SeedProd 会使用此名称作为页面的 URL。
如果你想更改此自动创建的 URL，只需编辑“页面 URL”字段中的文本。
输入信息后，点击“保存并开始编辑页面”按钮。这将在 SeedProd 的拖放式编辑器中打开你选择的模板。
在左侧菜单中，你将看到所有可以通过拖放添加到 WordPress 页面的区块。
只需找到“图片”区块，然后将其拖放到你的页面设计上。
完成后，点击“图片”区块，查看所有可用于自定义该区块的设置。
专业提示：SeedProd 的 AI 图像生成器（集成 DALL·E）让你在几秒钟内创建高质量的图像。只需描述你需要的图像，AI 就会生成匹配你网站风格的视觉内容。
在左侧菜单中，点击“使用你自己的图片”。
你现在可以从 WordPress 媒体库中选择任何图片。
之后，点击左侧菜单中的“高级”选项卡。
然后，点击展开“图片边框”部分。
默认情况下，SeedProd 的所有“边框宽度”设置都是 0，这意味着图片没有边框。
你要做的第一件事是增加这些值，使其大于或等于 1。这将为图片添加可见的边框。
首先，点击每个“边框宽度”字段，然后输入更高的数字，或者使用出现的箭头按钮。
当你对边框的厚度满意后，就可以开始设置样式了。
一个选项是更改边框的颜色，方法是点击“边框颜色”旁边的字段。这将打开一个弹出窗口，你可以在其中选择新的边框颜色。
SeedProd 提供了三种简单的边框样式：实线、点状和虚线。你可以选择最适合你图片的样式。
要尝试这些不同的边框样式，只需打开“边框样式”下拉菜单，然后从列表中选择一个选项。
大功告成！
如果你想为其他图片添加边框，只需按照上述相同步骤操作即可。
一旦你对页面设计满意，点击“保存”按钮，然后选择“发布”使其上线。
方法 3：使用 HTML 和 CSS 在 WordPress 中为图片添加边框
你还可以使用 HTML 和 CSS 添加边框。这种方法不需要插件，这很方便。
然而，自定义边框外观需要编写一些代码，因此可能不是初学者的最佳选择。如果你对编码比较熟悉，这种方法提供了很大的灵活性。
首先，让我们向任何页面或文章添加一张图片。
完成后，点击右上角的三个点图标，然后点击“代码编辑器”。
WordPress 现在将显示构成页面或文章的所有代码。
你现在可以找到将图片添加到页面的代码部分。这段代码以 wp:image 开头。
如果页面有多个图片，请检查 img src= 值。这是图片在你的 WordPress 媒体库中的 URL，每个图片都不同。
一旦找到正确的代码部分，下一步就是编写一行代码，用于添加边框并控制其样式。
例如，在以下代码片段中，边框宽度为 3 像素。我们还添加了 3 像素的内边距和外边距：
style="border:3px solid #000000; padding:3px; margin:3px;" />在上面的示例代码中，solid #000000 设置了边框的颜色。#000000 值是黑色的十六进制代码。
如果你不想创建黑色边框，可以用任何其他十六进制代码替换该值。
确定边框代码后，你需要找到 />
部分，并在第一个 / 字符之前直接添加你的代码。
让我们看一个例子：
<!-- wp:image {"id":1450,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="http://localhost:10003/wp-content/uploads/2022/06/logo.jpeg" alt="" class="wp-image-1450" style="border:3px solid #000000; padding:3px; margin:3px;" /></figure>
<!-- /wp:image -->当你对代码满意后，点击“退出代码编辑器”退出代码编辑器。
你现在应该会看到图片周围有一个边框。不用担心收到关于无效 HTML 的警告。这是正常的，不会影响图片的显示方式。
如果你对效果满意，可以像往常一样更新或发布你的页面。
现在，如果你访问你的 WordPress 网站，你会看到图片周围有一个边框。
额外技巧：使用图形设计工具为图片添加边框
虽然 WordPress 提供了几种添加边框的方法，但这些选项有时在样式和自定义方面可能有限。那么，为什么不先编辑图片，然后再上传到 WordPress 呢？
这时图形设计工具就派上用场了。
Adobe Photoshop 是这个领域的佼佼者，为专业人士提供了大量高级功能。如果你不想花太多钱，Affinity Photo 是一个不错的选择——它拥有类似的功能，但只需一次性付费。
对于更用户友好、基于浏览器的体验，Canva 是一个出色的工具。我们的团队经常使用它来快速设计特色图片和社交媒体图形。
如果你预算有限，GIMP 可以成为你的首选。它是完全免费、开源的，并且可以完成许多付费工具能做的事情。
GIMP 对于初学者和有经验的用户来说都是一个很好的选择。你可以在 Mac 和 Windows 上使用它。
在本教程中，我们将演示如何使用 GIMP 为图片添加边框。
安装后，打开 GIMP 桌面应用程序。接下来，点击文件 » 打开，从本地驱动器中选择一张图片进行编辑。或者，你也可以将图片拖放到 GIMP 编辑器中。
图片加载到 GIMP 编辑器后，让我们使用“矩形选择工具”在图片周围绘制一个边框。你可以在左上角的工具栏中找到此工具。
接下来，你可能需要检查你的前景色和背景色设置。
这是因为 GIMP 使用前景色来描边。因此，如果你需要为边框使用特定颜色，可以点击前景色进行调整。
这将打开颜色选择器，你可以在颜色选择区域上移动鼠标，或插入颜色的十六进制代码。
完成后，点击“确定”。
现在你已经设置了边框颜色，是时候应用它了。你可以导航到编辑 » 描边选区，这将打开“描边选区”弹出窗口。
在这里，你可以调整描边的样式、线宽等。例如，我们将线宽设置为 5 像素。
完成后，点击“描边”，边框现在应该被添加到你的图片中。
在上传到 WordPress 之前，你可能需要优化图片以保持出色的网站速度和性能。原始图片通常体积较大，因此这一步可能会非常有帮助。
在 GIMP 中，你可以通过调整图片大小来优化图片。
首先，导航到图像 » 缩放图像。这将打开“缩放图像”弹出窗口，你可以在其中调整“图像尺寸”，如下所示：
调整图像大小后，点击“缩放”按钮。
GIMP 将调整图片大小，并在编辑器中显示新版本。
完成后，你可以通过文件 » 导出为保存图片。
然后，按照提示选择位置、命名文件并定义图像格式。一切设置完毕后，点击“导出”。
现在，你可以将图片上传到你的 WordPress 文章或页面。以下是它在区块编辑器中的效果：
就是这样——你已经学会了如何使用图形设计工具为图片添加边框！
每当你想要将图片上传到 WordPress 时，都可以使用此方法。
常见问题：在 WordPress 中为图片添加边框
仍然对设置图片样式有疑问？以下是一些常见问题，可以帮助你排除故障、自定义设置，并充分利用在 WordPress 中添加边框的功能。
我可以一次性为网站上的所有图片添加相同的边框吗？
是的，你可以通过自定义 CSS 将样式应用于主 img 标签来实现。但是，这可能会影响 Logo、图标或小工具中的图片。
为了更好的控制，我们建议创建一个 CSS 类（如方法 1 中所示），并仅将其应用于你想要添加边框的图片。
如何为我的图片边框创建圆角？
你可以使用 border-radius CSS 属性轻松创建圆角。只需在你的自定义 CSS 片段中添加一行 border-radius: 15px;。像素值越高，角越圆。
我可以移除 WordPress 主题自动添加的边框吗？
可以。要覆盖此设置，你可以创建一个自定义 CSS 类，例如 .no-border，并设置 border: none !important;。然后，你可以使用“额外 CSS 类”字段将其应用于特定图片。