Eu estava testando a propriedade box-shadow
para fazer uma galeria e percebi que a tag <img>
não aceita o box-shadow:inset...
porém aceita o box-shadow
normal.
No entanto se eu colocar a <img>
como background de uma div
o box-shadow:inset
funciona direitinho!
Minha dúvida seria: Como colocar o box-shadow:inset sem ter que usar a imagem como background?
Modelo simples para exemplificar
html, body {
height: 100%;
width: 100%;
margin: 20px;
}
div {
width: 200px;
height: 200px;
margin: 40px 0;
background-image: url(//www.fillmurray.com/200/200);
box-shadow: inset 0 0 10px 10px red, 0 0 5px 10px #000000;
-moz-box-shadow: inset 0 0 10px 10px red, 0 0 5px 10px #000000;
-webkit-box-shadow: inset 0 0 10px 10px red, 0 0 5px 10px #000000;
}
img.bs {
display: block;
margin: 40px 0;
box-shadow: inset 0 0 10px 10px red, 0 0 5px 10px #000000;
-moz-box-shadow: inset 0 0 10px 10px red, 0 0 5px 10px #000000;
-webkit-box-shadow: inset 0 0 10px 10px red, 0 0 5px 10px #000000;
}
img.ds {
filter: drop-shadow(0px 0px 10px red);
-webkit-filter: drop-shadow(0px 0px 10px red);
}
<div></div>
<img class="bs" src='https://i.sstatic.net/oWdCL.png' alt='' height="200"/>
<img class="ds" src='https://i.sstatic.net/oWdCL.png' alt=''/>
OBS: também tentei com a propriedade filter:drop-shadow
mas ela não tem a opção de inset