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按钮上的多个边框

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

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

CSS3双降边框？

1 个答案:

仅限CSS按钮上的多个边框