Wordpress建站教程:给图片添加CSS样式

yund56 2025-04-22 08:30 13 浏览

作者：悦然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

插件安装好后可以直接在古腾堡编辑器页面给对应的图片添加不同的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;

实心边框

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

上下边框

以上CSS效果大家可以随意修改里面的数值。

关于blocks-css插件的具体使用方法大家可以查看下面这篇文章。

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