我一直在玩一些
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.