Question

我将图像作为背景，并希望获得多个内部轮廓的效果。轮廓应为纯白色2px，但位于不同位置 - 比如-4px，-8px，-12px。目标是获得超过2个轮廓。

我知道我可以制作盒子阴影和轮廓以获得双重outilne，但是注意到我无法附加到具有不同轮廓偏移的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

如何使用伪元素？在这里，我使用单个元素class，但使用:before定位伪元素，即:after和position: absolute;。

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

Answer 2

完成@ Mr.Alien演示/回答，我会使用border的伪以获得更好的兼容性。

    .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

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

2 个答案: