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

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

  •  11-09-2019
  •  | 
  •  

Вопрос

У меня есть 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»).

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top