轻松掌握WordPress：为图片添彩的CSS样式秘籍

作者：悦然WordPress建站(悦然建站）

（此处已添加小程序，请到今日头条客户端查看）

今天继续为大家带来wordpress建站的相关教程，主要讲述如何为图片应用CSS样式。

如今，许多使用wordpress搭建网站的朋友们都已经熟悉古腾堡编辑器，然而大家是否发现，古腾堡的图像区块仅提供了一些基础的设置选项，比如默认样式、圆角以及尺寸调整，却无法为图片添加更加吸引眼球的效果呢？

在这里，悦然网络工作室将分享如何为古腾堡图像区块增添CSS样式，使得你的内容更加引人注目。

方法一：全局添加CSS样式

/* 添加阴影和边框 */
.wp-block-image img {
box-shadow: 15px 15px 0px #d6d6d6;
border: 1px solid #d6d6d6;
}

你只需将上述CSS样式代码放入网站的CSS文件中。如果你的主题提供了CSS自定义选项，操作会更为简便，只需在外观-自定义-额外CSS选项中加入这段代码即可。

方法二：为不同图片应用多样CSS样式

我们同样可以采用上述方法，不过需要提前在主题的CSS表中定义好不同样式，然后在图像区块的高级选项中添加相应的CSS类。虽然这样操作稍显复杂，这里我们将介绍使用插件的方法来简化流程。

实际上，悦然网络工作室之前的文章中已经提到过类似的工具，这款插件名为blocks-css。

blocks-css插件下载地址

https://downloads.wordpress.org/plugin/blocks-css.zip

参考文章：wordpress插件必备-必不可少的优质wordpress插件推荐

插件安装完成后，你可以在古腾堡编辑器中为每张图片轻松添加不同的CSS样式，如上图所示。

box-shadow: 15px 15px 0px #d3dce5;

阴影效果示例

box-shadow: 8px 8px 14px rgba(100, 100, 100, 0.5);

半透明阴影示例

border: 1px solid #445e79;
border-radius: 10px;

实心边框示例

自定义上下边框的CSS样式

border-top: 10px solid #445e79;
border-bottom: 10px solid #445e79;

上下边框设置

在上述CSS代码中，您可以自由调整数值，以满足您的设计需求。

若想了解关于blocks-css插件的详细使用指南，请参考以下链接。

为WP古腾堡区块添加CSS效果【
https://www.zsxxfx.com/5546.html】