给wordpress网站添加图片和文字CSS预设样式

我在自己的网站更新内容时，有时会感觉图片和文字默认的显示不太好看，以前我是使用古腾堡模块加的样式，比如给图片加边框、阴影，给一些特殊文字添加背景、边框等等。

但如果每次都要这样加又有点麻烦，而且页面编辑器的样式很多没办法直接复制到公众号，不是很方便，于是现在我改用以下两个CSS预设，在需要的内容上填写CSS类名就可以了，样式也可以直接复制到公众号中，不用再手动修改。

图片边框和阴影

.yrimg {
    border: 1px solid #d1d5db50; 
    border-radius: 3px; 
    padding: 6px; 
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);  
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

上面的参数可以按需修改，前面的CSS名(yrimg)也可以自行修改。这个效果可以用在一些白底图片上，这样视觉更柔和，不显突兀

文字背景和边框

.yrinfo {
    background: #f8fafc;
    border: 1px solid #bfdbfe;
    border-left: 2px solid #71a3e1;
    border-radius: 3px;
    padding: 10px 10px 10px 20px;
    margin: 0 0 1.2em;
}

同样，里面有参数和CSS名可以自己修改。这个效果可以用到一些列表，或步骤等内容上，和正文做一个区分。

使用方法

首先，打开wordpress网站的【外观】-【自定义】-【Additional CSS/额外CSS】，把上面的两个CSS一起复制粘贴进去，然后更新发布。

然后在后面写文章内容时，选中元素，在右边点开【区块】-【高级】，填写之前预设好的CSS类名，比如就按我上面设置的，如果是图片，我就填写yrimg，如果是文字，我就可以填写yrinfo。

文章发布之后，前端显示的效果如下所示：

---

分享完毕，以上只是我的自用分享，大家也可以按需复制使用。