wordpress图像大小
您想在 WordPress 中的图像周围添加边框吗？最近，我们的一位用户向我们询问一种在 WordPress 中为图像添加边框的简单方法。虽然您可以使用 CSS，但它会让初学者感到困惑。在本文中，我们将向您展示一种在 WordPress 中添加图像边框的简单方法，而无需编辑任何 HTML 或 CSS 代码。
您想在 WordPress 中的图像周围添加边框吗？最近，我们的一位用户向我们询问一种在 WordPress 中为图像添加边框的简单方法。虽然 CSS 是可行的，但它可能会让初学者感到困惑。在本文中，我们将向您展示一种在 WordPress 中添加图像边框的简单方法，而无需编辑任何 HTML 或 CSS 代码。
影片教学 （Video Tutorial）
如果您不喜欢该视频或需要更多说明，请继续阅读。
如果您不喜欢该视频或需要更多说明，请继续阅读。
方法1：使用插件在WordPress中添加图像边框 （Method 1: Using a Plugin to Add Image Border in WordPress）
This method is for beginners who do not wish to edit any HTML or CSS. First thing you need to do is install and activate the WP 图像边框 plugin. Upon activation, you need to visit 设置 » WP 图像边框 to configure the plugin settings.
此方法适用于不想编辑任何HTML或CSS的初学者。 您需要做的第一件事是安装并激活WP 图像边框插件。 激活后，您需要访问设置 » WP 图像边框以配置插件设置。
The first section in the plugin settings allows you to target images. You can add borders to all images in your WordPress posts by checking the box next to “为博客文章中的所有图像添加边框” option.
插件设置的第一部分允许您定位图像。 您可以通过选中“为博客文章中的所有图像添加边框”选项旁边的框，为WordPress文章中的为所有图像添加边框 。
Alternatively, you can target specific CSS classes to have borders. We will show you how to add a CSS class to a specific image later in this article. Right now you can put anything into the CSS class like .border-image.
或者，您可以将特定CSS类定位为具有边框。 本文后面将向您展示如何向特定图像添加CSS类。 现在，您可以将任何东西放入CSS类中，例如.border-image 。
插件设置中的第二部分允许您自定义边框设置。您可以选择边框样式、宽度、半径和颜色。
插件设置的第二部分允许您自定义边框设置。您可以选择边框样式、宽度、半径和颜色。
设置页面的最后一部分允许您向图像添加阴影。您可以输入水平和垂直距离、模糊和扩散半径以及框阴影颜色。如果您不想向图像添加阴影，则只需将这些字段留空即可。
设置页面的最后部分允许您向图像添加阴影。您可以输入水平和垂直距离、模糊和分散半径以及框阴影颜色。如果您不想向图像添加阴影，只需将这些字段留空即可。
不要忘记单击“保存更改”按钮来存储您的插件设置。
不要忘记单击“保存更改”按钮来存储您的插件设置。
If you selected the first option “为博客文章中的所有图像添加边框”, then you do not need to do anything else.
如果选择了第一个选项“为博客文章中的所有图像添加边框” ，则您无需执行其他任何操作。
您应该在所有博客文章图像上看到图像边框。
您应该在所有博客文章图像上看到图像边框。
但是，如果您选择第二个选项仅显示特定图像的边框，则需要执行下一步。
但是，如果您选择第二个选项仅显示特定图像的边框，则您将需要继续执行下一步。
在WordPress中将CSS类添加到图像 （Adding CSS Class to an Image in WordPress）
如果您只想在选定图像周围添加边框，那么您需要告诉 WordPress 哪些图像应该有边框。您可以通过向需要边框的图像添加 CSS 类来实现此目的。
如果您只想要所选图像周围有边框，则需要告诉 WordPress 哪些图像应该有边框。您可以通过向需要边框的图像添加 CSS 类来实现此目的。
只需上传您的图片并将其添加到您的帖子中即可。添加图像后，在可视化编辑器中单击它，然后单击工具栏中的编辑按钮。
只需上传您的图片并将其添加到您的帖子中即可。添加图像后，在可视化编辑器中单击它，然后单击工具栏中的“编辑”按钮。
这将弹出图像编辑弹出窗口，显示您的图像详细信息。您需要单击“高级选项”将其展开，然后输入图像的 css 类。
这将弹出一个图像编辑弹出窗口，显示图像详细信息。您需要单击“高级选项”将其展开并输入图像的 css 类。
Hint: this is .border-image because we selected that in our plugin settings.
提示：这是.border-image因为我们在插件设置中选择了该.border-image 。
接下来，单击更新按钮保存并更新图像设置。就这样，您的图像现在将有一个额外的类。由于您使用的是 WP Image Borders 插件，因此该图像上将显示边框。
接下来，单击“更新”按钮保存并更新图像设置。就是这样，您的图像现在将有一个额外的类。由于您使用的是 WP Image Borders 插件，因此图像上会出现边框。
方法2：使用HTML和CSS在WordPress中添加图像边框 （Method 2: Using HTML & CSS to add Image Borders in WordPress）
使用 CSS/HTML 添加图像边框是在 WordPress 中为图像添加边框的越来越快捷的方法。有很多方法可以做到这一点，我们将向您展示所有这些方法。您可以选择最适合您的方式。
使用 CSS/HTML 添加图像边框是在 WordPress 中获取图像周围边框的一种越来越快的方法。有很多方法可以做到这一点，我们将向您展示所有这些方法。您可以选择最适合您的方法。
在WordPress中使用内嵌样式添加边框 （Adding Borders Using In-line Styles in WordPress）
After you have uploaded and inserted your image into a WordPress post, switch to the 文本编辑器. You will see HTML code for your image. It will look something like this:
上传图像并将其插入WordPress帖子后，请切换至文本编辑器 。 您将看到图像HTML代码。 它看起来像这样：
<img src="http://www.example.com/wp-content/uploads/2015/04/bluebird-300x203.jpg" alt="bluebird" width="300" height="203" class="alignnone size-medium wp-image-36" />
您可以轻松地在 HTML 代码中添加 CSS 样式，如下所示：
您可以轻松地在 HTML 代码中添加 CSS 样式，如下所示：
<img src="http://www.example.com/wp-content/uploads/2015/04/bluebird-300x203.jpg" alt="bluebird" width="300" height="203" class="alignnone size-medium wp-image-36" style="border:3px solid #eeeeee; padding:3px; margin:3px;" />
您可以根据自己的需要随意更改边框宽度、颜色、填充和边距。
您可以根据需要随意更改边框的宽度、颜色、填充和边距。
在WordPress主题或子主题中添加图像边框 （Adding Image Border in Your WordPress Theme or Child Theme）
If you want to permanently add borders to all images in your WordPress blog posts and pages, then you can add CSS directly in your WordPress theme or 儿童主题.
如果您想为WordPress博客文章和页面中的所有图像永久添加边框，则可以直接在WordPress主题或在副主题中添加CSS。
大多数 WordPress 主题已经在主题的样式表（通常是 style.css 文件）中定义了这些样式规则。您可以修改现有的 CSS，也可以在子主题中添加自己的 CSS。
大多数 WordPress 主题已经在主题的样式表（通常是 style.css 文件）中定义了这些样式规则。您可以修改现有 CSS 或在子主题中添加自己的 CSS。
WordPress 为所有图像添加默认图像类。为了确保帖子/页面中的图像具有图像边框，您需要定位所有这些类。下面是一个简单的 CSS 片段，可以帮助您入门：
WordPress 为所有图像添加默认图像类。为了确保帖子/页面中的图像具有图像边框，您需要定位所有这些类。下面是一个简单的 CSS 片段，可以帮助您入门：
img.alignright {
float:right;
margin:0 0 1em 1em;
border:3px solid #EEEEEE;
}
img.alignleft {
float:left;
margin:0 1em 1em 0;
border:3px solid #EEEEEE;
}
img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
border:3px solid #EEEEEE;
}
img.alignnone {
border:3px solid #EEE;
}
如果您只想在需要时使用图像边框，那么您可以向图像添加 CSS 类（见上文）。在您的主题或子主题中添加此 CSS 类的样式规则。
如果您仅在需要时使用图像边框，则可以向图像添加 CSS 类（见上文）。在您的主题或子主题中添加此 CSS 类的样式规则。
img.border-image {
border: 3px solid #eee;
padding:3px;
margin:3px;
}
We hope this article helped you add image border around your WordPress blog images. You may also want to see our guide on 如何保存针对网络优化的图像 to speed up your WordPress site.
我们希望本文能帮助您在WordPress博客图像周围添加图像边框。 您可能还想查看我们的指南，以了解如何保存针对网络优化的图像以加快WordPress网站的速度。
If you liked this article, then please subscribe to our YouTube 频道 for WordPress video tutorials. You can also find us on 推特 and Facebook.
如果您喜欢这篇文章，请订阅我们的YouTube 频道 WordPress视频教程。 您也可以在推特和Facebook上找到我们。
翻译自: https://www.wpbeginner.com/beginners-guide/how-to-add-a-border-around-an-image-in-wordpress/
wordpress图像大小