现在,我正在为父级(.map)和子级(.toggle-button)使用框阴影:

.map {
    position: fixed;
    top: 20px;
    right: 0;
    width: 280px;
    height: 280px;
    z-index: 9999;
    box-shadow: 0px 1px 6px 0px rgba(0,0,0,0.3);
}
.map .toggle-button {
    background: #fff;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    cursor: pointer;
    display: block;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    left: -20px;
    width: 20px;
    height: 68px;
    box-shadow: 0px 1px 6px 0px rgba(0,0,0,0.3);
}


但是孩子的阴影出现在父母的顶部:

javascript - 子元素的框阴影出现在父元素的顶部-LMLPHP

而且我不能将父母放在孩子的顶部,因为父母的阴影会显示在孩子的顶部。

如何在使两个元素看起来一样的同时保留两个阴影?

实时示例:https://desolate-island-90618.herokuapp.com/#!/

最佳答案

我已经为您尝试了一些东西。
您可以尝试这样做吗:

在类.map .toggle-button中更改以下代码

box-shadow: 0px 1px 6px 0px rgba(0,0,0,0.3);


至:

box-shadow: -6px 1px 6px rgba(0, 0, 0, 0.3);


希望这对您有用。

10-07 19:21
查看更多