如何在不搞砸的情况下修改这个页面的剥离效果？

Question

我正在尝试调整这里显示的页面剥离效果。我的小提琴是这里

我试着做两个修改：

1. 将宽度增加到90% (他们有800 90)
   • 如果我这样做，那么这就会导致阴影效应的混乱，显示阴影应该出现的一些空格。

​

1. 将页面剥离在所有四个角落。
   • 我尝试过各种类型的组合：“影子-底部阴影-顶部”，“影子-右影子-左”，等等。

​

我该如何做到这两点？

<div class="page-curl shadow-bottom">
    <h2>Bottom shadow, both sides</h2>
    <p>Freegan fixie banh mi, pickled art party trust fund iphone blog etsy occupy cardigan fap ethnic. Sartorial sriracha vinyl lo-fi cardigan. Tofu fingerstache vegan, shoreditch marfa pour-over occupy 8-bit american apparel four loko fixie lomo vice. Freegan irony chambray jean shorts PBR selvage. PBR messenger bag VHS, umami sustainable godard portland single-origin coffee. Wolf whatever butcher messenger bag yr american apparel fap. Tattooed master cleanse cred, narwhal gluten-free sriracha organic next level put a bird on it.</p>
</div>
....full code on my jsfiddle link

Answer 1

我在这里创建了一个带有预期效果的演示。

编辑：通过修正原始的基于百分比的宽度来处理可变宽度错误，这给出了除伪元素宽度之外的每个维度的固定值，即40%。40%的800 to (容器的指定宽度)=320 to，这就是我们在这里要解决的剪裁阴影。

另一个问题是，最初的作者编写代码的方式是只将阴影应用于.page-curl元素:我分离出CSS规则，因此.page-curl只控制元素的内部外观。

修改后的CSS意味着您可以使用阴影效果创建任意数量的元素，而无需引入填充、边框、背景、宽度等属性：

[class*=shadow] {
    position: relative;
}

[class*=shadow]:before, 
[class*=shadow]:after {
    background: none;
    bottom: 12px;
    -moz-box-shadow: 0 10px 12px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 10px 12px rgba(0, 0, 0, 0.5);
    box-shadow: 0 10px 12px rgba(0, 0, 0, 0.5);
    content: "";
    height: 10px;
    left: 12px;
    position: absolute;
    width: 320px;
    z-index: -1;
    -moz-transform: skew(-4deg) rotate(-4deg);
    -webkit-transform: skew(-4deg) rotate(-4deg);
    transform: skew(-4deg) rotate(-4deg);
}

[class*=shadow]:after {
    -moz-transform: skew(4deg) rotate(4deg);
    -webkit-transform: skew(4deg) rotate(4deg);
    transform: skew(4deg) rotate(4deg);
    left: auto;
    right: 12px;
}

基本上，这段代码说，如果一个元素有一个包含文本shadow的类，我们可以给它这些::before和::after元素。接下来，指定特定方向的规则已经删除了.page-curl类。

此时，我们仍然仅限于每个元素的2个阴影(只能有一个::before和一个::after元素)：那么，解决方案是创建2个嵌套的div：

<div class="container shadow-top-bottom shadow-right">
    <div class="page-curl shadow-top-bottom shadow-left">
    </div>
</div>

第一个div负责右上方和底部的阴影，2ndv负责左边的阴影。

顺便说一句，第二个有所有的.page-curl属性，第一个的.container类负责处理90%的宽度要求。

Answer 2

果皮的影子不会那么高，但看起来还是很棒！对以下两项进行以下小的更改，它将为您解决这一问题：

这是它的jsFiddle和这是页面上的样子

.shadow-top-bottom.shadow-left:after {
display: block;
bottom: auto;
top: 20px; /* change from top: 15px; to top: 20px;*/
right: auto;
left: 12px;
-moz-box-shadow: 0 -10px 12px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 -10px 12px rgba(0, 0, 0, 0.5);
box-shadow: 0 -10px 12px rgba(0, 0, 0, 0.5);}

.shadow-top-bottom.shadow-right:before {
display: block;
bottom: auto;
top: 20px; /* change from top: 15px; to top: 20px;*/
right: 12px;
left: auto;
-moz-box-shadow: 0 -10px 12px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 -10px 12px rgba(0, 0, 0, 0.5);
box-shadow: 0 -10px 12px rgba(0, 0, 0, 0.5);}