由于需要实现div特殊的边框，利用切图拼凑比较麻烦，因此想到用整张图片做边框，这样方便快速。但是在实际实现中发现，在不同的浏览器下，边框的效果不同，详细介绍如下：
1.边框背景如下：
2.初始实现代码：
.dev-item{
height: 799px;
width: 804px;
margin-left: 52px;
margin-top: 52px;
float: left;
border: 41px solid transparent;
-moz-border-image:url("../image/border-dev-green-1.png") 41 41 stretch; /* Old Firefox */
-webkit-border-image:url("../image/border-dev-green-1.png") 41 41 stretch; /* Safari */
-o-border-image:url("../image/border-dev-green-1.png") 41 41 stretch; /* Opera */
-o-border-image:url("../image/border-dev-green-1.png") 41 41 stretch; /* Opera */
border-image:url("../image/border-dev-green-1.png") 41 41 stretch; /* Opera */
}
3.在chrome浏览器显示效果如下：
4.在Firefox下显示效果如下：
5.出现问题
出现头部被白底遮住的情况，解决如下：
修改代码
.dev-item{
height: 799px;
width: 804px;
margin-left: 52px;
margin-top: 52px;
float: left;
border: 41px solid transparent;
-moz-border-image:url("../image/border-dev-green-1.png") 41 41 fill stretch; /* Old Firefox */
-webkit-border-image:url("../image/border-dev-green-1.png") 41 41 fill stretch; /* Safari */
-o-border-image:url("../image/border-dev-green-1.png") 41 41 fill stretch; /* Opera */
-o-border-image:url("../image/border-dev-green-1.png") 41 41 fill stretch; /* Opera */
border-image:url("../image/border-dev-green-1.png") 41 41 fill stretch; /* Opera */
}
6.修改后效果
加上fill后，打开Firefox显示效果如下：
问题完美解决！