[WordPress] 如何优雅地给文章的配图添加阴影效果

Intro

不知道你有没有到一个细节,我博客里面的文章配图都是有阴影效果的。

增加了阴影效果的配图会更加有立体感,和文字一起更加和谐。

那么问题来了,如何给配图添加阴影效果呢?

你可能想到了用Wordpress插件

一般情况下,Wordpress的这类插件需要后端PHP把整个照片载入内存,接着使用ImageMagick库直接修改图片,增加阴影效果,顺便浪费我的EC2 CPU积分

然而,作为一个资深(也就是老的意思)的程序员,上面安装插件的方法不够优雅,而且太overkill了。

所以,建议您使用舒适达抗敏感牙膏CSS3 box-shadow

这个效果的浏览器兼容性也很高:≈95%

Show you the code

/* 我这个版本的Wordpress默认会给图片添加“.is-style-default” class */
/* "> image" 的意思是,只选择上面的class直属img标签 */
.is-style-default > img {
    box-shadow: 0 10px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19)
}

把上述代码添加到style.css文件最后面。

你需要去到主题的源文件编辑器,才能修改文件,比如: https://you-domain.com/wp-admin/theme-editor.php?file=style.css&theme=twentyseventeen

⚠️请注意,我使用的是Wordpress 5.3.2 twentyseventeen 2017年主题,这个主题的样式文件是style.css。不同的主题,样式文件名可能不同哦。

这个是写文章时的图片配置页。is-style-default类就是这里默认生的。

完。

本文写作耗时约40分钟。