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

标签: border-image css
13人阅读 评论(0) 收藏 举报
分类:
        由于需要实现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显示效果如下:

    问题完美解决!

查看评论

android 使用shape做有边框背景的方法搜集整理

方法 1 xmlns:android="http://schemas.android.com/apk/res/android"> android:col...
  • kufeiyun
  • kufeiyun
  • 2015-05-07 17:17:48
  • 3065

[CSS] Firefox required input textarea 粉红色边框去除方案

[CSS] Firefox required input textarea 粉红色边框去除方案
  • qq_40963664
  • qq_40963664
  • 2017-11-22 09:49:51
  • 214

<img>设置background有白色边框

因为没有给img标签这是src,所以浏览器当做没有图片处理,给加上了白色边框,解决方法有两个: 1.添加一个空白图; 2.不用img标签,用span、div等等...
  • u010552788
  • u010552788
  • 2016-03-26 10:56:35
  • 993

点击链接元素出现蓝色边框或者出现半透明蓝色背景

如上图  解决办法: a{outline: none;} 当上面没有效果的时候,可以试试 * { -webkit-tap-highlight-color: transparen...
  • qianqianyixiao1
  • qianqianyixiao1
  • 2015-07-29 17:05:51
  • 1577

css3用图片作边框

css3用图片作边框使用 border-image属性, 兼容写法:   -webkit-border-image:url(img/border.png)   30px  30px  30px...
  • xuanwuziyou
  • xuanwuziyou
  • 2015-08-27 19:07:45
  • 907

图片在IE8中出现边框的解决办法

图片在IE8中出现边框的解决办法
  • GreyBearChao
  • GreyBearChao
  • 2017-07-06 13:17:25
  • 630

【android开发笔记】如何让ImageButton去掉白色边框和让ImageButton具有点击效果

这是我从网上学来的,怕忘记,遂写
  • xueshanghon_L
  • xueshanghon_L
  • 2014-07-06 19:43:33
  • 1669

边框和background-背景设置

表格边框合并border-collapseborder-collapse是表格独有的属性 separate 默认值,边框分开,不合并 collapse 边框合并,如果相邻,则共用一个边框 ...
  • ThReE_To
  • ThReE_To
  • 2015-09-18 02:25:26
  • 694

fieldset背景溢出BUG的解决

分析:IE让fieldset溢出,并不是没有道理,fieldset是块级元素,IE将它与div等相同处理,fieldset包含legend,既然要讲背景延伸到legend下面。 解决方法一:既然fie...
  • u012316120
  • u012316120
  • 2015-07-16 11:24:14
  • 1014

清除浏览器默认表单边框/背景特效和下拉菜单背景

大家应该都留意到类似谷歌和火狐浏览器中都会有自己默认的样式设置,比如谷歌浏览器所有的表单都会添加黄色边框特效。当网站本身就已经对于表单样式有一定的设计时,这种默认表单样式就会让人觉得多余了!这里我们介...
  • benben1164
  • benben1164
  • 2015-12-18 11:15:06
  • 1884
    个人资料
    等级:
    访问量: 3322
    积分: 126
    排名: 119万+
    文章存档
    最新评论