0
218
VistasColumnas CSS: box-shadow se muestra defectuoso en Google Chrome (diseño de mampostería)
Quiero crear un diseño de mampostería con columnas CSS. Cada elemento tiene una sombra de cuadro y una altura aleatoria (en el siguiente CodePen simulé esto con alturas exactas).
Y ahí está el problema: las sombras de los cuadros se agregan a la columna incorrecta si los elementos usan diferentes alturas. ¿Incluso diría que este es un problema de renderizado en Google Chrome?
¿Tiene alguna idea de cómo resolver este problema en el contexto de la idea de tener un diseño de mampostería?
https://codepen.io/malte94/pen/yLomKJe
.box { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); min-height: 200px; margin: 10px; } .columns { display: block; column-count: 3; page-break-inside: avoid; break-inside: avoid; overflow: hidden; } .columns * { display: block; max-width: 100%; page-break-inside: avoid; break-inside: avoid; overflow: hidden; margin: 10px; } <div class="columns"> <div class="box" style="height: 200px;"> Hey there! </div> <div class="box" style="height: 400px;"> Hey there! </div> <div class="box" style="height: 500px;"> Hey there! I'm broken </div> <div class="box" style="height: 100px;"> Hey there! </div> <div class="box" style="height: 50px;"> Hey there! </div> <div class="box" style="height: 250px;"> Hey there! </div> </div>
·
Juan Pablo Isaza
Responde la pregunta