博客园 cnblogs博客 图片显示美化 使用CSS给图片添加圆角阴影

  用了博客园一段时间了,总觉得博客园显示的图片不怎么好看,一点都没有修饰,于是无聊的去找了下CSS美化图片的代码。。。

  一开始看中了苹果官网图片的美化效果,不过它好像需要加载阴影图片,而且对图片的尺寸有要求。这样不便于以后在博客中直接美化图片,于是就放弃了阴影效果,只给加了个框。

  昨天在女朋友QQ空间看到了头像的阴影和圆角效果,觉得还不错,就直接拿过来美化了。

  使用方法:
  1.将代码添加到博客设置->通过CSS定制页面风格

 

CSS定制页面风格截图


  2.
选中要美化图片,单击编辑器上的插入/编辑 图片->外观->类别->value,输入pzxbc(可以命名为其他类名)

  代码:

/* pzxbc image css 边框 阴影 圆角 效果
------------------------
*/
img.pzxbc
{ display:block; padding:7px; border:1px solid #dedede; box-shadow: 0 1px 3px rgba(0,0,0,.3); border-radius: 4px; }

  实际效果:

美女哦









未加CSS的原始图

 

美女哦

加了CSS的效果图


posted @ 2012-02-29 21:20  pzxbc  阅读(2312)  评论(6编辑  收藏  举报