css z-index被遮蔽的阴影框中的阴影元素
问题描述:
我无法获得带有阴影的阴影元素(还有阴影)。 有什么帮助吗?css z-index被遮蔽的阴影框中的阴影元素
我觉得麻烦的是与z-index
和位置,但我不能完全把它在一起。
圆形阴影必须在蓝色的div后面,以便只有底部显示在蓝色框的底部。我希望它看起来像这个演示中的“单一水平曲线”:nicolasgallagher.com/css-drop-shadows-without-images/demo
注意:HTML结构一定不能改变,如果可能的话!
HTML:
<section>
<div>
<span class="btn-jaune">
<a>
<span>hola</span>
</a>
</span>
</div>
</section>
CSS:
section {
border-top: 4px solid #00A1B1;
}
section > div {
background-color: #E6F8FA;
padding: 20px;
position: relative;
z-index: 1;
}
section > div:before {
content: "";
position: absolute;
z-index: -2;
top: 50%;
bottom: 0;
left: 10px;
right: 10px;
-moz-border-radius: 100px/10px;
border-radius: 100px/10px;
-webkit-box-shadow: 0 0 15px rgba(0,0,0,0.6);
-moz-box-shadow: 0 0 15px rgba(0,0,0,0.6);
box-shadow: 0 0 15px rgba(0,0,0,0.6);
}
.btn-jaune {
width: 100%;
background: #FFEA00;
display: block;
position: relative;
}
.btn-jaune > a {
padding: 0;
margin: 0;
height: 48px;
display: block;
}
.btn-jaune > a:before,
.btn-jaune > a:after {
content: "";
position: absolute;
z-index: -2;
bottom: 15px;
width: 49%;
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);
}
.btn-jaune > a:before {
left: 4px;
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
transform: rotate(-2deg);
}
.btn-jaune > a:after {
right: 4px;
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-ms-transform: rotate(2deg);
-o-transform: rotate(2deg);
transform: rotate(2deg);
}
.btn-jaune > a > span {
display: block;
text-transform: uppercase;
text-align: center;
font-weight: normal;
padding: 17px 30px;
margin-right: 20px;
}
伊克巴尔我没有看到与你的答案代码进行任何更改。有一个jsfiddle链接?
我想实现的是:
答
我不是100%,你想要什么样的最终产品的样子,但如果你改变section > div:before
有一个top: 5%;
,它把在另一个盒子中间的黄色框。
答
短暂的变化。
section > div {
position: relative;
/*z-index: 1;*/
}
.btn-jaune {
position: relative;
z-index: 5;
}
.btn-jaune > a {
background: #FFEA00;
}
很长的变化。
section {
position: relative;
}
section > div {
/*position: relative;*/
/*z-index: 1;*/
}
section > div:before {
/*z-index: -2;*/
}
.btn-jaune {
position: relative;
z-index: 5;
}
.btn-jaune > a {
background: #FFEA00;
}
.btn-jaune > a:before,
.btn-jaune > a:after {
position: absolute;
z-index: -1;
}
警告:否定z-index在旧版浏览器中不起作用。
+0
差不多!但是,这样做会丢失链接元素的影子。 我开始认为我不太了解z-index属性,而且这根本不可能。 –
答
GOT IT!
:before
伪元素进入section
,而不是section > div
。 此外,正如伊克巴尔所说,section
必须处于相对位置。
谢谢!
圆形阴影必须是蓝色的div后面,所以,只有下方显示的蓝色包装盒的底部。 我希望它看起来像这个演示中的“单一水平曲线”:http://nicolas.gallagher.com/css-drop-shadows-without-images/demo/ –