CSS3“提升的角落”不透明的阴影答案

【问题标题】：CSS3 "Lifted Corners" Drop-Shadow with OpacityCSS3“提升的角落”不透明的阴影
【发布时间】：2013-04-10 15:11:04
【问题描述】：

我一直在玩一些 CSS3 投影效果。我非常喜欢“抬高的角落”效果，但是在尝试为元素添加不透明度时遇到了问题。我的问题是：有没有办法在不透明的元素上创建“提升角”效果？

.drop-shadow{
    position:relative;
    float:left;
    width:40%;
    padding:1em;
    margin:2em 10px 4em;
    background:#fff;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.drop-shadow:before,
.drop-shadow:after{
    content:"";
    position:absolute;
    z-index:-2;
}
.lifted{
    -moz-border-radius:4px;
    border-radius:4px;
}
.lifted:before,
.lifted:after{
    bottom:15px;
    left:10px;
    width:50%;
    height:20%;
    max-width:300px;
    max-height:100px;
    -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
    -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
    box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
    -webkit-transform:rotate(-3deg);
    -moz-transform:rotate(-3deg);
    -ms-transform:rotate(-3deg);
    -o-transform:rotate(-3deg);
    transform:rotate(-3deg);
}
.lifted:after{
    right:10px;
    left:auto;
    -webkit-transform:rotate(3deg);
    -moz-transform:rotate(3deg);
    -ms-transform:rotate(3deg);
    -o-transform:rotate(3deg);
    transform:rotate(3deg);
}

【问题讨论】：

不透明元素会产生相当复杂的阴影（尝试将镜头放在一张纸上方）。 IMO，这是您应该使用图像而不是 CSS 的情况。
我也想知道这个问题的答案.. 但恐怕这对于 css 来说是不可能的
酷！对我来说似乎是一个错误。为什么opacity 会导致在顶部渲染阴影？
我不知道。但我得说，这看起来很棒！
@SvenBieder, :-) 据我所知并没有。请参阅此update，它甚至不使用:after。将opacity 设置为< 1，黑色的 div 出现在前面（红色的部分不太明显，它完全在顶部，用 Firebug 测试过）。也许我只是不明白你的意思。

标签： opacity css

【解决方案1】：

我可以通过在带有“提升角”的容器内添加div 来伪造解决方案。这是一个 hack，我想其他人可以提出更好的解决方案，但我想我会发布我的发现以防有人好奇。

http://jsfiddle.net/WAvZu/2/

【讨论】：

嘿，只是好奇。你从哪里得到这个背景的？ url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9z…0aD0iOTkiIGhlaWdodD0iMjUiIGZpbGw9IiNjZWU2OWIiPjwvcmVjdD4KPC9nPgo8L3N2Zz4="); ?
@ChrisB 这是 CodePen 上的 SVG 游乐场。 codepen.io/progers/pen/IvHfd

【解决方案2】：

经过讨论，老实说我不太确定，但我找到了这篇文章：The stacking context。

据我所知，在您的示例中使用z-index: -2 的技巧之所以有效，是因为您没有在.drop-shadow 上设置z-index，这意味着它没有堆叠上下文。通常，子级（:before 和 :after 也是某种子级）的 z-index 不能低于其父级，但如果父级没有堆叠上下文，则它可以低于。

opacity 的问题在于，它形成了堆叠上下文：

在文档中的任何位置，任何元素都可以形成堆叠上下文

根元素 (HTML)，

使用除“auto”以外的 z-index 值（绝对或相对）定位，

不透明度值小于 1 的元素。(...),

...

话虽如此，你可以work around by using a wrapper

<div class="wrapper">
    <div class="drop-shadow lifted">This is correct with opacity.</div>
</div>

并在那里设置opacity。

.wrapper {
    opacity: .5;
}

【讨论】：

很好的发现。 This fiddle 更好地证明了这一点。测试 1 是两个独立的元素，它们具有与测试 2 元素相同的.9 不透明度，这清楚地显示了渲染的差异。测试 3 元素像测试 2 一样嵌套，但不透明度为 1。

【解决方案3】：

问题在于理解stacking contexts 以及它们在浏览器中的呈现方式。

根元素 (HTML)，

使用除“auto”以外的 z-index 值（绝对或相对）定位，

带有opacity value less than 1.的元素

在移动 WebKit 和 Chrome 22+ 上，position:fixed 始终会创建新的堆叠上下文，即使 z-index 为“auto”

9.9.1 Specifying the stack level: the 'z-index' property

构成堆叠的元素的背景和边框上下文。

具有负堆栈级别的子堆栈上下文（大多数先否定）。

流入、非内联级别、非定位的后代。

未定位的浮动。

流入、内联级、非定位后代，包括内联表和内联块。

堆栈级别为 0 且定位的子堆栈上下文堆栈级别为 0 的后代。

具有正堆栈级别的子堆栈上下文（最少积极第一）。

#test 的背景首先被渲染，因为这是应用不透明度的元素。之后，阴影会出现在顶部，因为它们处于新的堆叠上下文中 (position: absolute)。最后是 div 的文本。

一个简单的解决方案：将 div 包装在另一个 div 中并将不透明度应用于那个 div 而不是 #test。

http://jsfiddle.net/WAvZu/3/

另一篇好书：What No One Told You About Z-Index

【讨论】：