如何仅在元素的一侧创建阴影？

内心的阴影

 .shadow {
   -webkit-box-shadow: inset 0 0 9px #000;
   -moz-box-shadow: inset 0 0 9px #000;
   box-shadow: inset 0 0 9px #000;
 }

<div class="shadow">wefwefwef</div>

更新别人的答案，而不是白色的透明面，因此它也适用于其他颜色背景。

body {
  background: url(http://s1.picswalls.com/wallpapers/2016/03/29/beautiful-nature-backgrounds_042320876_304.jpg)
}

div {
  background: url(https://www.w3schools.com/w3css/img_avatar3.png) center center;
  background-size: contain;
  width: 100px;
  height: 100px;
  margin: 50px;
  border: 5px solid white;
  box-shadow: 0px 0 rgba(0, 0, 0, 0), 0px 0 rgba(0, 0, 0, 0), 0 7px 7px -5px black;
}

<div>
</div>

如果您的背景是纯色的（或可以使用CSS进行复制），则可以通过以下方式使用线性渐变：

div {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 5px, #fff 5px, #fff 100%)
}

<div>
<p>Foobar</p>
<p>test</p>
</div>

这将在元素底部生成一个5px的渐变，从不透明度为30％的黑色到完全透明。元素的其余部分具有白色背景。当然，更改线性渐变的最后两个色标，可以使背景完全透明。

最好看一下阴影：

.header{
    -webkit-box-shadow: 0 -8px 73px 0 rgba(0,0,0,0.2);
    -moz-box-shadow: 0 -8px 73px 0 rgba(0,0,0,0.2);
    box-shadow: 0 -8px 73px 0 rgba(0,0,0,0.2);
}

该代码当前在stackoverflow网站上使用。

您可以这样做：

通用语法：

selector {
   box-shadow: topBoxShadow, bottomBoxShadow, rightBoxShadow, leftBoxShadow
}

范例：我们只想用红色制作底盒阴影，

为此，我们必须设置所有侧面选项，在其中我们必须设置底部框阴影选项并将所有其他选项设置为空，如下所示：

.box {
     -moz-box-shadow: 0 0 0 transparent ,0 0 10px red, 0 0 0 transparent, 0 0 0 transparent
     -o-box-shadow: 0 0 0 transparent ,0 0 10px red, 0 0 0 transparent, 0 0 0 transparent
     -webkit-box-shadow: 0 0 0 transparent ,0 0 10px red, 0 0 0 transparent, 0 0 0 transparent
     box-shadow: 0 0 0 transparent ,0 0 10px red, 0 0 0 transparent, 0 0 0 transparent
}

这段代码笔（不是我本人）演示了一种非常简单的方法，并且很好地演示了其他方面：

box-shadow: 0 5px 5px -5px #333;

https://codepen.io/zeckdude/pen/oxywmm

您也可以在底部进行渐变-这对我很有帮助，因为我想要的阴影在已经是半透明的元素上，因此我不必担心任何裁剪：

&:after {
      content:"";
      width:100%;
      height: 8px;
      position: absolute;
      bottom: -8px;
      left: 0;
      background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
    }

只需使“底部”和“高度”属性匹配，并将您的rgba值设置为您希望它们位于阴影顶部/底部的任何值即可

我还需要阴影，但仅在图像下方，并设置在稍微偏左和偏右的位置。这为我工作：

.box-shadow {
   -webkit-box-shadow: 5px 35px 30px -25px #888888;
      -moz-box-shadow: 5px 35px 30px -25px #888888;
           box-shadow: 5px 35px 30px -25px #888888;
}

应用于此的元素是一个页面范围的图像（980像素x 300像素）。

如果在修改设置时有帮助，它们将按以下方式运行：

水平阴影，垂直阴影，模糊距离，散布（即阴影大小）和颜色。

您也clip-path可以剪裁（隐藏）所有溢出的边缘，但要显示的边缘：

.shadow {
  box-shadow: 0 4px 4px black;
  clip-path: polygon(0 0, 100% 0, 100% 200%, 0 200%);
}

请参阅剪切路径（MDN）。的参数polygon是左上角，右上角，右下角和左下角。通过将底部边缘设置为200%（或大于的任何数字100%），可以将溢出限制为仅底部边缘。

只使用包含div且溢出设置为隐藏且底部有填充的div怎么样？这似乎是最简单的解决方案。

抱歉地说我自己没想到这个，但在其他地方看到了。

使用元素包装元素可以得到盒子阴影和溢出：隐藏在包装纸上，可以使多余的盒子阴影消失并仍然具有可用的边框。这也解决了由于扩散而元素看起来较小的问题。

像这样：

#wrapper { padding-bottom: 10px; overflow: hidden; }
#elem { box-shadow: 0 0 10px black; }

内容在这里

当必须在纯CSS中完成时，它仍然是一个聪明的解决方案！

正如乔根埃文斯所说。

只需使用spread参数使阴影变小：

.shadow {
  -webkit-box-shadow: 0 6px 4px -4px black;
  -moz-box-shadow: 0 6px 4px -4px black;
  box-shadow: 0 6px 4px -4px black;
}

<div class="shadow">Some content</div>

现场演示：http：//dabblet.com/gist/a8f8ba527f5cff607327

为了在侧面看不到阴影，展开半径（的绝对值）（第4个参数）必须与模糊半径（第3个参数）相同。

我想这就是你的追求？

.shadow {
  -webkit-box-shadow: 0 0 0 4px white, 0 6px 4px black;
  -moz-box-shadow: 0 0 0 4px white, 0 6px 4px black;
  box-shadow: 0 0 0 4px white, 0 6px 4px black;
}

<div class="shadow">wefwefwef</div>

最好阅读规范。没有box-shadow-bottom属性，正如Lea指出的那样，您应始终将无前缀属性放在前缀属性的底部。

所以是：

.shadow {
  -webkit-box-shadow: 0px 2px 4px #000000;
  -moz-box-shadow: 0px 2px 4px #000000;
  box-shadow: 0px 2px 4px #000000;
}

<div class="shadow">Some content</div>

如果背景颜色固定，则可以使用两个与背景颜色相同的遮罩阴影来隐藏侧阴影效果，并且blur = 0，例如：

box-shadow: 
    -6px 0 white,         /*Left masking shadow*/
    6px 0 white,          /*Right masking shadow*/
    0 7px 4px -3px black; /*The real (slim) shadow*/

请注意，黑色阴影必须是最后一个阴影，并且具有负扩展（-3px），以防止其扩展到角落之外。

这里是小提琴（更改遮罩阴影的颜色以查看其实际工作原理）。

div{
    width: 100px;
    height: 100px;
    border: 1px solid pink;
    box-shadow: -6px 0 white, 6px 0 white, 0 7px 5px -2px black;
}

<div></div>