给博客图片加上圆角

2013/03/17

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

WordPress^[122]图片^[2]圆角^[1]

共有 15 条评论

chojemmy
广东
说道：

2013年3月17日 16:46:48

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

回复
1. S
  江苏
  说道：
  
  2013年3月17日 17:05:51
  
  @chojemmy应该可以，但是不是太繁琐了，每张都要加style属性。
  
  回复
  1. chojemmy
    广东
    说道：
    
    2013年3月17日 21:16:52
    
    @S折腾了好久，发现不行。因为不支持css啊…
    
    回复
    1. S
      江苏
      说道：
      
      2013年3月17日 22:04:38
      
      @chojemmy我觉得你还是迁徙到自建站吧，别在墙外折腾了……我们留个言也特费劲。国内或国外主机都不贵的。
      
      回复
      1. chojemmy
        广东
        说道：
        
        2013年3月17日 22:22:49
        
        @S说得极是，就怕到时候我技术折腾文会发个不停啊
        
        回复
        
        S
        江苏
        说道：
        
        2013年3月17日 22:31:23
        
        @chojemmy那又没什么，我不是也在发吗？你还是去弄一个吧。我有几次在你那里灌水，不行。在墙内留言无能，跟瘙痒搔不到一样。你懂的。
        
        回复
        
        chojemmy
        浙江
        说道：
        
        2013年3月17日 23:01:57
        
        @S嘻嘻，先看着哈。给wordpress交的钱还没到期呢，不能铺张浪费。
        
        回复
        
        S
        江苏
        说道：
        
        2013年3月18日 00:12:18
        
        @chojemmy我以前也用过worspress的服务器，后来没到期就转了。读者和自己用的舒服才最重要啊！
        
        回复
勺子
广东
说道：

2013年3月18日 11:07:39

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

回复
1. S
  江苏
  说道：
  
  2013年3月18日 19:53:47
  
  @勺子先这样吧。回头心情变化了再换。
  
  回复
Healson
江苏
说道：

2013年3月18日 13:41:05

我来试试

回复
1. Healson
  江苏
  说道：
  
  2013年3月18日 13:47:40
  
  @Healson好像不明显，怎么把圆角加大？
  
  回复
  1. S
    江苏
    说道：
    
    2013年3月18日 19:54:15
    
    @Healson把代码第一行radius加大。
    
    回复
Betty
上海
说道：

2014年4月10日 00:02:47

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

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

回复
1. S
  江苏
  说道：
  
  2014年4月10日 22:56:51
  
  @Betty嗯要是想要直接在图上做出圆角效果有不少软件比如美图秀秀或者windows live writer。不过这个CSS代码的确很简单又好用，推荐。
  
  回复

竹炉山房

给博客图片加上圆角

共有 15 条评论

回复 S 取消回复

共有 15 条评论

回复 S 取消回复

相关文章