我无法获得带有阴影的阴影元素(还有阴影)。 有什么帮助吗?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链接?
我想实现的是: