Html 删除框阴影的右侧

Remove right side of box shadow

提问by Otis Wright

I have found lots of posts similar to what I am asking and have been working away at this for hours and finally decided I should probably seek some exterior advice :).

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

I am trying to shadow 3 sides of an div using box-shadow I want the right side to be shadowless but cannot figure it out there are lots of posts on how to un-shadow the top but after countless efforts i could not even apply this.

我正在尝试使用 box-shadow 为 div 的 3 个边添加阴影.

采纳答案by Ivozor

I think you have 2 options:

我认为你有两个选择：

1) Set your shadow's horizontal alignment to the left (negative values).

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

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

Although this way you won't have the same shadow size in the top and bottom.

虽然这样你不会在顶部和底部有相同的阴影大小。

2) Use a div inside a div and apply shadow to each one.

2) 在 div 内使用一个 div 并对每个 div 应用阴影。

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

Then you'll have to ajust the size for the one you want.

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

Here, have a jsfiddle: http://jsfiddle.net/EwgKF/19/

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

回答by Luke

If you're willing to use experimental technology with only partial support, you could use the clip pathproperty.

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

This will provide you with exactly the effect I believe you are after: a normal box shadow on the top, left and bottom edges and clean cut-off on the right edge. A lot of other SO solutions to this issue result in shadows that "dissipate" as they near the edge that is to have no shadow.

这将为您提供我相信您所追求的效果：顶部、左侧和底部边缘的正常框阴影和右侧边缘的干净截断。对此问题的许多其他 SO 解决方案会导致阴影“消散”，因为它们靠近没有阴影的边缘。

In your case you would use clip-path: inset(px px px px); where the pixel values are calculated from the edge in question (see below).

在您的情况下，您将使用 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);
}

This will clip the div in question at:

这将剪辑有问题的 div：

• 5 pixels above the top edge (to include the shadow)
• 0 pixels from the right edge (to hide the shadow)
• 5 pixels below the bottom edge (to include the shadow)
• 5 pixels outside of the left edge (to include the shadow)

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

Note that no commas are required between pixel values.

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

The size of the div can be flexible.

div 的大小可以是灵活的。

回答by romiguelangel

Use :afterpseudo element : http://jsfiddle.net/romiguelangel/YCh6F/

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

HTML

HTML

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

CSS

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
}

回答by Juan Ordaz

NONE of the above responses will work.

以上反应均无效。

I am assuming you are using bootstrap or a library that has box-shadow in the default buttons. Here is the solution:

我假设您使用的是引导程序或默认按钮中具有 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      */
}

(if you don't remove the initial box-shadow, then when you tried to remove the offset from the right, the left side will be double the size of the top and bottom. That's why you have to remove it. If you are not sure what the default colors of the box-shadow of the library you are using. Just go to the source code and find-out, not hard at all)

（如果你不移除初始的 box-shadow，那么当你试图移除右边的偏移量时，左边的大小将是顶部和底部的两倍。这就是你必须移除它的原因。如果你是不确定您正在使用的库的 box-shadow 的默认颜色是什么。只需转到源代码并查找，一点也不难）

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

如果您只需要为您的按钮添加 box-shadow 或在除右侧之外的所有侧输入，请执行以下操作：

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

回答by Surinder ツ

try using this example hasn't right side border:

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

JsBin Demo

JsBin 演示