Внутренняя граница над изображениями с помощью CSS?

Я хотел бы добавить белую рамку по всем моим изображениям в моем div с помощью css. Изображения в областях заголовка и нижнего колонтитула не должны быть затронуты. как мне это достичь? См. Пример изображения ниже. На веб-страницах есть изображения разных размеров.

Смотрите изображение:

Ответ 1

Вы можете сделать это без дополнительного элемента или псевдоэлемента:

http://cssdeck.com/labs/t6nd0h9p

img {
  outline: 1px solid white;
  outline-offset: -4px;
}

IE9 и 10 не поддерживают свойство outline-offset, но в остальном поддержка хорошая: http://caniuse.com/#search=outline

Альтернативное решение, которое не требует знания размеров изображения:

http://cssdeck.com/labs/aajakwnl

<div class="ie-container"><img src="http://placekitten.com/200/200" /></div>

div.ie-container {
  display: inline-block;
  position: relative;
}

div.ie-container:before {
  display: block;
  content: '';
  position: absolute;
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  border: 1px solid white;
}

img {
  vertical-align: middle; /* optional */
}

Ответ 2

Вы можете попробовать следующее:

Html:

<div class="image">
  <div class="innerdiv">

  </div>
</div>

Css:

.image
{
  width: 325px;
  height: 239px;
  background:url(http://www.modernvice.com/files/images/backgrounds/_Zoom/black-pony.jpg) 0 0 no-repeat;
  padding: 10px;
}

.innerdiv
{
  border: 1px solid white;
  height:100%;
  width: 100%;
}

jsFiddle

Надеюсь, это вы имели в виду:)

Ответ 3

Независимо от идентификатора или класса div вы можете просто добавить

#yourDivIDExample {
...
}

#yourDivIDExample img{
border:1px solid #ffffff;
}

Это создаст границу вокруг изображений в самом div. То же самое работает и для классов или глобального правила.

img {
border:1px solid #ffffff;
}

Ответ 4

Вы можете сделать что-то вроде этого DEMO

HTML

<div class="imgborder">
   <div class="in-imgborder">

    </div>
</div>

CSS

.imgborder {
    width: 300px;
    height: 300px;
    position: relative;
    background: url(http://placekitten.com/300/300) no-repeat;
}
.in-imgborder {
    width: 290px;
    height: 290px;
    position: absolute;
    top: 4px;
    left: 4px;
    border: 1px solid red;
}

Ответ 5

Я решил это с помощью box-shadow: inset, и работает с IE11 и выше. Мне нужна граница в углах вокруг изображения, но в этих примерах есть рамка 10px. Для этого требуется родительский элемент div с элементом :before или :after, но он очень хорошо его обрабатывает.

.image {
    width: 100%;
    height: auto;
}

.image__wrapper {
    position: relative;
}

.image__wrapper:before {
  content: '';
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 10px;
  right: 10px;
  box-shadow: inset 0 0 0 3px red;
}

Демо-версия CodePen