如何去除下方红色区域的阴影?我看过其他类似的问题,但不知道如何在此处应用。
现场演示:http://jsfiddle.net/xFa9M/
CSS:-
#list li{
border: 2px solid black;
border-top-width: 1px;
border-bottom-width: 1px;
padding: 4em;
z-index: 1;
}
#list li .tip{
position: absolute;
left: 200px;
top: 0px;
border: 2px solid black;
border-left-width: 0px;
z-index: 0;
display: none;
}
#list li:hover{
-moz-box-shadow: -5px 5px 5px black;
-webkit-box-shadow: -5px 5px 5px black;
box-shadow: -5px 5px 5px #555;
}
#list li:hover .tip{
-moz-box-shadow: -5px 5px 5px black;
-webkit-box-shadow: -5px 5px 5px black;
box-shadow: -5px 5px 5px #555;
}
HTML:-
<ul id="list">
<li class="top">About Me
<div class="tip">Asas</div>
<li>Garage
<li class="bottom">My Blog
</ul>
请注意,如果需要,我可以使用 JS 代码技巧。
最佳答案
如果我理解正确,你遇到了中间里有阴影的问题,而你只希望第一个(也许是最后一个)里有阴影。
如果我理解正确,您可以使用 li:first-child 和 li:last-child 将阴影设置为列表的第一个和最后一个元素。
但事实并非如此。如果你想在你的.tip 上隐藏左边的阴影,你应该将 box-shadow 的第一个参数设置为 0px。第一个参数是水平偏移。
喜欢这里: http://jsfiddle.net/rf47W/
这就是您要找的吗?
关于html - 如何仅在一个边缘上禁用阴影?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6169854/