如何在border-bottom上制作阴影？

Question

我需要在CSS3中的border-bottom上应用border shadow。 我只想在下边缘应用CSS3阴影。 这种可能吗？

- Talha Ashraf

---

这个问题在这里有详细的讨论：https://dev59.com/s2035IYBdhLWcg3wYO11 - Bill Bruilding

Answer 1

问题是阴影从包含 div 的侧面出现。为了避免这种情况，模糊值必须等于扩散值的绝对值。

问题是阴影从包含div的侧面溢出。为了避免这种情况，模糊值必须等于扩散值的绝对值。

div {
  -webkit-box-shadow: 0 4px 6px -6px #222;
  -moz-box-shadow: 0 4px 6px -6px #222;
  box-shadow: 0 4px 6px -6px #222;
}

<div>wefwefwef</div>

这里深入探讨了底部阴影的CSS3实现

。

- Bill Bruilding

Answer 2

尝试:

div{
-webkit-box-shadow:0px 1px 1px #de1dde;
 -moz-box-shadow:0px 1px 1px #de1dde;
 box-shadow:0px 1px 1px #de1dde;
  }

<div>wefwefwef</div>

一般会在盒子底部距离1像素处添加1像素的模糊阴影。

box-shadow: [horizontal offset] [vertical offset] [blur radius] [color];

- Harmen

---

可以。但我只有底部边框，希望能够填充底部。当我使用上述代码时，左侧和右侧的阴影也出现了。 - Misagh Emamverdi

所有这些答案都不相关 - 因为它总是会创建其他不需要的阴影 :) - Marwen Trabelsi

你看不出来吗？这里没有底部阴影。除了顶部，元素周围到处都是阴影。 - Green

因为它会在整个元素周围产生阴影，所以被踩了。请考虑来自 Bill Bruilding 的答案。 - Arne Cordes

Answer 3

使用 box-shadow 时不带水平偏移量。

http://www.css3.info/preview/box-shadow/

例如：

div {
  -webkit-box-shadow: 0 10px 5px #888888;
  -moz-box-shadow: 0 10px 5px #888888;
  box-shadow: 0 10px 5px #888888;
}

<div>wefwefwef</div>

在侧边将有轻微的阴影，并且模糊半径较大（上述示例中为5px）

- Moin Zaman

Answer 4

我有些晚了，但实际上可以使用box-shadow来模拟边框。

.border {
  background-color: #ededed;
  padding: 10px;
  margin-bottom: 5px;
}

.border-top {
  box-shadow: inset 0 3px 0 0 cornflowerblue;
}

.border-right {
  box-shadow: inset -3px 0 0 cornflowerblue;
}

.border-bottom {
  box-shadow: inset 0 -3px 0 0 cornflowerblue;
}

.border-left {
  box-shadow: inset 3px 0 0 cornflowerblue;
}

<div class="border border-top">border-top</div>
<div class="border border-right">border-right</div>
<div class="border border-bottom">border-bottom</div>
<div class="border border-left">border-left</div>

编辑：我对这个问题的理解有误，但我会保留答案，因为可能还有其他人会误解问题并来寻找我提供的答案。

- Red

---

这正是我正在寻找的，所以非常感谢。 - Mennauu

Answer 5

一种新的解决方法

在以前的答案中，问题似乎总是关于如何让盒子边框要么显示在对象的左右两侧，要么你必须将其嵌入到无法正确阴影整个容器长度的地方。

这个例子使用了 :after 伪元素和一个带有透明度的线性渐变来在容器上加上投影，该容器恰好延伸到您想要投影的元素的两侧。

需要注意的是，如果您在要投影的元素上使用了填充，它将无法正确显示。 这是因为 after 伪元素直接在元素内部内容之后添加其内容。 因此，如果您有填充，则阴影将出现在盒子内部。 可以通过消除外部容器（应用阴影的地方）上的填充并使用内部容器来应用所需的填充来克服这个问题。

具有填充和阴影div的背景颜色的示例：

如果您想要更改阴影的深度，请简单地增加 after 伪元素中的 height 样式。 您还可以在线性渐变样式中显然加深、减淡或更改颜色。

body {
  background: #eee;
}

.bottom-shadow {
  width: 80%;
  margin: 0 auto;
}

.bottom-shadow:after {
  content: "";
  display: block;
  height: 8px;
  background: transparent;
  background: -moz-linear-gradient(top, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(   startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}

.bottom-shadow div {
  padding: 18px;
  background: #fff;
}

<div class="bottom-shadow">
  <div>
    Shadows, FTW!
  </div>
</div>

- Robert Wade

Answer 6

在CSS下面：

box-shadow: 5px 5px 10px rgba(0,0,0, 0.3); 

- Myriam Ro

Answer 7

有趣的是，在大多数答案中，您创建了一个带有文本（或对象）的框，而不是创建文本（或对象）div，并在其下创建一个具有100％宽度（或至少应该是）和高度等于您的“边框”px的框...所以，我认为这是最简单和完美的答案：

<h3>您的文本</h3><div class="border-shadow"></div>

和CSS：

    .shadow {
        width:100%;
        height:1px; // = "border height (without the shadow)!"
        background:#000; // = "border color!"
        -webkit-box-shadow: 0px 1px 8px 1px rgba(0,0,0,1); // rbg = "border shadow color!"
        -moz-box-shadow: 0px 1px 8px 1px rgba(0,0,0,1); // rbg = "border shadow color!"
        box-shadow: 0px 1px 8px 1px rgba(0,0,0,1); // rbg = "border shadow color!"

}

在这里，您可以轻松地尝试半径等：https://www.cssmatic.com/box-shadow

- Galgóczi Levente