首页 » Blog » 博客相关 ✿ weblog » 浏览内容
为PJ添加图片边框
平时上传的图片,如果底色是白色,总与我PJ皮肤有出入,看不清图片的边框在哪。而且如果单一去修改图片,那每张图片都要通过PS或者其它软件去实现很麻烦。花点时间在BBS里翻了翻,相关的问题,还真不少。
按照一些PJer的修改方法,还是不能显示。后来,才发现,原来我的PJ皮肤里的layout.css文件中:
复制内容到剪贴板
程序代码
程序代码/*—内容框–*/
.Content-body img{padding:4px;border:1px solid #ccc;margin:2px;background-color: #fff;}
.Content-body img{padding:4px;border:1px solid #ccc;margin:2px;background-color: #fff;}
(有这么一段代码。先删除掉再接下来修改。)
修改一:
在global.css文件底部添加以下代码:
复制内容到剪贴板
程序代码
程序代码.Content-body img{padding:4px;border:1px solid #ccc;margin:2px;background-color: #fff;}
.Content-body img {
padding:e-xpression(width > 50 ? "4px":"0");
border:e-xpression(width > 50 ? "1px solid #ccc":"0 solid #ccc");
margin:e-xpression(width > 50 ? "2px":"0px");
.Content-body img {
padding:e-xpression(width > 50 ? "4px":"0");
border:e-xpression(width > 50 ? "1px solid #ccc":"0 solid #ccc");
margin:e-xpression(width > 50 ? "2px":"0px");
(刷新博客首页,没有实现,放弃这种修改方法)
修改二:
在global.css文件底部添加以下代码:
复制内容到剪贴板
程序代码
程序代码.Content-body img {
padding:expression(width > 160 ? "4px":"0");
border:expression(width > 160 ? "1px dashed #ccc":"0 dashed #ccc");
}
padding:expression(width > 160 ? "4px":"0");
border:expression(width > 160 ? "1px dashed #ccc":"0 dashed #ccc");
}
(刷新博客首页,OK!!看到效果了。接着初始化数据。生成日志页面的效果。完成。)
上面代码的相关说明:
上段代码是给日志中宽度大于160PX的图片自动加上padding值为4px的虚线边框(本人特别喜欢虚线),而小于160PX的图片不加。
不过也有人反映:
不能兼容主流浏览器之一的—Firefox
关于这种反映,暂时先这样吧。如果以后有更好的修改方法,再去改之吧。
(反正,我使用的Maxthon—IE核心)
现在我的博客里的图片也有了我比较喜欢的虚线边框,感觉多了一些层次感,恩~!!
贴张图来看效果吧:表情因为小于150px,所以是不会添加边框的—— 











评论 共1条 (RSS 2.0) 发表评论
虚线框确实好看。
用Firefox确实是看不到虚线,嘿。
[reply=mini,2009-06-20 00:53 AM]不知道是我对FF不感冒还是不习惯,
除了以前的QQ-TT之外,现在一直在用Maxthon.[/reply]