负轮廓偏移的CSS多个轮廓

hl0ma9xz 于 2023-05-02 发布在其他

关注(0)|答案(3)|浏览(96)

我得到的图像作为背景，并希望得到的效果，多个内部轮廓.轮廓应该是纯白色2 px，但在不同的位置-说-4px，-8px，-12px。目标是获得2个以上的轮廓。
我知道我可以使box-shadow和outline得到double outilne，但注意到我不能附加到div 3类与不同的outline-offset - 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也很重要。

css

来源：https://stackoverflow.com/questions/23109613/css-multiple-outlines-with-negative-outline-offset

3条答案

按热度按时间

1l5u6lss1#

完成@先生外星人演示/答案，我会使用边界的伪更好的兼容性。

.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

赞(0）回复(0）举报 2023-05-02

20jt8wwn2#

使用伪元素如何？在这里，我使用了一个class和一个元素，但是我定位了伪元素i。e :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;
}

赞(0）回复(0）举报 2023-05-02

lh80um4z3#

清理代码。

.effect {
  outline: 4px solid #f99;

  /*
  width: 200px;
  height: 200px;
  */
  /* (Optional) Size hack */
  display: table;
  padding: 25px 50px;

  position: relative;

  &::before,
  &::after {
    position: absolute;
    inset: 0;
    content: "";
    border: #9f9 4px solid;
  }
  &::before {
    border: #99f 8px solid;
  }
}
 <div class="effect"></div>

赞(0）回复(0）举报 2023-05-02

我来回答

负轮廓偏移的CSS多个轮廓

3条答案

相关问题

热门标签

最新问答