如何在元素的一侧添加盒子阴影？

Question

我需要在某些 块级元素 上创建一个 box-shadow，但只想让阴影显示在 (例如) 它的右侧。我的做法是将带有 box-shadow 的内部元素包裹在一个外部元素中，该外部元素具有 padding-right 和 overflow:hidden;，以便阴影的另外三个边不可见。

有没有更好的方法来实现这一点？比如说 box-shadow-right？

编辑：我的意图是仅创建阴影的垂直部分，与规则 background:url(shadow.png) 100% 0% repeat-y 的 repeat-y 所做的完全相同。

- tillda

---

考虑到 CSS 在盒阴影方面的工具有限，我认为你的方法已经相当不错了。它不会太乱，并且在语义方面影响相对较小：只有一个无意义的 div。 - Bazzz

这里有一个漂亮的CSS侧边阴影：https://dev59.com/9GIj5IYBdhLWcg3wIx3W#20596554 - Armel Larcier

这绝对是最好的答案！\o/ https://dev59.com/FW435IYBdhLWcg3w9FHi#62366856 谢谢！ - Yann Dìnendal

Answer 1

可以使用box-shadow规则的阴影扩展属性：

.myDiv
{
  border: 1px solid #333;
  width: 100px;
  height: 100px;
  box-shadow: 10px 0 5px -2px #888;
}

<div class="myDiv"></div>

第四个属性-2px是阴影扩散，您可以使用它来更改阴影的扩散程度，使其看起来只在一侧产生阴影。

这也使用了阴影定位规则，10px将其发送到右侧（水平偏移），而0px使其保持在元素下方（垂直偏移）。 5px是模糊半径 :) 这里有一个例子。

- Kyle

---

谢谢你指出我不知道的事情，但我的意图是 仅仅 创建阴影的垂直部分，就像 background:url(shadow.png) 100% 0% repeat-y 所做的那样。请修改一下，使之更加通俗易懂，但不要改变原本的意思。 - tillda

@Tillda，你应该将这个回答标记为最佳答案，这样其他寻找解决方案的人就可以看到它了。我差点因为阅读评论和被接受的答案而放弃使用这种样式的方法。 - Devin Rhode

如果你不希望阴影在角落处衰减，这个方法效果很好。我自己也想出了这个解决方案，但在大多数情况下（对于单侧的阴影），让阴影比元素小是错误的，因为这样会破坏“凸起”或“3D”的视觉效果（如果有意这样做）。 - Steven Lu

但这个阴影没有模糊效果，如果加入模糊效果，它就会从其他部分显现出来。如果你通过减少扩散来解决这个问题，那么它会在你实际想要的一侧过早地结束。唉呀呀。。。 - Muhammad Umer

@Amicable：这可以做到，但是顶部和底部会有轻微的阴影：http://jsfiddle.net/6UFX7/8689/ - Kyle

Answer 2

clip-path是目前（2020年）实现元素特定边缘的盒子阴影的最简单方法之一，尤其在所需效果为特定边缘上的“清晰切割”阴影时（我认为这就是原问题的提出者最初寻找的内容），如下图所示：

.shadow-element {
    border: 1px solid #333;
    width: 100px;
    height: 100px;
    box-shadow: 0 0 15px rgba(0,0,0,0.75);
    clip-path: inset(0px -15px 0px 0px);
}

<div class="shadow-element"></div>

...与这样一个减弱/缩小/变薄的阴影相反：

.shadow-element {
    border: 1px solid #333;
    width: 100px;
    height: 100px;
    box-shadow: 15px 0px 15px -10px rgba(0,0,0,0.75);
}

<div class="shadow-element"></div>

只需将以下CSS应用于相关元素即可：

box-shadow: 0 0 Xpx [hex/rgba]; /* note 0 offset values */
clip-path: inset(Tpx Rpx Bpx Lpx);

说明：

• Tpx 设置顶部阴影的可见性
• Rpx 右侧
• Bpx 底部
• Lpx 左侧

如果希望隐藏阴影，请在相应边缘处输入值 0，如果需要显示阴影，请在相应边缘处输入负值（与盒子阴影模糊半径 - Xpx 相同）。

- Luke

---

非常感谢！这太完美了！ - Yann Dìnendal

我认为，对于不需要支持IE11的人来说，这是现在最好的答案。谢谢！ - Webber

完美。 CSS有很多不为人知的东西。第一次看到时几乎听起来像是编造的。 - m4heshd

令人惊叹！！ - Yaron Levi

天才。这应该是被接受的答案。 - undefined

Answer 3

我自己制作的解决方案，易于编辑：

HTML:

<div id="anti-shadow-div">
    <div id="shadow-div"></div>
</div>​

CSS：

#shadow-div{
    margin-right:20px; /* Set to 0 if you don't want shadow at the right side */
    margin-left:0px; /* Set to 20px if you want shadow at the left side */
    margin-top:0px; /* Set to 20px if you want shadow at the top side */
    margin-bottom:0px; /* Set to 20px if you want shadow at the bottom side */
    box-shadow: 0px 0px 20px black; 
    height:100px;
    width:100px;
    background: red;
}

#anti-shadow-div{
    margin:20px;
    display:table;
    overflow:hidden;
}​

Demo:
http://jsfiddle.net/jDyQt/103

- Puyol

---

似乎这是最直观的 - 只有容器div让我感到不满意;) - BananaAcid

这是唯一真正的解决方案。被接受的答案仍然在阴影的顶部和底部有模糊，只是位置不同。 - Jelle Blaauw

这在Microsoft Edge或Internet Explorer 11中对我无效。根据缩放级别，其他边缘仍有一些阴影。不过其他浏览器都没问题。 - Sam

这个答案在 https://dev59.com/FW435IYBdhLWcg3w9FHi#24220224 上的回答与此相同，但没有此答案存在的浏览器兼容性问题。 - Sam

Answer 4

要在最多两个边缘上获得剪裁效果，可以使用带有渐变背景的伪元素。

header::before, main::before, footer::before, header::after, main::after, footer::after {
    display:    block;
    content:    '';
    position:   absolute;
    width:      8px;
    height:     100%;
    top:        0px;
}

header::before, main::before, footer::before {
    left:       -8px;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}

header::after, main::after, footer::after {
    right:      -8px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}

将在通常构成文档的元素左侧和右侧添加一种漂亮的类似阴影的效果。

- Jacek Kuzemczak

---

完美的解决方案，因为它只在元素的一侧添加阴影效果，而不会使标记混乱。 - Liquinaut

与负扩展方法相比，这种方法的优点是不会在角落处收缩。 - Kevin Christopher Henry

@BananaAcid，我为需要的任何人创建了一个演示：http://jsfiddle.net/jDyQt/1198/ - zeckdude

很好，这在Chrome、Safari、Firefox、IE11和Edge上完美运行，对我没有任何副作用。 - Sam

Answer 5

使用::after或::before伪元素添加阴影即可。将其设置为1像素并放置在您想要的任何一侧。下面是添加在顶部的示例。

footer {
   margin-top: 50px;
   color: #fff;
   background-color: #009eff;
   text-align: center;
   line-height: 90px;
   position: relative;
}

footer::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    top: 0;
    left: 0;
    z-index: -1;
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.75);
}

<footer>top only box shadow</footer>

- riegersn

---

这个仍然会溢出边缘，但可能是一些人想要的。 - Sam

Answer 6

这是我的例子：

.box{
        
        width: 400px; 
        height: 80px; 
        background-color: #C9C; 
        text-align: center; 
        font: 20px normal Arial, Helvetica, sans-serif; 
        color: #fff; 
        padding: 100px 0 0 0;
        -webkit-box-shadow: 0 8px 6px -6px black;
           -moz-box-shadow: 0 8px 6px -6px black;
                box-shadow: 0 8px 6px -6px black;
    }

<div class="box">
</div>

- Webpixstudio

Answer 7

这是我做的一个小技巧。

<div id="element"><!--element that I want an one-sided inset shadow from the bottom--></div> 
<div class="one_side_shadow"></div>

1. 在我想要创建单侧阴影的元素下方创建一个<div class="one_side_shadow"></div>（在此示例中，我想要一个来自底部的单侧内嵌阴影，对应的id="element"）

2. 然后创建一个常规的box-shadow，使用负向垂直偏移将阴影向上推到一侧。

`box-shadow: 0 -8px 20px 2px #DEDEE3;`

- user1187135

Answer 8

这里有一个展示每个侧面的CodePen，或者可以使用下面的代码片段进行演示：

.boxes {
  display: flex;
  flex-wrap: wrap;
}

.box {
  margin: 20px;
  border: 1px solid #ccc;
  font-family: Helvetica Neue, Arial, sans-serif;
  font-weight: 100;
  letter-spacing: 2px;
  color: #999;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 1;
  padding: 40px;
  line-height: 1.4em;
}

.top {
  box-shadow: 0 -5px 5px -5px #333;
}

.right {
  box-shadow: 5px 0 5px -5px #333;
}

.bottom {
  box-shadow: 0 5px 5px -5px #333;
}

.left {
  box-shadow: -5px 0 5px -5px #333;
}

<div class="boxes">
  <div class="box top">Top Only</div>
  <div class="box right">Right Only</div>
  <div class="box bottom">Bottom Only</div>
  <div class="box left">Left Only</div>
</div>

- ROOT

Answer 9

这可能是一种简单的方法。

border-right : 1px solid #ddd;
height:85px;    
box-shadow : 10px 0px 5px 1px #eaeaea;

将此分配给任何div

- madhairsilence

Answer 10

这个网站帮助了我：https://gist.github.com/ocean90/1268328（请注意，该网站在本篇文章发布时左右是反过来的...但它们按照预期工作）。以下代码已经进行了修正。

<!DOCTYPE html>
<html>
    <head>
        <title>Box Shadow</title>

        <style>
            .box {
                height: 150px;
                width: 300px;
                margin: 20px;
                border: 1px solid #ccc;
            }

            .top {
                box-shadow: 0 -5px 5px -5px #333;
            }

            .right {
                box-shadow: 5px 0 5px -5px #333;
            }

            .bottom {
                box-shadow: 0 5px 5px -5px #333;
            }

            .left {
                box-shadow: -5px 0 5px -5px #333;
            }

            .all {
                box-shadow: 0 0 5px #333;
            }
        </style>
    </head>
    <body>
        <div class="box top"></div>
        <div class="box right"></div>
        <div class="box bottom"></div>
        <div class="box left"></div>
        <div class="box all"></div>
    </body>
</html>

- ter24