首页 » Wordpress » WordPress技巧:为正文内图片添加边框和阴影效果

WordPress技巧:为正文内图片添加边框和阴影效果

25334 20

最近一直看本站的文章内容排版觉得有些问题,经zoe指导,将原先的字体调整为雅黑,原先的应该是个国外的字体。然后又加大了每一行之间的行距,稍微好看了些,不过对于文章内的图片还是觉得有点问题,又不说不清在哪,拿上一篇文章来说,调整前效果图如下所示:

noborder
可以看到为了区分文章和图片,之间我用了换行,但是由于图片里带有大量文字,很多时候,视觉上会产生错乱,不好分辨。虽然我加上了图片描述后,效果好些,但还不尽人意,如下图:
带描述noborder
于是我去查看各位的博客,发现有的人的站点内文章中的图片显示并未有此视觉上的问题,琢磨一下不同之处,发现原来在于有个边框,于是我也自己给自己的站点正文图片加上了边框和阴影效果,这下解决了困恼我很久的问题。其实我就是个设计盲。

这个是不带图片描述的,感觉已经不会和正文发生视觉错乱了。
带border
下图是带图片描述的,个人感觉加了边框之后明显有助于阅读,带不带描述已经无所谓了。
带描述border
[flatbtn type = fieldblue]代码实现:[/flatbtn]
在CSS样式里找到.enter a img,添加以下相关代码即可。

.entry a img {
border: 1px;
border-style: solid;
webkit-box-shadow: 2px 2px 2px 0px green;
-moz-box-shadow: 2px 2px 2px 0px green;
box-shadow: 2px 2px 2px 0px green;
}
文章评分7次,平均分4.0

本文原始地址:https://www.tiandiyoyo.com/2013/05/add-border-to-image/
本站所有文章,除了特别注明外,均为本站原创,转载请注明出处来自www.tiandiyoyo.com

您可能还会对以下文章感兴趣:

评论前先开启评论开关:


20 Comments

  1. Rilun :

    太绿了 呵呵 我还是喜欢浅浅的灰色

  2. yxiao :

    网站整个个布局,排版有些混乱。

    • tiandi :

      指点一下,这个主题2年前的,用到现在了,排版个人也觉得一直有问题,字太小?我自己说不上来。

  3. 南寻 :

    图片在新窗口中打开比较好的吧,点击图片后还要后退才能看文章,,

    • tiandi :

      收到,一会改。之后有想法的话,我想用lightbox效果代替一下,就没有后退之类的烦恼了。

  4. 只有html5的浏览器才支持

  5. 刘柳 :

    这个和图片有关?

  6. 我就觉得WORDPRESS对文字编辑没有多大功能。嘿嘿。感觉要是像office一样就更强大了。你这个图片好像变宽了,都覆盖到旁边 的东西了。

  7. 学习了!!!!

  8. 貌似图片过大,撑破表格了啊

  9. 没有这个啥排名的路过。

  10. 不错的技巧,可以提高用户体验,一会就去试试

载入分页评论...