Каков правильный способ определения стиля изображений внутри моей галереи div?

Question

У меня есть div с идентификатором 'gallery', и я хочу стилизовать изображения внутри него. В частности, я хочу дать каждому из изображений 1px сплошную желтую границу, кроме нижней, потому что они сидят друг над другом, поэтому я не хочу удвоить границу внизу.

То, что я смущен, заключается в том, как выбирать между различными элементами стиля границы: border, border-style, border-width. Я попытался это:

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

мне удалось получить желтую границу с этим выше CSS, но граница больше похоже на границе 2px - это довольно толстый - и, кроме того, синтаксис я использую не выглядят очень элегантно.

Любые рекомендации о том, как сделать это более сжато/элегантно?

Answer 1

Я думаю, что это лучший способ:

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

Синтаксис border декларации идет width style color и затрагивает все четыре границы. После этого вы можете переопределить нижнюю часть назад, не используя границу, объявив border-bottom ни как.

Answer 2

Я действительно не знаю, если есть неправильный способ сделать это, но вы в основном есть 3 способа сделать это:

Метод 1

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

Метод 2

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

Способ 2

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

Я предпочел бы либо метод 2 или 3. Метод

(я знаю способ 2 и способ 3, в основном то же самое, но я хотел бы дать оба решения, так что вы можете выбрать то, что вам нравится, «none» или «0»).