html - 具有负轮廓偏移的 CSS 多轮廓

Question

我以图片为背景，想得到多个内轮廓的效果。 轮廓应该是纯白色 2px，但在不同的位置——比如 -4px、-8px、-12px。 目标是获得 2 个以上的轮廓。

我知道我可以制作 box-shadow 和 outline 以获得双轮廓，但注意到我无法附加到具有不同 outline-offset 的 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 ，我会使用 border's pseudo 以获得更好的兼容性。

    .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