CSS3“提升角”阴影与不透明度

前端之家收集整理的这篇文章主要介绍了CSS3“提升角”阴影与不透明度前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我一直在玩一些 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.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

  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的背景正在被渲染,因为这是应用不透明度的元素.之后,它们处于新的堆叠上下文(位置:绝对)中,这些阴影在顶部.最后,div的文字.

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

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

另一个好读:What No One Told You About Z-Index

原文链接:https://www.f2er.com/css/216325.html

猜你在找的CSS相关文章