Question

我发现很多帖子与我的要求类似，并且已经在这里工作了几个小时，最后决定我应该寻求一些外部建议:)。

我试图使用盒子阴影遮住div的3个边我希望右边没有阴影但是无法弄明白有很多关于如何取消阴影顶部的帖子但是经过无数次的努力我无法做到甚至适用于此。

Answer 1

如果您愿意仅使用partial support的实验技术，则可以使用clip path property。

这将为您提供我认为您所追求的效果：顶部，左侧和底部边缘的正常方框阴影以及右侧边缘的清晰截止。针对这个问题的许多其他SO解决方案会导致阴影“消散”，因为它们靠近没有阴影的边缘。

在你的情况下你会使用clip-path：inset（px px px px）;其中像素值是根据相关边缘计算的（见下文）。

#container {
    box-shadow: 0 0 5px rgba(0,0,0,0.8);
    clip-path: inset(-5px 0px -5px -5px);
}

这将剪切有问题的div：

顶部边缘上方5个像素（包括阴影）
右边缘0像素（隐藏阴影）
底边下方5个像素（包括阴影）
左边缘外5个像素（包括阴影）

请注意，像素值之间不需要逗号。

div的大小可以灵活。

Answer 2

我认为你有两个选择：

1）将阴影的水平对齐方式设置为左侧（负值）。

box-shadow: -30px 0px 10px 10px #888888;

虽然这样你在顶部和底部都不会有相同的阴影尺寸。

2）在div中使用div并为每个div应用阴影。

.div1
{
    box-shadow: -30px 10px 20px 10px #888888;
}
.div2
{
    box-shadow: -30px -10px 20px 10px #888888;
}

然后你必须调整你想要的尺寸。

在这里，有一个jsfiddle：http://jsfiddle.net/EwgKF/19/

Answer 3

使用:after伪元素：http://jsfiddle.net/romiguelangel/YCh6F/

<强> HTML

<ul>
    <li><a href="#">item</a></li>
    <li class="hello"><a href="#">item with after element</a></li>
</ul>

<强> CSS

li {
    display: block;
    position: relative;
    -webkit-box-shadow: 0 0 2px 1px gray
}

.hello:after{
    display: block;
    background-color: #f3f5f6;
    width: 20px;
    height: 38px;
    content: " ";
    position: absolute;
    top: 0;
    right: -10px
}

Answer 4

尝试使用此示例没有右侧边框：

<强> JsBin Demo

Answer 5

以上任何一项回复均无效。

我假设你使用的是bootstrap或默认按钮中有box-shadow的库。这是解决方案：

.your-btn-class {
    box-shadow: none /* Removes the default box-shadow */
    box-shadow: -0.1rem 0 0 0.2rem rgba(134, 142, 150, 0.5); /* Add your own      */
}

（如果你没有删除初始的盒子阴影，那么当你试图从右边移除偏移时，左侧将是顶部和底部尺寸的两倍。这就是为什么你必须删除它。如果你不确定你正在使用的库的阴影的默认颜色。只需转到源代码并找出，而不是很难）

如果你只需要在你的按钮上添加方框阴影或在右边输入除了右边的输入：

.your-btn-class {
     box-shadow: -0.1rem 0 0 0.2rem rgba(134, 142, 150, 0.5);
}

移除框阴影的右侧

5 个答案: