CSS3“提升角”阴影与不透明度 [英] CSS3 "Lifted Corners" Drop-Shadow with Opacity

问题描述

我一直在玩一些CSS3阴影效果。我很喜欢提升角的效果，但我遇到了一个问题，当试图添加不透明度的元素。我的问题是：是否有办法在不透明的元素上创建提升角效果？

I have been playing with some CSS3 drop-shadow effects. I am pretty fond of the "lifted corners" effect but I ran into an issue when attempting to add opacity to the element. My question is: Is there a way to create the "lifted corners" effect on an element with opacity?

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

推荐答案

href =https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index/The_stacking_context>堆叠上下文及其在浏览器中的呈现方式。

The problem is understanding stacking contexts and how they're rendered in the browser.

• 根元素（HTML），


• -index值（不包括auto），


• 元素与不透明度值


• 在移动WebKit和Chrome 22+上，position：fixed总是创建一个新的堆叠上下文，即使z-index为auto

• the root element (HTML),
• positioned (absolutely or relatively) with a z-index value other than "auto",
• elements with an opacity value less than 1.
• on mobile WebKit and Chrome 22+, position: fixed always creates a new stacking context, even when z-index is "auto"

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

1. 元素的背景和边框形成堆叠
   上下文。


2. 子堆栈上下文具有负堆栈级别（最多
   为负） li>
   
3. 非定位浮动广告。


4. 包含
   内联表和内联块的流内，内联级别，非定位后代。


5. 子级堆栈上下文与堆栈级别0和定位
   子级别为0的子级。


6. 子级堆栈上下文具有正的堆栈级别（最低
   为正）。

1. the background and borders of the element forming the stacking context.
2. the child stacking contexts with negative stack levels (most negative first).
3. the in-flow, non-inline-level, non-positioned descendants.
4. the non-positioned floats.
5. the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
6. the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
7. the child stacking contexts with positive stack levels (least positive first).

正在渲染 #test 的背景，因为这是不透明度的元素应用于。之后，阴影进入顶部，因为他们在一个新的堆栈上下文（ position：absolute ）。最后，div的文本。

The background of #test is being rendered first since that is the element the opacity is being applied to. After that, the shadows go on top since they are in a new stacking context (position: absolute). And finally, the text of the div.

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

A simple solution: Would be to wrap the div in another div and apply the opacity to that div instead of the #test.

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

另一个好读：

Another good read: What No One Told You About Z-Index

这篇关于CSS3“提升角”阴影与不透明度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！