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

How to make shadow on border-bottom?

提问by Talha Ashraf

I need to apply the border shadow on border-bottom by CSS3. I just want to apply CSS3 shadow on bottom. Is this possible?

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

回答by Harmen

Try:

尝试：

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

<div>wefwefwef</div>

It generally adds a 1px blurred shadow 1px from the bottom of the box

它一般会在距离盒子底部 1px 的地方添加一个 1px 的模糊阴影

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

回答by Bill Bruilding

The issue is shadow coming out the side of the containing div. In order to avoid this, the blur value must equal the absolute value of the spread value.

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

covered in depth here

在这里深入介绍

回答by Moin Zaman

use box-shadowwith no horizontal offset.

使用box-shadow没有水平偏移。

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

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

eg.

例如。

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

<div>wefwefwef</div>

There will be a slight shadow on the sides with a large blur radius (5px in above example)

模糊半径较大的侧面会有轻微的阴影（上例中为5px）

回答by Robert Wade

New method for an old question

老问题的新方法

It seems like in the answers provided the issue was always how the box border would either be visible on the left and right of the object or you'd have to inset it so far that it didn't shadow the whole length of the container properly.

似乎在答案中提供的问题始终是框边框如何在对象的左侧和右侧可见，或者您必须将其插入到目前为止它没有正确遮蔽容器的整个长度.

This example uses the :afterpseudo element along with a linear gradient with transparency in order to put a drop shadow on a container that extends exactly to the sides of the element you wish to shadow.

此示例使用:after伪元素以及具有透明度的线性渐变，以便在容器上放置一个阴影，该阴影正好延伸到您要阴影的元素的侧面。

Worth notingwith this solution is that if you use padding on the element that you wish to drop shadow, it won't display correctly. This is because the afterpseudo element appends it's content directly after the elements inner content. So if you have padding, the shadow will appear inside the box. This can be overcome by eliminating padding on outer container (where the shadow applies) and using an inner container where you apply needed padding.

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

Example with padding and background color on the shadowed div:

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

If you want to change the depth of the shadow, simply increase the heightstyle in the afterpseudo element. You can also obviously darken, lighten, or change colors in the linear gradient styles.

如果要改变阴影的深度，只需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>

回答by Galgóczi Levente

funny, that in the most answer you create a box with the text (or object), instead of it create the text (or object) div and under that a box with 100% width (or at least what it should) and with height what equal with your "border" px... So, i think this is the most simple and perfect answer:

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

<h3>Your Text</h3><div class="border-shadow"></div>

<h3>Your Text</h3><div class="border-shadow"></div>

and the css:

和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!"

}

}

Here you can experiment with the radius, etc. easy: https://www.cssmatic.com/box-shadow

在这里你可以试验半径等，很简单：https: //www.cssmatic.com/box-shadow

回答by Red

I'm a little late on the party, but its actualy possible to emulate borders using a box-shadow

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

EDIT: I understood this question wrong, but I will leave the awnser as more people might misunderstand the question and came for the awnser I supplied.

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