html - 使用截止设置框阴影元素的样式

Question

我们正在尝试创建一个 HTML 页面，该页面由包含图片和标题的砖石风格浮动元素组成。元素有阴影，页面有轻微的渐变背景。已经访问过的目标有一个折角。

折叠角会导致几个问题：

1）我们怎样才能使元素的盒子阴影在右侧和底部的折叠角之前结束？div我们是否必须使用包含半透明渐变的 s以 CSS3 之前的方式制作阴影？

2）如何做折角本身？我们不能只在白色背景上的右下角添加一个图像，因为页面的背景渐变必须显示出来。

Answer 1

到目前为止，我已经想到了四种方法：

方法一：这个思路是先用两个伪元素.box得到角，再用两个伪元素.box-text得到角的阴影-demo。这个最大的问题是它……嗯，丑陋。

HTML结构：

<div class="box">
    <header></header>
    <div class="box-text">
        <p>Text</p>
    </div>
</div>

相关CSS：

body {
    background: #ccc;
}
.box {
    box-shadow: 2px 2px 13px #000;
    position: relative;
    background: white;
}
.box:before, .box:after, .box-text:before, .box-text:after {
    position: absolute;
    content: '';
}
.box:before {
    bottom: -25px;
    right: -25px;
    width: 75px;
    height: 75px;
    background: #ccc;
}
.box:after {
    bottom: 0;
    right: 0;
    width: 50px;
    height: 50px;
    box-shadow: -2px -2px 2px #777;
    background: linear-gradient(-45deg, transparent 38%, #333 50%, #faf0f0 50%);
}
.box-text:before {
    bottom: 32px;
    right: -15px;
    width: 15px;
    height: 18px;
    background: radial-gradient(top left, #333 0%, transparent 40%);
}
.box-text:after {
    bottom: -15px;
    right: 32px;
    width: 18px;
    height: 15px;
    background: radial-gradient(top left, #333 0%, transparent 40%);
}

---

方法2：使用倾斜的伪元素为那个特定的角以更好的方式组合阴影（我会在伪元素上有阴影） -演示

我认为这个看起来更好，并且还具有在 IE9 中工作的优势（前一个没有，因为它使用了 CSS 渐变）。

HTML 将完全相同，CSS 将变为：

.box {
    box-shadow: 0 0 5px 1px #777;
    position: relative;
    background: white;
}
.box:before, .box:after, .box-text:before {
    position: absolute;
    z-index: 2;
    content: '';
}
.box:before {
    bottom: -38px;
    right: -38px;
    width: 71px;
    height: 71px;
    transform: rotate(45deg);
    z-index: 1;
    background: #ccc;
}
.box:after {
    bottom: 0;
    right: 0;
    border: solid 23px #f9f0f0;
    border-bottom-color: transparent;
    border-right-color: transparent;
    box-shadow: -1px -1px 2px #777;
    z-index: 4;
}
.box-text:before {
    right: 0;
    bottom: 22px;
    width: 47px;
    box-shadow: 2px 2px 3px 1px #777;
    transform: skewY(-45deg);
}

---

方法3：我从之前的方法中得到了一个想法——demo。不过我觉得上一张好看一点。。。

已更改的 CSS：

.box:before {
    bottom: -24px;
    right: -7px;
    width: 35px;
    height: 70px;
    box-shadow: inset 2px 0 3px 1px #999;
    transform: rotate(45deg);
    z-index: 1;
    background: #ccc;
}
.box:after {
    bottom: 0;
    right: 0;
    border: solid 23px #f9f0f0;
    border-bottom-color: transparent;
    border-right-color: transparent;
    box-shadow: -1px -1px 2px #777;
    z-index: 4;
}
.box-text:before {
    bottom: -27px;
    right: -10px;
    width: 35px;
    height: 70px;
    transform: rotate(45deg);
    background: #ccc;
}

方法 4：在盒子上只使用 2 个伪元素 -演示

.box:before, .box:after {
    position: absolute;
    z-index: 2;
    content: '';
}
.box:before {
    right: -8px;
    bottom: 22px;
    width: 65px;
    box-shadow: 2px 2px 5px 1px #777, 0 25px 0 25px #ccc;
    transform: rotate(-45deg);
}
.box:after {
    bottom: 0;
    right: 0;
    border: solid 23px #f9f0f0;
    border-bottom-color: transparent;
    border-right-color: transparent;
    box-shadow: -1px -1px 2px #777;
    z-index: 4;
}