CSS3阴影就像图像一样

Question

如何使用两个div和CSS3创建类似书阴影的页面？在附件之后的图像中相等。

我尝试使用带有插入的box-shadow但它有效。

box-shadow:  inset -5px -5px 5px #888;

谢谢。

Answer 1

您可以使用线性渐变：

.leftPage{
    background: linear-gradient(to right, #fff 92%, #9f9f9f 100%);
}
.rightPage{
    background: linear-gradient(to left, #fff 95%, #898989 100%);
}

示例 - ＆gt; jsfiddle

Answer 2

在这里你http://jsfiddle.net/DhgY8/1/

HTML

<div class="book">
    <div class="left page"></div>
    <div class="right page"></div>
</div>

CSS

.book {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: silver;
}
.left {
    box-shadow: 6px 0 2px 1px black, -8px 0 6px grey inset;
    z-index: 3;
    left: 0;
}

.right {
    right: 0;
}
.page {
    background: white;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
}

它并不完美，但它非常接近你想要的东西：）