¿Es posible establecer transparencia en CSS3 box-shadow?

96

¿Es posible establecer transparencia en la sombra del cuadro?

Este es mi codigo:

  box-shadow:10px 10px 10px #000;
  -webkit-box-shadow:10px 10px 10px #000;
  -moz-box-shadow: 10px 10px 10px #000;
css Steven
fuente

Respuestas:

187

Supongo rgba()que funcionaría aquí. Después de todo, el apoyo del navegador para ambos box-shadowy rgba()es más o menos lo mismo.

/* 50% black box shadow */
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);

div {
    width: 200px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: white;
    background-color: red;
    margin: 10px;
}

div.a {
  box-shadow: 10px 10px 10px #000;
}

div.b {
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
}
<div class="a">100% black shadow</div>
<div class="b">50% black shadow</div>
Expandir fragmento

BoltClock
fuente
3
Funcionó para mí y resolvió el enorme problema de que las sombras basadas en colores solo funcionan para un fondo determinado, por lo que debe cambiar el estilo de las mismas dependiendo de lo que estarán sobre lo que a menudo no es posible (un div que cubre tanto una foto como blanco bg, en cuyo caso la sombra se ve pálida en la parte superior de la foto)
jerclarke
@jeremyclarke Estaba experimentando el mismo problema en el que necesitaba que la sombra de un botón funcionara en varios colores de fondo sin tener que definir un color de sombra único para cada fondo. El negro transparente funciona como una verdadera sombra.
Clarus Dignus
3
rgba () no funciona para mí, si quiero cambiar Chrome'sinput:-webkit-autofill
Samuel
Siempre es Chrome, ¿no?
BoltClock
1
@Chris K .: Me temo que no podrá hacer esto por separado de la declaración original de box-shadow. Lo más cercano que puede obtener es con las variables rgba () y CSS, pero eso significa que no hay soporte para los colores con nombre, y debe aplicar las variables a la declaración box-shadow en sí. background-color tiene una limitación similar, que se describe aquí . También vea stackoverflow.com/questions/40010597/…
BoltClock