如何在边框底部制作阴影？

Question

我需要通过 CSS3 在border-bottom 上应用边框阴影。我只想在底部应用 CSS3 阴影。这可能吗？

Answer 1

使用没有水平偏移的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）的侧面会有轻微阴影

Answer 2

问题是阴影从包含 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>

深度报道here

Answer 3

试试：

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

<div>wefwefwef</div>

一般会在距离框底1px的地方添加一个1px的模糊阴影

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

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>

编辑：我对这个问题的理解是错误的，但我会留下答案，因为更多的人可能会误解这个问题并为我提供的答案而来。

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>

Answer 6

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

<h3>Your Text</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

Answer 7

在css下：

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