Box-shadow not looks same for both safari and chrome

Question

I have given box shadow effect for a DIV. But the same code looks darker in safari and thinner in chrome. The shadow not appear in left and top for chrome browser.

.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;
}

Instead of using `black` you can use `rgba()`. Example: `rgba(0, 0, 0, 0.30)`. You can change the value `0.30` to something higher or lower. E.g. `0.30` lighter then `0.90`. — node_modules, Apr 19 '16 at 13:04
This is the layout for box shadow effect: looks different in chrome. https://jsfiddle.net/jayabharathi/3je7qwqg/1/ — Jayabharathi Lakshana, Apr 20 '16 at 06:50

score 1 · Answer 1 · answered Apr 19 '16 at 13:07

1

It's normal. Some CSS properties will behave differently due to the difference of representation mechanism of diffierent browsers.

In addition, you can also load different CSS file for different browsers.

answered Apr 19 '16 at 13:07

Box-shadow not looks same for both safari and chrome

1 Answers1