Question

我无法在框内（也带阴影）获得带阴影的元素。有帮助吗？

我认为麻烦在于z-index和位置，但我不能把它放在一起。

圆形阴影必须位于蓝色div后面，以便只有底部显示在蓝色框的底部。我希望它看起来像＆＃34;单水平曲线＆＃34;在此演示中：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;
}

Iqbal我没有看到您的答案中的代码有任何变化。有一个jsfiddle链接？

我想要实现的目标是：

shadow

Answer 1

GOT IT！

:before伪元素在section上，而不在section > div上。此外，正如伊克巴尔所说，section必须处于相对位置。

谢谢！

http://jsfiddle.net/4T9Ac/3/

Answer 2

短暂的变化。

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在旧浏览器中不起作用。

Answer 3

我不是100％想要最终产品的样子，但如果您将section > div:before更改为top: 5%;，则会将黄色框放在另一个框的中间。

阴影框中的css z-index阴影元素

3 个答案: