移除盒子阴影的右侧答案

【问题标题】：Remove right side of box shadow移除盒子阴影的右侧
【发布时间】：2012-12-28 09:30:46
【问题描述】：

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

我正在尝试使用 box-shadow 对 div 的 3 面进行阴影我希望右侧没有阴影但无法弄清楚有很多关于如何取消顶部阴影的帖子但经过无数次努力我无法甚至应用这个。

【问题讨论】：

请在jsfiddle.net 中创建一个示例，或者发布您尝试过的代码
我知道这是一个老歌，但你知道应用 box-shadow 的 div 的大小吗？即 div 有固定大小还是灵活？

标签： html css

【解决方案1】：

更新：

clip-path 现在 (2020) 已在所有主要浏览器中得到支持。

原答案：

如果您愿意只使用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的大小可以灵活调整。

【讨论】：

我会强调，恕我直言，这是最好的方法。现在（2019 年）所有主流浏览器都支持 clip-path，除了 Edge/IE，但现在当基于 Chromium 的 Edge 退出时 - 我认为这不再是问题。
您可以使用clip-path 方法来创建将两个元素合并在一起的效果，从而在两者之间产生无缝阴影。使用宽度 calc() 将两个元素彼此相邻放置。然后将 box-shadow 添加到两个元素，然后仅在其中一个元素上添加剪辑路径。将 clip-path'd 元素的 z-index 设置为高于 non-clip-path'd 元素。 Here's an example. The horizontal part is one element and the vertical part is a separate element.
这是最好的解决方案。

【解决方案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/

【讨论】：

非常感谢 :) 你是个传奇。
嘿，我刚刚回答了你……没关系……但是你没有接受它……所以也许吧！ :P
剪辑路径为我工作

【解决方案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
}

【讨论】：

【解决方案4】：

尝试使用这个没有右侧边框的例子：

JsBin Demo

【讨论】：

请在您的答案中提供更多详细信息，而不仅仅是 JsBin 链接。

【解决方案5】：

上述响应均无效。

我假设您正在使用引导程序或默认按钮中具有框阴影的库。这是解决方案：

.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，那么当您尝试从右侧删除偏移量时，左侧将是顶部和底部的两倍。这就是您必须删除它的原因。如果你不确定你正在使用的库的 box-shadow 的默认颜色是什么。只要去源代码找出来，一点都不难）

如果您只需要为您的按钮添加框阴影或在除右侧之外的所有侧面输入：

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

【讨论】：