html - Chrome 和 Firefox 中相同框阴影大小的不同输出

标签 html css cross-browser

为什么 Chrome 和 Firefox 中 box-shadow 的大小不同?

box-shadow: 0 0 4px #aaa inset;

Chrome:
enter image description here

火狐:
enter image description here

我已经尝试了以下方法,但它在最新的 Firefox 中不起作用。

-moz-box-shadow: 0 0 2px #aaa inset;
-webkit-box-shadow: 0 0 4px #aaa inset;

我怎样才能拥有相同大小的跨浏览器框阴影?

最佳答案

w3schools says there are 6 values to box shadow :

box-shadow: h-shadow v-shadow blur spread color inset;

模糊和扩展是可选的,我的猜测是因为您只在颜色之前定义了三个值,所以这两种浏览器的解释不同。

我让它们看起来(至少在我看来)与 js fiddle 上的以下内容相同:

-moz-box-shadow: 0px 0px 3px 0px #aaa inset;
-webkit-box-shadow: 0px 0px 5px 0px #aaa inset;

希望对你有帮助

关于html - Chrome 和 Firefox 中相同框阴影大小的不同输出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11167516/

相关文章:

html - 单击鼠标将侧边栏滑入 View

html - 如何在页面的中间显示文字和页面左侧的图像

html - 在 css 中更改删除线文本颜色

Javascript:跨浏览器异步调度和竞争条件

javascript - 如何使用 d3js 捕获 ctrl + 单击 MacOS

html - XPath:你如何在 xpath 中进行小写调用

javascript - 我必须将数组数据打印到表中

javascript - 捕获屏幕尺寸并在 HTML/JavaScript 中创建覆盖

javascript - 从子框架访问js框架集函数

css - "fix internet explorer"样式表