html - 移除盒子阴影的右侧

Question

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

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

Answer 1

更新：

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

---

原答案：

如果您愿意使用仅部分支持的实验技术，则可以使用该clip path属性。

这将为您提供我相信您所追求的效果：顶部、左侧和底部边缘的正常框阴影和右侧边缘的干净截止。针对这个问题的许多其他 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 演示

Answer 5

以上响应均无效。

我假设您正在使用引导程序或在默认按钮中具有 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，那么当您尝试从右侧删除偏移量时，左侧将是顶部和底部大小的两倍。这就是您必须删除它的原因。如果您是不确定您正在使用的库的 box-shadow 的默认颜色是什么。只需转到源代码并找出来，一点也不难）

If you just need to add box-shadow to you button or input on all side except the right do:

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