CSS3中框的多层边框

Question

我正在寻找一种正确的方法，可以在下面的图片中突出显示效果 CSS3中我的底部。

Answer 1

使用阴影获得此效果会产生如下问题：如果降低阴影的大小，则边框半径将减小。可以解决，但它很复杂。

您最好的选择是使用伪元素

＆＃13;

＆＃13;

.test  {
    width: 300px;
    height: 100px;
    border: solid 1px green;
    border-radius: 10px;
    position: relative;
    background-color: white;
}

.test:after, .test:before {
    content: "";
    position: absolute;
    border: inherit;
    border-radius: inherit;
    background-color: white;
    height: 50px;
}

.test:after {
    left: 6px;
    right: 6px;
    bottom: -6px;
    z-index: -1;
}
.test:before {
    left: 14px;
    right: 14px;
    bottom: -12px;
    z-index: -2;
}

＆＃13;

<div class="test"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试过盒子阴影吗？您可以多次使用框阴影并控制它们的位置。例如：

box-shadow: 1px 1px 1px #color of your choice, (comma for another shadow) 2px 2px 2px #color of your choice, (and on as much as you want);

您可以添加其他值，例如1px 1px 1px 1px black。第四个代表阴影的大小。 我希望这有帮助，或者如果你可以更具体：）