CSS boxshadow在图像上

Question

我想在图片上放置boxshadow。我正在尝试跟随，但它只是将它添加到图像后面，使其不可见。怎么做？

CSS和HTML：

    .box2 {
        float: left;
        height: 150px;
        width: 150px;
        box-shadow: inset 0px 0px 0px 10px #f00;
    }

 <div class="box2"><img src="https://farm1.staticflickr.com/502/18386328915_c63c4f6c7f_q.jpg" /></div>

问题：

JSFiddle演示： http://jsfiddle.net/Lwm95h7q/

Answer 1

例如，您可以使用:after执行此操作。

.box1{
    height: 150px;
    width: 150px;
    background: green;
    box-shadow:inset 0px 0px 0px 10px #f00;
    float: left;
    margin-right: 50px;
}

.box2 {
    position: relative;
    float: left;
    height: 150px;
    width: 150px;
    box-shadow: inset 0px 0px 0px 10px #f00;
}

.box2:after {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: '';
    box-shadow: inset 0px 0px 0px 10px #f00;
    z-index: 1;
}

看看小提琴： http://jsfiddle.net/skeurentjes/Lwm95h7q/5/

Answer 2

只需将box-shadow替换为 outline: 10px solid #f00;outline-offset:-10px;

.box1{
    height: 150px;
    width: 150px;
    background: green;
    box-shadow:inset 0px 0px 0px 10px #f00;
    float: left;
    margin-right: 50px;
}

.box2 {
    float: left;
    height: 150px;
    width: 150px;
   outline: 10px solid #f00;
   outline-offset:-10px;
   
}

<div class="box1">some text</div>

<div class="box2"><img src="https://farm1.staticflickr.com/502/18386328915_c63c4f6c7f_q.jpg" /></div>

Answer 3

这可以通过在:after顶部box-shadow上使用img伪元素来实现：

• 将position: relative;添加到.box2以允许伪元素相对于它定位
• 使用.box2:after添加position: absolute;以将其从文档流中取出。设置height和width等于height的{​​{1}}和width，并将其定位到.box2和top left。将.box2应用于此

＆＃13;

＆＃13;

box-shadow

＆＃13;

.box1 {
  background: green;
  box-shadow: inset 0px 0px 0px 10px #f00;
  float: left;
  height: 150px;
  margin-right: 50px;
  width: 150px;
}
.box2 {
  float: left;
  height: 150px;
  position: relative;
  width: 150px;
}
.box2:after {
  box-shadow: inset 0px 0px 0px 10px #f00;
  content: "";
  height: 150px;
  left: 0;
  position: absolute;
  top: 0;
  width: 150px;
}

＆＃13;

＆＃13;

＆＃13;

Answer 4

你没有给出填充所以..添加这个css

  .box2 {
float: left;
height: 150px;
width: 150px;
box-shadow: inset 10px 10px 10px 10px  #f00;
 padding: 10px;
    }