是否厌倦了博客上图片一成不变的方方正正?是否对后期处理成圆角感到繁琐或效果不满意?本座最近找了个非常简单的办法解决了此问题,这当然也得归功于WordPress的“2012”主题,让我直接找到代码并copy了一把。

方法很简单,只需要在CSS中添加如下代码即可立刻实现:

//“img”类名可能随不同主题有所区别,比如“image”
img{
    border-radius: 3px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

以上CSS中,box-shadow的语法为:

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离。
spread 可选。阴影的尺寸。
color 可选。阴影的颜色。请参阅 CSS 颜色值。
inset 可选。将外部阴影 (outset) 改为内部阴影。

有童子可能会说,我只想正文里的图片有圆角和阴影,不想要其他地方显示出来,怎么做?其实也很简单,在主题CSS中找到.entry-content(取决于主题CSS对正文类的描述),然后添加:

.entry-content img{
    border-radius: 3px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}