CSS伪元素：在边界之外？

Question

我有一个问题。

我想在每个图像下添加一个shadow.jpg图像，类为“.shadowed”。

所以：

.shadowed {
    border: solid 1px #fff;
    margin: 15px;
}

然后我们使用：after：

.shadow:after {
     content: url('images/shadow.png');

}

好吧它看起来不错，但阴影也会让他父母的边界，如：

1. BORDER
2. IMAGE
3. SHADOW
4. BORDER

我想要那样：

1. BORDER
2. IMAGE
3. BORDER
4. SHADOW

那么如何避免：边界继承之后？

我知道我可以把所有东西都放进并使用：可能是第一个孩子的边界，或类似的东西，但我不想，它会弄乱我的标记。

或许还有另一种简单的方法可以将图像放在图像之后（ PHP允许）。

干杯：）

Answer 1

：before和：after引用元素的内容而不是它的边框。我想你可能已经完成了包装范围的技巧。

Answer 2

这样做。这应该可以解决问题。

.shadowed {
    border: solid 1px red;
    margin: 15px;
    position:relative;
}

.shadowed:after{
   content: url('images/shadow.png');
   display: block;
   position:absolute;
   left:0px;
   height:10px;
   bottom:-10px;
   width:100%;
}