É possível incluir a sombra da caixa na área div que responde a um evento de clique?
eu tenho umdiv atuando como um botão redondo. É estilizado de forma que uma parte significativa de sua aparência geral venha de umbox-shadow:
<body style="background:black">
<div id="button" style="width: 50px; height: 50px; background: yellow; border: none; border-radius: 50px; box-shadow: 0 0 0 5px #c03, 0 0 2px 7px #fff"></div>
</body>Eu tenho um ouvinte de evento de clique anexado ao botãodiv. Infelizmente, ele não responde se odiv é clicado nobox-shadow Enquanto obox-shadow é renderizado fora dodiv.
Isso é particularmente um problema em dispositivos de toque, onde o dedo às vezes não atinge o centro dodiv. (Obviamente, ele responde normalmente se o clique estiver na área de 50px da div.)
É possível fazer o ouvinte de evento responder a cliques nobox-shadow bem como o realdiv?
Sei que posso usar uma div transparente maior e separada por cima do botão e anexar o ouvinte de eventos a isso, mas é uma solução alternativa necessária?
(O botãodiv deve ser estilizado combox-shadow. Não posso usar oborder propriedade ou aumentopadding.)