博客园 cnblogs博客 图片显示美化 使用CSS给图片添加圆角阴影
用了博客园一段时间了,总觉得博客园显示的图片不怎么好看,一点都没有修饰,于是无聊的去找了下CSS美化图片的代码。。。
一开始看中了苹果官网图片的美化效果,不过它好像需要加载阴影图片,而且对图片的尺寸有要求。这样不便于以后在博客中直接美化图片,于是就放弃了阴影效果,只给加了个框。
昨天在女朋友QQ空间看到了头像的阴影和圆角效果,觉得还不错,就直接拿过来美化了。
使用方法:
1.将代码添加到博客设置->通过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的效果图
作者: pzxbc
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。