¿Cuál es la forma correcta de definir el estilo de las imágenes dentro de mi galería div?

StackOverflow https://stackoverflow.com/questions/1095818

  •  11-09-2019
  •  | 
  •  

Pregunta

Tengo un div con un id de 'galería' y yo quiero el estilo de las imágenes en su interior. En concreto, quiero dar a cada una de las imágenes un borde amarillo sólido 1px, excepto en la parte inferior porque se sientan en la parte superior de uno al otro, así que no quiero duplicar la frontera en la parte inferior.

Lo que estoy confundido acerca es cómo elegir entre los diferentes elementos de estilo frontera frontera, border-style, border-width. He intentado esto:

div#gallery img
{
    border-width:1px;
    border-style:solid;
    border: solid yellow;
    border: 1px 1px 0px 1px;
}

Me las arreglé para conseguir un borde amarillo con este css por encima de la frontera, pero se parece más a una frontera 2px - es bastante gruesa - y, además de eso, la sintaxis que estoy usando no se ve muy elegante.

Las recomendaciones sobre cómo hacer esto de manera más concisa / elegantemente?

¿Fue útil?

Solución

Creo que esta es la mejor manera:

border: 1px solid yellow;
border-bottom: none;

La sintaxis para la declaración border va width style color y afecta a los cuatro bordes. Después de eso, puede anular la parte inferior de nuevo a usar ninguna frontera declarando border-bottom ya que ninguno.

Otros consejos

No se sabe muy bien si hay una manera incorrecta de hacerlo, pero básicamente tiene 3 métodos para hacerlo:

Método 1

border-top: 1px solid yellow;
border-right: 1px solid yellow;
border-left: 1px solid yellow;

Método 2

border: 1px solid yellow;
border-bottom: 0;

Método 2

border: 1px solid yellow;
border-bottom: none;

yo preferiría cualquier método 2 o el método 3.

(sé el método 2 y el método 3 son básicamente los mismos, pero quería dar a ambas soluciones, para que pueda elegir lo que le gusta, "ninguno" o "0").

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top