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

Question

Я пытаюсь выяснить, css отображает изображение с черной рамкой 1px, а затем белой рамкой 9px. Есть ли простой способ сделать это?

Ответ div вокруг изображения почти работает, но у меня все еще есть большие промежутки по обе стороны от моего изображения (за пределами границы 1px и внутри границы 9px) Похоже, тег div по какой-то причине растягивается, чтобы уместиться на все окно.

В итоге я использовал отступы / рамку в стиле img.

Answer 1

На img установите черный фон и добавьте 1px отступа, тогда граница может быть 9px белого цвета.

img { цвет фона: # 000; обивка: 1px; рамка: 9px solid #fff; }

Это даст двойную рамку, если у вас нет прозрачных изображений.

Answer 2

Вы не можете назначить несколько границ с чистым CSS, вам придется поместить div вокруг него. Div, потому что это уровень блока.

Что-то вроде

<div class="img-border"><img class="img" src="..." /></div>

и CSS будет:

.img{
  border: solid 1px black;
}

.img-border{
  border: solid 9px white;
}

Используя классы, вам не нужно повторно вводить встроенный CSS для каждого изображения. Это то, что я придумал за 30 секунд. Надеюсь, это поможет.

Answer 3

<div style="border: 9px solid white;">
    <img src="foo.png" style="border: 1px solid black;"/>
</div>