css - elementor wordpress español
Tiene un problema con el recuadro de sombra de la caja (2)
Estoy usando la sombra de caja para crear una sombra interior ...
box-shadow: inset 0 0 10px #000000;
-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
... pero me gustaría que la sombra interna entre solo desde abajo. He intentado varias formas de intentar hacer que esto funcione, pero no puedo ... ¿Cómo haría esto con la sombra de caja?
Use un valor negativo para la cuarta longitud que define la distancia de dispersión. Esto a menudo se pasa por alto, pero es compatible con todos los principales navegadores. Ver este Fiddle para el resultado.
div{
background:red;
height:100px;
width:200px;
-moz-box-shadow: inset 0 -10px 10px -10px #000000;
-webkit-box-shadow: inset 0 -10px 10px -10px #000000;
box-shadow: inset 0 -10px 10px -10px #000000;
}
<!doctype html>
<div></div>
En la parte superior solamente:
-moz-box-shadow: inset 0 10px 10px -10px grey;
-webkit-box-shadow: inset 0 10px 10px -10px grey;
box-shadow: inset 0 10px 10px -10px grey;
En la parte inferior solamente:
-moz-box-shadow: inset 0 -10px 10px -10px grey;
-webkit-box-shadow: inset 0 -10px 10px -10px grey;
box-shadow: inset 0 -10px 10px -10px grey;
En la parte superior e inferior solamente:
-moz-box-shadow: inset 0 10px 10px -10px grey,
inset 0 -10px 10px -10px grey;
-webkit-box-shadow: inset 0 10px 10px -10px grey,
inset 0 -10px 10px -10px grey;
box-shadow: inset 0 10px 10px -10px grey,
inset 0 -10px 10px -10px grey;
Ejemplo rápido
.shadow-top {
-moz-box-shadow: inset 0 10px 10px -10px grey;
-webkit-box-shadow: inset 0 10px 10px -10px grey;
box-shadow: inset 0 10px 10px -10px grey;
}
.shadow-bottom {
-moz-box-shadow: inset 0 -10px 10px -10px grey;
-webkit-box-shadow: inset 0 -10px 10px -10px grey;
box-shadow: inset 0 -10px 10px -10px grey;
}
.shadow-top-bottom {
-moz-box-shadow: inset 0 10px 10px -10px grey,
inset 0 -10px 10px -10px grey;
-webkit-box-shadow: inset 0 10px 10px -10px grey,
inset 0 -10px 10px -10px grey;
box-shadow: inset 0 10px 10px -10px grey,
inset 0 -10px 10px -10px grey;
}
div { display:inline-block; margin-right:15px; width:150px; height:100px; background:yellow; }
<div class=''shadow-top''></div>
<div class=''shadow-bottom''></div>
<div class=''shadow-top-bottom''></div>