WordPress建站教程：如何为图片添加专业CSS样式提升网站视觉效果
作者：悦然WordPress建站（悦然建站）
今天我们将继续分享WordPress建站实用技巧。本教程将详细介绍如何为网站图片添加专业的CSS样式效果，帮助您的内容更加突出醒目。
Today we'll continue sharing practical WordPress website building tips. This tutorial will detail how to add professional CSS styling effects to website images, helping your content stand out more.
目前大多数WordPress用户已经习惯使用古腾堡编辑器，但您可能注意到，古腾堡的图像区块仅提供默认、圆角和尺寸调整等基本设置，缺乏更丰富的视觉效果选项。
Most WordPress users are now accustomed to using the Gutenberg editor, but you may have noticed that the Gutenberg image block only offers basic settings like default, rounded corners and size adjustments, lacking richer visual effect options.
方法一：全局添加CSS样式
Method 1: Adding Global CSS Styles
将以下CSS代码添加到您网站的样式表中：
Add the following CSS code to your website's stylesheet:
/* 添加阴影和边框 Add shadow and border */ .wp-block-image img { box-shadow: 15px 15px 0px #d6d6d6; border: 1px solid #d6d6d6; }如果您的主题提供CSS设置选项，可以通过外观→自定义→额外CSS轻松添加这些样式。
If your theme provides CSS settings options, you can easily add these styles via Appearance → Customize → Additional CSS.
方法二：为不同图片添加不同样式
Method 2: Adding Different Styles to Different Images
虽然可以通过主题模板预设CSS类来实现，但更简便的方法是使用Blocks CSS插件：
While you can preset CSS classes in theme templates, an easier method is to use the Blocks CSS plugin:
插件下载地址 Plugin download link: https://downloads.wordpress.org/plugin/blocks-css.zip
安装后，您可以直接在古腾堡编辑器中为每张图片添加独特的CSS效果：
After installation, you can directly add unique CSS effects to each image in the Gutenberg editor:
- 阴影效果 Shadow effect:
box-shadow: 15px 15px 0px #d3dce5; - 半透明阴影 Semi-transparent shadow:
box-shadow: 8px 8px 14px rgba(100, 100, 100, 0.5); - 实心边框 Solid border:
border: 1px solid #445e79; border-radius: 10px; - 上下边框 Top and bottom borders:
border-top: 10px solid #445e79; border-bottom: 10px solid #445e79;
您可以自由调整这些CSS值来创建最适合您网站风格的效果。
You can freely adjust these CSS values to create effects that best suit your website style.
更多关于Blocks CSS插件的详细使用方法，请参考：给WP古腾堡区块添加CSS效果
For more detailed usage of the Blocks CSS plugin, please refer to: Adding CSS Effects to WP Gutenberg Blocks
