12

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

http://jsfiddle.net/WAvZu/

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

3 回答 3

9

问题在于理解堆叠上下文以及它们如何在浏览器中呈现。

  • 根元素（HTML），
  • 以“auto”以外的 z-index 值定位（绝对或相对），
  • 不透明度值小于 1的元素。
  • 在移动 WebKit 和 Chrome 22+ 上， position: fixed 总是创建一个新的堆叠上下文，即使 z-index 是“auto”

9.9.1 指定堆栈级别：'z-index' 属性

  1. 构成堆叠上下文的元素的背景和边框。
  2. 具有负堆栈级别（最负优先）的子堆栈上下文。
  3. 流入的、非内联级别的、非定位的后代。
  4. 未定位的浮动。
  5. 流入的、内联级的、非定位的后代，包括内联表和内联块。
  6. 堆栈级别 0 的子堆栈上下文和堆栈级别 0 的定位后代。
  7. 具有正堆栈级别的子堆栈上下文（最不积极的优先）。

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

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

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

另一本好读物：关于 Z-Index 的事没人告诉你

于 2013-04-17T19:50:03.740 回答
4

在讨论之后，老实说我不太确定，但我发现了这篇文章：堆叠上下文。

据我所知，z-index: -2您示例中的技巧只是有效，因为您没有设置 a z-indexon .drop-shadow，这意味着它没有堆叠上下文。通常一个孩子（:before也是:after某种孩子）不能低于z-index它的父母，但如果父母没有堆叠上下文，它可以低于它。

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

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

  • 根元素（HTML），
  • 以“auto”以外的 z-index 值定位（绝对或相对），
  • 不透明度值小于 1 的元素。 (...),
  • ...

话虽如此，您可以通过使用包装器来解决

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

并设置在opacity那里。

.wrapper {
    opacity: .5;
}
于 2013-04-17T19:26:04.930 回答
1

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

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

于 2013-04-17T18:35:04.803 回答