给博客图片加上圆角

是否厌倦了博客上图片一成不变的方方正正?是否对后期处理成圆角感到繁琐或效果不满意?本座最近找了个非常简单的办法解决了此问题,这当然也得归功于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);
}

共有 15 条评论

            1. @chojemmy 那又没什么,我不是也在发吗?你还是去弄一个吧。我有几次在你那里灌水,不行。在墙内留言无能,跟瘙痒搔不到一样。你懂的。

  1. 话说这个功能非常文艺,我喜欢

    再话说以前有个网站可以直接转的,但后来网站挂了

    1. @Betty 嗯要是想要直接在图上做出圆角效果有不少软件比如美图秀秀或者windows live writer。不过这个CSS代码的确很简单又好用,推荐。

发表评论

电子邮件地址不会被公开。 必填项已用*标注