Question

我尝试了很多4面阴影，使其成为三面，并且不知道如何做到这一点。在Stack中找到了一个顶部和底部的阴影问题，但这对我没有帮助。我在下面给出了一个4面阴影的例子，我需要知道怎样才能删除阴影的一侧特别是LEFT。有可能吗？

0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);

Answer 1

您可以使用box-shadow重叠2个阴影，在元素的3个边上实现简单的阴影：

box-shadow: 3px 3px 3px 0 #999, 3px -3px 3px 0 #999;  /* No shadow on the left */

这基本上将两个阴影加在一起以获得所需的效果（我将其称为阴影方程式）：

               _____        _____
       |   +        |   =        |
  _____|            |       _____|

为什么会这样？

此CSS属性的语法为：box-shadow: offset-x | offset-y | blur-radius | spread-radius | color。通过重叠具有不同偏移（起始位置）的多个阴影，您可以控制阴影出现在元素的哪一侧。

box-shadow: 3px 3px 3px 0 #999从顶部创建一个与右和3px 向下的偏移量为3px的阴影，因此阴影将显示在元素的右和底部侧。

box-shadow: 3px -3px 3px 0 #999从顶部创建一个与右和3px 向上的偏移量为3px的阴影，因此阴影将显示在元素的右侧和顶部侧面。

由于这两个阴影合并（重叠），您将在元素的顶部，右和底部两侧看到阴影，但不是左。

变体形式

当然，有许多不同的阴影组合，但这个例子的4个基本变体是：

box-shadow: 3px 3px 3px 0 #999, -3px 3px 3px 0 #999;  /* No shadow on the top */
box-shadow: -3px 3px 3px 0 #999, -3px -3px 3px 0 #999;  /* No shadow on the right */
box-shadow: 3px -3px 3px 0 #999, -3px -3px 3px 0 #999;  /* No shadow on the bottom */
box-shadow: 3px 3px 3px 0 #999, 3px -3px 3px 0 #999;  /* No shadow on the left */

如何为盒子制作3面阴影？

1 个答案:

为什么会这样？

变体形式