html页面校园美景相框,纯CSS+HTML打造图片相框背景

通过纯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:1px solid #E3E3E3;z-index:92;}

.imgWrap .imgDiv{width:100%;height:100%;position:relative;z-index:98;}

.imgWrap .imgDiv div{width:100%;height:100%;padding:10px 13px 13px 7px;}

.imgWrap .imgDiv div img{}

.imgWrap .info{position:relative;z-index:99;padding:10px;}

记得在html页面头上加：

html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">