Question

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

Answer 1

尝试：

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 2

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

＆＃13;

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

＆＃13;

<div>wefwefwef</div>

＆＃13;

深度涵盖here

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）

Answer 4

旧问题的新方法

似乎在提供的答案中，问题始终是如何在对象的左侧和右侧看到框边框，或者您必须将其嵌入到目前为止它没有阴影容器的整个长度都适当。

此示例使用:after伪元素以及具有透明度的线性渐变，以便在容器上放置阴影，该容器完全延伸到要阴影的元素的边。

值得注意这个解决方案是，如果你在要删除阴影的元素上使用填充，它将无法正确显示。这是因为after伪元素直接在元素内部内容之后附加了它的内容。因此，如果你有填充，阴影将出现在框内。这可以通过消除外部容器（阴影适用的地方）上的填充和使用内部容器来解决，在那里应用所需的填充。

带阴影的div上的填充和背景颜色的示例：

如果要更改阴影的深度，只需增加height伪元素中的after样式即可。您还可以在线性渐变样式中明显变暗，变亮或更改颜色。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 5

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

<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 6

我参加聚会有点晚了，但是实际上可以使用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>

编辑：我对这个问题的理解是错误的，但是我会离开遮阳篷，因为更多的人可能会误解这个问题，而来到我提供的遮阳篷。

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

6 个答案: