0

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

3 respuestas 3

0

Efectivamente se aconseja usar lo siguiente:

.squares div {
  -webkit-box-shadow: inset 0 0 400px black;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow:    inset 0 0 400px black;  /* Firefox 3.5 - 3.6 */
  box-shadow:         inset 0 0 400px black;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}
0

utiliza:

  • -webkit-box-shadow (para compatibilidad con chrome y safari)
  • -moz-box-shadow (para compatibilidad con firefox)

.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;
    -webkit-box-shadow: inset 0 0 400px black;
    -moz-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;
}
<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>
</article>

0

Prueba esto a ver que tal:

.shadow{
  box-shadow:0px 4px 6px rgba(0, 0, 0, 0.45);
  -webkit-box-shadow:0px 4px 6px rgba(0, 0, 0, 0.45);
  -moz-box-shadow:0px 4px 6px rgba(0, 0, 0, 0.45);
  -ms-box-shadow:0px 4px 6px rgba(0, 0, 0, 0.45);
}
div{
  width: 200px; height:200px;text-align:center; line-height:200px;
 }
<div class="shadow">Hola mundo</div>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.