Question

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

我正在尝试进行2次修改：

将宽度增加到90％（它们有800px）
- 如果我这样做，那就搞砸了阴影效果，显示阴影所在的空白
将页面剥落在所有4个角上。
- 我尝试了各种类的组合：“阴影底阴影顶”，“阴影右阴影左”等。

我如何完成两者？

<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

I created a demo with the intended effects here

编辑：通过修复原始的基于百分比的宽度来满足可变宽度错误，该宽度为除了伪元素宽度之外的每个维度提供固定值，为40％。 800px的40％（容器的指定宽度）= 320px，这是我们在这里解决剪切阴影的问题。

另一个问题是原作者以这样的方式编写代码：阴影只会应用于.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：< / p>

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

所以第一个div处理右边的顶部和底部阴影，第二个部分照顾左边的阴影。

顺便提一下，第二个属性具有所有.page-curl属性，而第一个属于.container类可以满足您90％的宽度要求。

Answer 2

剥离阴影不会那么高，但看起来仍然很棒！对以下两个进行以下微小更改，它将为您解决此问题：

Here is the jsFiddle for it 和here is what it looks like on the page

.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);}

如何在不搞乱的情况下修改此页面剥离效果？

2 个答案: