具有负轮廓偏移的 CSS 多个轮廓

Question

我以图像为背景，想要获得多个内部轮廓的效果。 轮廓应该是纯白色 2px，但位置不同 - 例如 -4px、-8px、-12px。 目标是获得超过 2 个轮廓。

我知道我可以制作 box-shadow 和 outline 以获得双重轮廓，但注意到我无法附加到具有不同轮廓偏移量的 div 3 个类 - div 只应用了类的最后一个。

我的代码：

<div class="imgfield effect1 effect2 effect3"> </div>

和示例 css：

.imgfield { background: url(someimage.jpg); ... width, height etc. }
.effect1 { outline: yellow 2px solid; outline-offset: -4px; }
.effect2 { outline: red 2px solid; outline-offset: -8px; }
.effect3 { outline: blue 2px solid; outline-offset: -12px; }

在这个例子中，只有蓝色的内部轮廓，但现在是红色和黄色。如何解决这个问题？

-----------编辑------

所有答案都很好。我必须承认我尝试处理after 和before，但我对它还不够熟悉。 Box-sizing: border-box 也很重要。

Answer 1

为了完成@Mr.Alien demo/answer，我会使用边框的伪以获得更好的兼容性。

    .effect {
        height: 200px;
        width: 200px;
        outline: 1px solid #000;
        position:relative;/* pick as reference for pseudo absolute */
        -moz-box-sizing:border-box; /* keep box within size given */
        box-sizing:border-box;
    }
/* size pseudo within from coordonates */
    .effect:before {
        content:"";
        top:2px;
        left:2px;
        right:2px;
        bottom:2px;
        border: green 2px solid;
        position: absolute;
    }
    .effect:after {
        content:"";
        top:6px;
        left:6px;
        right:6px;
        bottom:6px;
        border: red 2px solid;
        position: absolute;
    }

DEMO

Answer 2

为此使用伪元素怎么样？在这里，我使用带有单个元素的单个 class，但我使用 position: absolute; 定位伪元素，即 :before 和 :after。

Demo

如果您对元素重叠有任何问题，您当然可以使用z-index。

.effect {
    height: 200px;
    width: 200px;
    outline: 1px solid #000;
}

.effect:before {
    content: "";
    height: 200px;
    width: 200px;
    outline: green 2px solid; 
    outline-offset: -4px;
    display: block;
    position: absolute;
}

.effect:after {
    content: "";
    display: block;
    height: 200px;
    width: 200px;
    outline: red 2px solid; 
    outline-offset: -8px;
    position: absolute;
}