Published on

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

Authors
  • avatar
    Name
    Adam Liu
    Twitter

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。不同的主题，样式文件名可能不同哦。

null

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

完。

本文写作耗时约 40 分钟。