Как правильно определить стиль изображений внутри моей галереи?
Вопрос
У меня есть div с идентификатором «галерея», и я хочу стилизовать изображения внутри него.В частности, я хочу присвоить каждому изображению сплошную желтую рамку толщиной 1 пиксель, за исключением нижней части, потому что они расположены друг над другом, поэтому я не хочу удваивать границу внизу.
Что меня смущает, так это то, как выбирать между различными элементами стиля границы:граница, стиль границы, ширина границы.Я попробовал это:
div#gallery img
{
border-width:1px;
border-style:solid;
border: solid yellow;
border: 1px 1px 0px 1px;
}
Мне удалось получить желтую рамку с помощью CSS выше, но граница больше похожа на рамку толщиной 2 пикселя — она довольно толстая — и, кроме того, синтаксис, который я использую, выглядит не очень элегантно.
Любые рекомендации, как сделать это более лаконично/элегантно?
Решение
Я думаю, что это лучший способ:
border: 1px solid yellow;
border-bottom: none;
Синтаксис для border
декларация идет width style color
и затрагивает все четыре границы.После этого вы можете переопределить нижнюю часть, чтобы она не использовала границу, объявив border-bottom
как никто.
Другие советы
Я действительно не знаю, есть ли неправильный способ сделать это, но в основном у вас есть 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 по сути одинаковы, но я хотел предложить оба решения, чтобы вы могли выбрать то, что вам нравится: «нет» или «0»).