如何仅在一条边上禁用阴影?

时间:2011-05-29 19:15:22

标签: html css

如何摆脱下方红色区域的阴影?我见过其他类似的问题,但不知道如何在这里申请。

Rid it

现场演示: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代码技巧。

4 个答案:

答案 0 :(得分:0)

你不能。

为了解决这个问题,请不要分别将“阴影”分配给“关于我”和“asas”框,而是将它们包装在一个容器中并将阴影应用于它。

答案 1 :(得分:0)

您是否尝试使用特定的类/ ID /任何选择器和插入来定位该元素 下面的代码?

-moz-box-shadow:none;  
-webkit-box-shadow: none;  
box-shadow: none;

答案 2 :(得分:0)

给出的CSS和HTML不会产生图像中显示的显示,所以我不得不猜测,但尝试将asas框包装在另一个带有底部填充和隐藏溢出的框中。

答案 3 :(得分:0)

如果我理解正确,你就会遇到中间李有阴影的问题,而你只想让第一个(也许是最后一个)李有阴影。

如果我理解正确,您可以使用li:first-child和li:last-child将阴影设置为列表的第一个和最后一个元素。

但事实并非如此。如果要在.tip上隐藏左阴影,则应将box-shadow的第一个参数设置为0px。第一个参数是水平偏移。

喜欢这里: http://jsfiddle.net/rf47W/

这是你想要的吗?