1

我已经看到其他复杂的效果是用 CSS 完成的，比如堆叠的纸张效果：

http://jsfiddle.net/thefrontender/LwW7g/

<div class="slide expandable-slide">Title</div>
<div class="slide">Title</div>

.slide {
    float: left;
    display: block;
    position: relative;
    background: #FFF;
    height: 10em;
    width: 10em;
    padding: 1em;
    border: solid 2px #000;
    margin-right: 2em;
}

.expandable-slide {
    margin: 2em 2em 0 2em;
    box-shadow: -1em -1em #666,
                -2em -2em #333;
}

我的需求非常相似，除了 2 个外边缘需要与主正面 div 连接：

在此处输入图像描述

任何人都知道可以使这成为可能的任何技巧吗？

4

4 回答 4

2

如果您能够使用 CSS 伪元素：

.slide {
    position: relative;
    width: 200px; /* arbitrary, adjust to taste */
    height: 500px; /* arbitrary, adjust to taste */
    border: 2px solid #000;
    border-right-width: 40px; /* this is the 'depth' of the 'sides' */
    border-bottom-width: 40px;
}

.slide::before {
    content: '';
    position: absolute;
    top: -2px; /* to cover the top of the border */
    left: 100%;
    border: 20px solid #fff;
    border-bottom-color: transparent; /* allows the containing element's border to be seen */
    border-left-color: transparent;
}

.slide::after {
    content: '';
    position: absolute;
    top: 100%;
    left: -2px;
    border: 20px solid #fff;
    border-top-color: transparent;
    border-right-color: transparent;
}

JS 小提琴演示。

以上使用以下 HTML：

<div class="slide">Title</div>
于 2013-09-18T18:45:35.177 回答
1

您可以堆叠多个盒子阴影以获得您想要的效果：

.slide {
    height: 200px;
    width: 100px;
    padding: 1em;
    border: solid 2px #000;
}
.expandable-slide {
    margin: 10px 10px 0 10px;
    box-shadow: 1px 1px #999, 
        2px 2px #999, 
        3px 3px #999, 
        4px 4px #999, 
        5px 5px #999, 
        6px 6px #999, 
        7px 7px #999, 
        8px 8px #999, 
        9px 9px #999, 
        10px 10px #999;
}

jsFiddle 示例

于 2013-09-18T18:59:27.527 回答
1 
.expandable-slide {
    position: relative;
    margin: 2em 2em 0 2em;

    box-shadow: 20px 25px 0px 0px #333;

}
.expandable-slide:before {
position: absolute;
content: "";
color: #333;
background: #333;
width: 0px;
height: 0px;
border-right: 15px solid #333;
border-top: 10px solid #333;
border-bottom: 15px solid #fff; /*match background color*/
border-left: 10px solid #fff;/*match background color*/
top: 194px;
left: 0px;
}
.expandable-slide:after {
position: absolute;
content: "";
color: #333;
background: #333;
width: 0px;
height: 0px;
border-bottom: 15px solid #333;
border-left: 10px solid #333;
border-right: 10px solid #fff; /*match background color*/
border-top: 15px solid #fff;/*match background color*/
top: 0px;
left: 194px;    
}
于 2013-09-18T19:03:42.860 回答
1

你可以这样做（不是最优雅的，但就像一个魅力）：

.expandable-slide {
    margin: 2em 2em 0 2em;
    box-shadow: 0.05em 0.05em #555,
                 0.1em 0.1em #555,
                 0.15em 0.15em #555,
                 0.2em 0.2em #555,
                 0.25em 0.25em #555,
                 0.3em 0.3em #555,
                 0.35em 0.35em #555,
                 0.4em 0.4em #555,
                 0.45em 0.45em #555,
                 0.5em 0.5em #555
        ;               
}

小提琴

于 2013-09-18T18:58:13.240 回答