使用box-shadow为图像创建内部边框

时间:2014-12-08 17:16:46

标签: html css css3

我正在尝试使用box-shadow创建图像的内边框。我使用的是从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" />
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分:1)

您可以使用outline在图片中获取边框

&#13;
&#13;
.bannerImages  {
  outline: 1px solid red;
  outline-offset: -4px;   
}
&#13;
<img class="bannerImages" src="http://webtest-community.canoo.com/wiki/space/SnipSnap/config/webtest_tag_rgb_pos_small.jpg" />
&#13;
&#13;
&#13;

更多信息:http://caniuse.com/#search=outline

答案 1 :(得分:1)

Here's how。诀窍是将图像包装在另一个元素中,并使用绝对定位的before伪元素。

答案 2 :(得分:0)

在图像上使用插入框阴影的问题似乎是阴影渲染在图像后面。

如果您确实已经开始使用盒子阴影,那么您将需要一个具有透明背景的图像...(将您的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" />