对于 safari 和 chrome，box-shadow 看起来不一样答案

【问题标题】：Box-shadow not looks same for both safari and chrome对于 safari 和 chrome，box-shadow 看起来不一样
【发布时间】：2016-04-19 21:07:38
【问题描述】：

我已经为 DIV 提供了盒子阴影效果。但是相同的代码在 safari 中看起来更暗，在 chrome 中看起来更薄。对于 chrome 浏览器，阴影不会出现在左侧和顶部。

.div_wrapper {
  box-shadow: 4px 4px 15px -6px black;
  -moz-box-shadow: 4px 4px 15px -6px black;
  -webkit-box-shadow: 4px 4px 15px -6px black;
  background: #fff;
  padding: 10px;
  width: 400px;
  height: 400px;
  margin-bottom: 10px;
}

【问题讨论】：

你的盒子阴影规则应该倒序排列。
如果您共享屏幕
您可以使用rgba()，而不是使用black。示例：rgba(0, 0, 0, 0.30)。您可以将值 0.30 更改为更高或更低的值。例如。 0.30 比 0.90 更轻。
这是盒子阴影效果的布局：在 chrome 中看起来不同。 jsfiddle.net/jayabharathi/3je7qwqg/1

标签： css shadow box-shadow

【解决方案1】：

这很正常。由于不同浏览器的表示机制不同，一些 CSS 属性的行为会有所不同。

另外，你也可以load different CSS file for different browsers。

【讨论】：