html – Firefox:border-color,border-radius和background colo
发布时间:2020-12-14 16:38:08 所属栏目:资源 来源:网络整理
导读:看看下面的 HTML和CSS. .box { border-radius: 15px; border: #333 solid 3px; background: #333;} div class="box"Hello world/div 它在Firefox中生成: 正如您所看到的,div的边框和背景留下了一个可见的小间隙.我需要边框,因为悬停状态具有不同的背景颜色.
看看下面的
HTML和CSS.
.box { border-radius: 15px; border: #333 solid 3px; background: #333; } <div class="box">Hello world</div> 它在Firefox中生成: 正如您所看到的,div的边框和背景留下了一个可见的小间隙.我需要边框,因为悬停状态具有不同的背景颜色. 我怎么能克服这个? 解决方法
这很可能是Firefox中的一个错误.你可以做一个简单的技巧来解决这个问题:(这不是最好的解决方案,我知道,但问题似乎很严重)
标记:通过’包装’div的假边框 <div class="wrapper"> <div class="box">Hello world</div> </div> css:padding可以解决问题 .wrapper { border-radius: 15px; background: #333; padding:3px; /*simulating border*/ } .box { border-radius: 15px; background: #333; } http://jsfiddle.net/steweb/peYRf/ 或者更优雅的方式解决问题(不添加另一个div)可以在相同背景颜色的框上添加阴影来“填充”那些白色可怕的东西,即 .box { border:3px solid #333; border-radius: 15px; background: #333; -moz-box-shadow:0px 0px 1px #333; /* just on ffox */ } http://jsfiddle.net/steweb/Sy2rr/ (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |