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">