/ 博客 / 2537阅

给博客图片加上圆角

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

    收藏了。这个极好,直接在图片里设置能行么?我用的wordpress空间不能改css

    Unknown · Unknown
    1. S̆̈

      @chojemmy应该可以,但是不是太繁琐了,每张都要加style属性。

      Unknown · Unknown
      1. chojemmy

        @S̆̈折腾了好久,发现不行。因为不支持css啊...

        Unknown · Unknown
        1. S̆̈

          @chojemmy我觉得你还是迁徙到自建站吧,别在墙外折腾了……我们留个言也特费劲。国内或国外主机都不贵的。

          Unknown · Unknown
          1. chojemmy

            @S̆̈说得极是,就怕到时候我技术折腾文会发个不停啊

            Unknown · Unknown
            1. S̆̈

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

              Unknown · Unknown
              1. chojemmy

                @S̆̈嘻嘻,先看着哈。给wordpress交的钱还没到期呢,不能铺张浪费。

                Unknown · Unknown
                1. S̆̈

                  @chojemmy我以前也用过worspress的服务器,后来没到期就转了。读者和自己用的舒服才最重要啊!

                  Unknown · Unknown
  2. 勺子

    窃以为还是方正的好。。。

    Unknown · Unknown
    1. S̆̈

      @勺子先这样吧。回头心情变化了再换。

      Unknown · Unknown
  3. Healson

    我来试试

    Unknown · Unknown
    1. Healson

      @Healson好像不明显,怎么把圆角加大?

      Unknown · Unknown
      1. S̆̈

        @Healson把代码第一行radius加大。

        Unknown · Unknown
  4. Betty

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

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

    Safari 7 · Mac OS X 10.9
    1. S̆̈

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

      Google Chrome 33 · Windows 7

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注