现在,我正在为父级(.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);
}
但是孩子的阴影出现在父母的顶部:
而且我不能将父母放在孩子的顶部,因为父母的阴影会显示在孩子的顶部。
如何在使两个元素看起来一样的同时保留两个阴影?
实时示例: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);
希望这对您有用。