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

    回复

    • S

      江苏

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

      十二年前 Unknown · Unknown

      回复

      • chojemmy

        广东

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

        十二年前 Unknown · Unknown

        回复

        • S

          江苏

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

          十二年前 Unknown · Unknown

          回复

          • chojemmy

            广东

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

            十二年前 Unknown · Unknown

            回复

            • S

              江苏

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

              十二年前 Unknown · Unknown

              回复

              • chojemmy

                浙江

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

                十二年前 Unknown · Unknown

                回复

                • S

                  江苏

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

                  十二年前 Unknown · Unknown

                  回复

  2. 勺子

    广东

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

    十二年前 Unknown · Unknown

    回复

    • S

      江苏

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

      十二年前 Unknown · Unknown

      回复

  3. Healson

    江苏

    我来试试

    十二年前 Unknown · Unknown

    回复

    • Healson

      江苏

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

      十二年前 Unknown · Unknown

      回复

      • S

        江苏

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

        十二年前 Unknown · Unknown

        回复

  4. Betty

    上海

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

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

    十一年前 Safari 7 · Mac OS X 10.9

    回复

    • S

      江苏

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

      十一年前 Google Chrome 33 · Windows 7

      回复

       

发表评论

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