La sombra de los div se visualiza de distinta forma en safari y en chrome.
¿Me falta algún tipo de prefijo?
Le he dado muchas vueltas y no encuentro la solución para que la sombra también se visualice en los demás navegadores.
HTML:
<article class="squares">
<h3>Some works that I´ve developed</h3>
<div><a href="#">Selectors & Hierarchy</a></div>
<div><a href="#">Measures & Colors</a></div>
<div><a href="#">Box models & Display</a></div>
<div><a href="#">Selectors & Hierarchy</a></div>
<div><a href="#">Selectors & Hierarchy</a></div>
<div><a href="#">Selectors & Hierarchy</a></div>
....
CCS:
.squares div{
height: 220px;
width: 100%;
background: white;
text-align: center;
vertical-align: bottom;
background-size: 100% !important;
box-shadow: inset 0 0 400px black;
border-bottom: 5px solid white;
margin: 0;
padding:0;
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: center;
}
Aqui está la web por si queréis ver el resultado
Agradezco cualquier ayuda!
Edit: he añadido los prefijos -moz y -webkit y el error persiste