使用图片做边框FireFox出现背景遮挡边框的问题解决办法

        由于需要实现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显示效果如下:

    问题完美解决!

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/TT18949344290/article/details/79971266
文章标签: border-image css
个人分类: Html CSS 前端
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭