我一直在玩一些
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.3),0 0 40px rgba(0,0.1) inset;
-moz-Box-shadow:0 1px 4px rgba(0,0.1) inset;
Box-shadow:0 1px 4px rgba(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.7);
-moz-Box-shadow:0 15px 10px rgba(0,0.7);
Box-shadow:0 15px 10px rgba(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);
}
解决方法
问题是了解
stacking contexts以及它们在浏览器中的呈现方式.
- the root element (HTML),
- positioned (absolutely or relatively) with a z-index value other than “auto”,
- elements with an 07001
- on mobile WebKit and Chrome 22+,position: fixed always creates a new stacking context,even when z-index is “auto”
9.9.1 Specifying the stack level: the ‘z-index’ property
- the background and borders of the element forming the stacking
context.- the child stacking contexts with negative stack levels (most
negative first).- the in-flow,non-inline-level,non-positioned descendants.
- the non-positioned floats.
- the in-flow,inline-level,non-positioned descendants,including
inline tables and inline blocks.- the child stacking contexts with stack level 0 and the positioned
descendants with stack level 0.- the child stacking contexts with positive stack levels (least
positive first).
#test的背景正在被渲染,因为这是应用不透明度的元素.之后,它们处于新的堆叠上下文(位置：绝对)中,这些阴影在顶部.最后,div的文字.
一个简单的解决方案：将div放在另一个div中,并将不透明度应用于该div而不是#test.
