Question

我正在尝试使用box-shadow创建图像的内边框。我使用的是从CSS生成器复制的代码，但它对我的图像无效。如何使用此代码处理我的图像？

我只想制作顶部和底部边框。没有方面。

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

Answer 1

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

＆＃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;

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

Answer 2

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

Answer 3

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

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

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

3 个答案: