博客园 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的效果图



免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM