移除框阴影的右侧

Question

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

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

Answer 1

我想你有两个选择：

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 2

如果你愿意只使用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 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      */
}

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

如果你只需要在你的按钮上添加box-shadow或者在右边输入除了右边的输入：

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