Использование теней для создания внутренней границы для изображения

Я пытаюсь создать внутреннюю границу с изображением, используя тень окна. Я использую код, который я скопировал из генератора CSS, и он не работает на моем изображении. Как я могу заставить этот код работать с моим изображением?Использование теней для создания внутренней границы для изображения

Я пытаюсь сделать только верхнюю и нижнюю границу. Нет сторон.

http://codepen.io/trevoray/pen/NPxyzG

.bannerImages { 
 
    -webkit-box-shadow: inset 0px -17px 0px 0px rgba(0, 0, 0, 1); 
 
    -moz-box-shadow: inset 0px -17px 0px 0px rgba(0, 0, 0, 1); 
 
    box-shadow: inset 0px -17px 0px 0px rgba(0, 0, 0, 1); 
 
}

<img class="bannerImages" src="http://webtest-community.canoo.com/wiki/space/SnipSnap/config/webtest_tag_rgb_pos_small.jpg" />

источник

2014-12-08 trevoray

Почему нет границы пользователя: 1px solid # 000' и 'box-sizing: border-box'? – somethinghere

See- http://designbystevie.com/2011/03/applying-css3-inset-box-shadows-to-images/ –

Paulie_D, я пытаюсь создать только верхнюю и нижнюю границу. – trevoray

Here's how. Трюк состоит в том, чтобы обернуть ваше изображение в другом элементе и использовать абсолютно позиционированный псевдоэлемент before.

источник

2014-12-08 17:53:14

Farhan, это близко, но я также собираюсь добавить верхнюю границу той же ширины. Как мне это сделать с вашим решением? – trevoray

изменить «box-shadow» на «box-shadow: inset 0px -3px 0px 0px rgba (0,0,0,1), вставка 0px 3px 0px 0px rgba (0,0,0,1); –

[ссылка] (http://codepen.io/farhan687/pen/xbZYQj) просто играйте с тенью коробок перед классом imgContainer. проверьте мою ссылку, чтобы получить лучшую идею. –

Вы можете использовать outline получить границу внутри изображения

.bannerImages { 
 
    outline: 1px solid red; 
 
    outline-offset: -4px; 
 
}

<img class="bannerImages" src="http://webtest-community.canoo.com/wiki/space/SnipSnap/config/webtest_tag_rgb_pos_small.jpg" />

Дополнительная информация: http://caniuse.com/#search=outline

источник

2014-12-08 17:30:03

Я не могу использовать контур, потому что хочу верхнюю и нижнюю границу. Не вся граница. – trevoray

Проблема с использованием тени вставки на изображении, похоже, заключается в том, что тень отображается за изображением.

Если вы действительно сердце набор на использовании бокс-тень, то вам нужно изображение с прозрачным фоном ... (Преобразование JPG в PNG и удалить фон)

.bannerImages { 
 
    -webkit-box-shadow: inset 0px 7px 10px -4px #000 inset, 0px -7px 10px -4px #000 inset; 
 
    -moz-box-shadow: inset 0px 7px 10px -4px #000 inset, 0px -7px 10px -4px #000 inset; 
 
    box-shadow: 0px 7px 10px -4px #000 inset, 0px -7px 10px -4px #000 inset; 
 
}

<img class="bannerImages" src="http://i.stack.imgur.com/rCgfw.png" />

источник

2014-12-08 19:31:48 apaul

Использование теней для создания внутренней границы для изображения

ответ

Смежные вопросы