CSS3 双下拉边框？

Question

好的，所以我想创建类似 http://i.imgur.com/jox0ENW.jpg 的东西.但是是模块化类型，我可能有一个按钮类可以使它看起来像那样，还有一个类我可以用来应用于部分。

现在我有:

.double-drop {
    position: relative;

    padding: map-get($padding, xl);
    margin-top: (-1 * 280px);

    border: 3px solid $black;

    background-color: $white;

    &:before {
        content: '';

        position: absolute;
        z-index: -1;

        top: (-1 * map-get($padding, m));
        right: (-1 * map-get($padding, m));

        width: 100%;
        height: 100%;

        border: 3px solid $black;

        background-color: $lighter-grey;
    }
}

哪个有效，并在部分上产生这种效果。但如果该部分位于绝对定位的父级内部，则不是。 (投影落后..)

我想在图像中为我的所有按钮模仿这种效果，并且显然会转换其平移，使其移动或不移动。

首先有可能吗？

Answer 1

CSS Only 按钮上的多边框

也许使用多个阴影作为边框会是一个简单的解决方案？它会在不支持它的浏览器中优雅地降级，并且很容易使用。

JSFiddle Example

.shadow-button {
padding:10px;
border:solid 3px #000000;
display:inline-block; /* used only to shrink wrap the div around the contents, has a default margin */
-webkit-box-shadow:8px -8px 0px -2px #cccccc, 8px -8px 0px 1px #000000;
-moz-box-shadow:8px -8px 0px -2px #cccccc, 8px -8px 0px 1px #000000;
box-shadow:8px -8px 0px -2px #cccccc, 8px -8px 0px 1px #000000;
font-family:Verdana, Tahoma, Arial, sans-serif;
font-weight:bold;    
}

p {padding:10px;}

---

<div class="shadow-button">PLAY MUSIC VIDEO</div>

浏览器支持:http://caniuse.com/#search=box