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

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的一侧.为了避免这种情况,模糊值必须等于扩展值的绝对值.

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>

在这里深入介绍

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

我参加聚会有点晚了，但实际上可以使用 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上具有填充和背景色的示例：

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

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>