0
122
VistasHTML y CSS para el borde de la imagen de la galería
Quiero crear este tipo de galería. Tengo varias imágenes en él. Entonces, cuando paso el mouse sobre él, las imágenes deberían cambiar automáticamente. Ahora me enfrento a un problema, es decir, cómo agregar dos bordes como este usando css o cualquier otra hoja de estilo.
3 Respuestas
Responde la pregunta0
Se puede hacer con tres elementos. Un elemento es la imagen en sí, y tiene un pequeño 1px blanco de 1 px. Luego, hay dos elementos detrás de la imagen que tienen un fondo gris y también un borde blanco.
Mire este ejemplo , más o menos lo mismo, simplemente cambie el div con la image de clase por un elemento img real e invierta el posicionamiento y estará listo para comenzar.
.wrapper { position: relative; } div { width: 100px; height: 100px; background: #000; border: 1px solid #FFF; position: absolute; } .first { left: 5px; top: 5px; z-index: -1; background-color: #777; } .second { left: 10px; top: 10px; z-index: -2; background-color: #AAA; } <div class="wrapper"> <div class="first"></div> <div class="second"></div> <div class="image"></div> </div>0
Puede agregar un poco box-shadow juntos. El primero es gris. El segundo es blanco como un borde con un movimiento de un píxel que el anterior.
body{ background:#efefef; } .wrapper { position: relative; padding:10px; } .image { width: 100px; height: 100px; background: #000; border: 1px solid #FFF; position: absolute; box-shadow: 5px -5px 0 gray,6px -6px 0 white,11px -11px 0 lightgray,12px -12px 0 white; } <div class="wrapper"> <div class="image"></div> </div>0
prueba esto
<!DOCTYPE html> <html> <head> <style> body{ background-color:black; } .imageContainer{ display:inline-block; position:relative; width:100px; height:100px; top:200px; left:200px; padding:50px; background: url("https://media.cntraveller.com/photos/611bf0b8f6bd8f17556db5e4/1:1/w_2000,h_2000,c_limit/gettyimages-1146431497.jpg") no-repeat center center/cover; } .divOne{ position:absolute; border-top:3px solid grey; border-right:3px solid grey; width:100%; height:100%; top:-6px; left:6px; z-index:-1; } .divTwo{ position:absolute; border-top:3px solid grey; border-right:3px solid grey; width:100%; height:100%; top:-10px; left:10px; z-index:-1; } </style> </head> <body> <div class="imageContainer"> <div class="divOne"></div> <div class="divTwo"></div> </div> </body> </html>