好的,所以我想创建类似 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;
}
}
哪个有效,并在部分上产生这种效果。但如果该部分位于绝对定位的父级内部,则不是。 (投影落后..)
我想在图像中为我的所有按钮模仿这种效果,并且显然会转换其平移,使其移动或不移动。
首先有可能吗?
最佳答案
CSS Only 按钮上的多边框
也许使用多个阴影作为边框会是一个简单的解决方案?它会在不支持它的浏览器中优雅地降级,并且很容易使用。
.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>
关于CSS3 双下拉边框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26294418/