Внутренняя граница над изображениями с помощью CSS?
Я хотел бы добавить белую рамку по всем моим изображениям в моем div с помощью css. Изображения в областях заголовка и нижнего колонтитула не должны быть затронуты. как мне это достичь? См. Пример изображения ниже. На веб-страницах есть изображения разных размеров.
Смотрите изображение:
![Image with inner border]()
Ответы
Ответ 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