给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;
}

该样式适用于白底图片，通过柔和的边框与阴影处理，增强视觉层次感，避免画面突兀。参数及类名（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;
}

此样式适合用于列表、步骤说明或重点提示，通过左侧强调色边框与浅色背景，有效区分正文内容。参数及类名（yrinfo）支持自定义修改。

配置与应用方法

1. 添加CSS代码：登录WordPress后台，进入【外观】-【自定义】-【Additional CSS/额外CSS】，将上述两段CSS代码粘贴保存并发布。

2. 应用样式：在编辑文章时，选中目标元素（图片或段落），在右侧区块设置的【高级】选项中，输入对应的CSS类名。例如，图片填入“yrimg”，文本块填入“yrinfo”。

前端实际展示效果如下：

以上为个人实践总结，欢迎根据具体需求复制使用。