Qual é o caminho certo para definir o estilo das imagens dentro da minha galeria div?

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

  •  11-09-2019
  •  | 
  •  

Pergunta

Eu tenho uma div com um id 'galeria' e eu quero estilo as imagens dentro dela. Especificamente, eu quero dar cada uma das imagens uma borda amarela 1px solid exceto no fundo porque eles se sentam em cima uns dos outros, então eu não quero dobrar a fronteira na parte inferior.

O que eu estou confuso sobre é como escolher entre os diferentes elementos de estilo fronteira: beira, border-style, border-width. Eu tentei isso:

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

Eu consegui obter uma borda amarela com este css acima, mas a fronteira parece mais uma fronteira 2px - é muito grosso - e, além disso, a sintaxe que estou usando não parece muito elegante.

Qualquer recomendações sobre como fazer isso de forma mais concisa / elegantemente?

Foi útil?

Solução

Eu acho que essa é a melhor maneira:

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

A sintaxe para a declaração border vai width style color e afeta todas as quatro bordas. Depois disso, você pode substituir a parte de trás inferior ao uso de nenhuma borda declarando border-bottom como nenhum.

Outras dicas

Eu realmente não sei se há uma maneira errada de fazê-lo, mas você tem basicamente 3 métodos para fazê-lo:

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;

Eu preferiria qualquer método 2 ou o método 3.

(eu sei o método 2 e método 3 são basicamente o mesmo, mas eu queria dar a ambas as soluções, assim você pode escolher o que você gosta, "none" ou "0").

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top