通过纯html+css打造相框效果:
这是在页面上的效果
传统的做法是使用背景图片的方式进行,下面是另类方法,亲测,兼容性还是很不错的:
HTML代码:
CSS部分:
*{margin:0px;padding:0px;}
.w190{width:190px;}
.imgWrap{position:relative;margin-left:2px;margin-right:2px;z-index:90;float:right;}
.imgWrap.bg1{position:absolute;right:-3px;bottom:-3px;background-color:#E3E3E3;width:100%;height:100%;z-index:91;}
.imgWrap.bg2{position:absolute;left:-3px;top:-3px;background-color:#fff;width:100%;height:100%;border:1pxsolid#E3E3E3;z-index:92;}
.imgWrap.imgDiv{width:100%;height:100%;position:relative;z-index:98;}
.imgWrap.imgDivdiv{width:100%;height:100%;padding:10px13px13px7px;}
.imgWrap.imgDivdivimg{}
.imgWrap.info{position:relative;z-index:99;padding:10px;}
记得在html页面头上加:
htmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">