密码遮蔽的效果css,css z-index被遮蔽的阴影框中的阴影元素

我无法获得带有阴影的阴影元素(还有阴影)。 有什么帮助吗？css z-index被遮蔽的阴影框中的阴影元素

我觉得麻烦的是与z-index和位置，但我不能完全把它在一起。

圆形阴影必须在蓝色的div后面，以便只有底部显示在蓝色框的底部。我希望它看起来像这个演示中的“单一水平曲线”：nicolasgallagher.com/css-drop-shadows-without-images/demo

注意：HTML结构一定不能改变，如果可能的话！

HTML：

hola

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链接？

我想实现的是：