本文介绍了CSS火狐盒子阴影和大纲的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在Chrome和IE浏览器中，div看起来不错，但在Firefox中却没有：
Chrome和IE：
FireFox：
CSS代码如下：
#container {
width：960px;
margin：0px;
padding：0px;
margin-left：auto;
margin-right：auto;
margin-top：-10px;
背景颜色：＃415475;
-moz-box-shadow：0 0 25px 25px rgba（0,0,0,0.2）;
-webkit-box-shadow：0 0 25px 25px rgba（0,0,0,0.2）;
box-shadow：0 0 25px 25px rgba（0,0,0,0.2）;
概述：＃000000厚实;
}
我不知道如何解决这个问题。 / p>
解决方案
为什么不使用多个box-shadow？
box-shadow：
0px 0px 0px 1px #fff，
0px 0px 0px 2px＃606054，
0px -1px 9px 1px rgba（119，119，119，0.4）;
您可以添加尽可能多的内容。
I've added both outline and box-shadow to a div in my CSS code.
The div looks great on Chrome and IE but not in Firefox:
Chrome and IE:http://i.phirune.com/csrjfyqoczob
FireFox:http://i.phirune.com/4gsrrub3ww6e
The CSS code is as follows:
#container {
width:960px;
margin:0px;
padding:0px;
margin-left:auto;
margin-right:auto;
margin-top:-10px;
background-color: #415475;
-moz-box-shadow: 0 0 25px 25px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 0 25px 25px rgba(0,0,0,0.2);
box-shadow: 0 0 25px 25px rgba(0,0,0,0.2);
outline:#000000 solid thick;
}
I have no idea how to fix this, any insight will be appreciated.
解决方案
Why not use multiple box-shadows? Just separate your box-shadows by commas.
box-shadow:
0px 0px 0px 1px #fff,
0px 0px 0px 2px #606054,
0px -1px 9px 1px rgba(119, 119, 119, 0.4);
You can add as many has your heart desires.
这篇关于CSS火狐盒子阴影和大纲的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！