html - 用阴影叠加两个边框？

我怎样才能在另一个边框周围包裹一个边框，并让它们都使用插入式阴影（如相框中的双重遮罩）？

最佳答案

您可以使用:before and :after pseudo-elements完成此操作。参见答案末尾的jsFiddle演示。

的HTML

<div class="frame"><img src="../img/logo.png"></div>

的CSS

.frame {
    display:inline-block;
    position:relative;
    margin:20px;
    z-index:5;
    padding:10px;
    background:#376b90;
}
.frame:before {
    position:absolute;
    content:".";
    display:block;
    font-size:0;
    color:transparent;
    /* Change left, right, top, bottom, and box-shadow to position */
    left:0;
    top:0;
    right:0;
    bottom:0;
    box-shadow:inset 0 0 3px 2px black;
}
.frame:after {
    position:absolute;
    content:".";
    display:block;
    font-size:0;
    color:transparent;
    /* Change left, right, top, bottom, and box-shadow to position */
    left:5px;
    top:5px;
    right:5px;
    bottom:5px;
    box-shadow:inset 0 0 3px 2px black;
}

用法示例


Both shadows outside
One shadow inside, one shadow outside
Both shadows inside
Two inset shadows, one outset shadow, and custom background-OP请求
Inset borders-复制https://stackoverflow.com/a/10904061/526741
Variable length content