É possível definir a transparência no box-shadow CSS3?

Suponho rgba()que funcionaria aqui. Afinal, o suporte ao navegador para ambos box-shadowe rgba()é praticamente o mesmo.

/* 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 trecho

BoltClock
fonte

Funcionou para mim e resolveu o enorme problema de que as sombras baseadas em cores só funcionam para um determinado fundo, então você precisa reformulá-las dependendo do que elas estarão sobre o que muitas vezes não é possível (um div que cobre uma foto e o branco bg, caso em que a sombra parece pálida no topo da foto)

jerclarke

@jeremyclarke Eu estava tendo o mesmo problema em que precisava da sombra de um botão para trabalhar em várias cores de fundo sem ter que definir uma cor de sombra exclusiva para cada fundo. O preto transparente funciona como uma sombra verdadeira.

Clarus Dignus

rgba () não funciona para mim, se eu quiser mudar o cromoinput:-webkit-autofill

Samuel

É sempre o Chrome, não é?

BoltClock

@Chris K .: Receio que você não seja capaz de fazer isso separadamente da declaração original da sombra da caixa. O mais próximo que você pode obter é com as variáveis rgba () e CSS, mas isso significa que não há suporte para cores nomeadas e você tem que aplicar as variáveis à própria declaração de sombra da caixa. background-color tem uma limitação semelhante, abordada aqui . Consulte também stackoverflow.com/questions/40010597/…

BoltClock

É possível definir a transparência no box-shadow CSS3?

Respostas: