Html 背景阴影的CSS:before和:after是否与创建页面卷曲效果的固定元素一起工作
我有一个元素,我想创建一个使用前后css属性的页面卷曲效果。我在一个有相对定位的项目上的其他地方做了这个。这很好,是这样做的:Html 背景阴影的CSS:before和:after是否与创建页面卷曲效果的固定元素一起工作,html,css,pseudo-element,page-curl,Html,Css,Pseudo Element,Page Curl,我有一个元素,我想创建一个使用前后css属性的页面卷曲效果。我在一个有相对定位的项目上的其他地方做了这个。这很好,是这样做的: .feed li{ display:block; height:50px; width:80%; margin-left:10%; position:relative; clear:both; margin-top:20px; overflow:visible; background:#FFF;
.feed li{
display:block;
height:50px;
width:80%;
margin-left:10%;
position:relative;
clear:both;
margin-top:20px;
overflow:visible;
background:#FFF;
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
-webkit-border-top-right-radius: 6px;
-moz-border-radius-topright: 6px;
border-top-right-radius: 6px;
}
.feed li:before, .feed li:after{
position: absolute;
width: 40%;
height: 10px;
content: ' ';
left: 0px;
bottom: 12px;
-webkit-transform: skew(-5deg) rotate(-5deg);
-moz-transform: skew(-5deg) rotate(-5deg);
-ms-transform: skew(-5deg) rotate(-5deg);
-o-transform: skew(-5deg) rotate(-5deg);
transform: skew(-5deg) rotate(-5deg);
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.7);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.7);
z-index: -1;
}
.feed li:after{
left:auto;
right: 0px;
top:12px;
bottom:auto;
-webkit-border-top-right-radius: 6px;
-moz-border-radius-topright: 6px;
border-top-right-radius: 6px;
-webkit-transform: skew(-5deg) rotate(-5deg);
-moz-transform: skew(-5deg) rotate(-5deg);
-ms-transform: skew(-5deg) rotate(-5deg);
-o-transform: skew(-5deg) rotate(-5deg);
transform: skew(-5deg) rotate(-5deg);
-webkit-box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.4);
box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.4);
}
但是,当我在对象上使用类似的方法时,z索引似乎被覆盖,并且阴影显示在元素的顶部而不是后面。这就是我所拥有的:
.nav{
z-index:1;
position:fixed;
background:#FFF;
top:0px;
bottom:0px;
left:0px;
width:200px;
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
}
.nav:before,.nav:after{
content:'';
position:fixed;
background: transparent;
z-index: -1;
width:195px;
height:50%;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.6);
box-shadow: 0 10px 12px rgba(0, 0, 0, 0.6);
}
.nav:before{
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
transform: rotate(-2deg);
bottom:0px;
left:0px;
}
.nav:after{
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-ms-transform: rotate(2deg);
-o-transform: rotate(2deg);
transform: rotate(2deg);
bottom:auto;
top:0px;
left:0px;
}
我不完全确定这里的问题是什么,我在其他项目上使用了这种方法,没有任何问题。我唯一能想到的是,固定元素受到的影响与其他元素不同。tl;博士:
指:
:before和:after伪元素与其他框交互,就好像它们是插入关联元素内部的真实元素一样
这意味着它们位于相对于父对象的另一个堆栈上。不过,可以将它们放在父对象后面。这是通过添加一个负的z-指数来完成的,就像你做的那样
但是把这些伪元素放在父母背景后面似乎有问题(如果有)。作为解决方案,建议添加z-index:1代码>和位置:相对代码>到父级。这就是为什么您的第一个示例运行良好,而带有位置的示例:fixed代码>导致问题
在我的解决方案中,我更改了标记:
<div class="nav">
<div class="content">lorem ipsum</div>
<div class="shadows"></div>
</div>
乱数假文
并对元素应用适当的规则。我不知道你认为导航最终会是什么样子,但我认为我的解决方案看起来很棒。请参阅。太多的代码,请按照指南创建简短而准确的代码,以便人们阅读。使用此链接作为参考:。我不认为这样做,但它确实工作得很好,看起来也很干净。谢谢