如何为div创建阴影效果

Question

如何使用CSS将阴影设置为图片中的效果？

这里有一张更好的示意图 http://www.sumoware.com/images/temp/xzxmrkknxgcgmgfn.png

这是我当前的CSS代码：

div{
    -webkit-box-shadow: 76px 50px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 76px 50px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 76px 50px 5px 0px rgba(0,0,0,0.75);}
}

- joshua pogi 28

---

抱歉我的图画不好看，等我把它变美观一些。 - joshua pogi 28

我认为OP想要一个三维阴影，即其边缘对角连接到产生它的原始对象（看起来像一个立方体，而不是两个平面层）。 - Terry

是的，图表有点暗示了这一点，但问题的标题和文本似乎表明它是关于“设置长度”的，这在意义上似乎完全不同。 - light

抱歉，我不知道它叫什么，所以我认为它是一个长度。 - joshua pogi 28

请阅读上面Terry的评论，了解正确提问的方式 :) - light

Answer 1

你唯一的选择是使用多个box-shadow。然而，有一些限制：

• 你必须使用半透明颜色，因为它们会相互显示。
• 你必须手动指定每个box-shadow属性，但你可以通过JS或CSS预处理语言（例如LESS或SASS）以编程方式实现。

div {
  background-color: steelblue;
  box-shadow:
    2px 2px 5px 0px #555,
    4px 4px 5px 0px #555,
    6px 6px 5px 0px #555,
    8px 8px 5px 0px #555,
    10px 10px 5px 0px #555,
    12px 12px 5px 0px #555,
    14px 14px 5px 0px #555,
    16px 16px 5px 0px #555,
    18px 18px 5px 0px #555,
    20px 20px 5px 0px #555,
    22px 22px 5px 0px #555,
    24px 24px 5px 0px #555,
    26px 26px 5px 0px #555,
    28px 28px 5px 0px #555,
    30px 30px 5px 0px #555,
    34px 34px 5px 0px #555,
    36px 36px 5px 0px #555;
  width: 100px;
  height: 100px;
}

<div></div>

我还使用SCSS制作了一个示例：http://codepen.io/anon/pen/WvELEv

您可以使用伪元素来设置阴影的不透明度：

• 在父元素上使用position: relative，并绝对定位伪元素
• 通过将所有基数设置为0，强制伪元素具有与其父元素完全相同的尺寸
• 将box-shadow属性应用于伪元素
• 不要更改background-color以使用rgba()通道，而是使用opacity来控制透明度。

body {
  background-color: yellow;
}
div {
  background-color: steelblue;
  width: 100px;
  height: 100px;
  position: relative;
}
div::before {
  opacity: 0.25;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  box-shadow: 2px 2px 5px 0px #555, 4px 4px 5px 0px #555, 6px 6px 5px 0px #555, 8px 8px 5px 0px #555, 10px 10px 5px 0px #555, 12px 12px 5px 0px #555, 14px 14px 5px 0px #555, 16px 16px 5px 0px #555, 18px 18px 5px 0px #555, 20px 20px 5px 0px #555, 22px 22px 5px 0px #555, 24px 24px 5px 0px #555, 26px 26px 5px 0px #555, 28px 28px 5px 0px #555, 30px 30px 5px 0px #555, 34px 34px 5px 0px #555, 36px 36px 5px 0px #555;
}

<div></div>

- Terry

---

@joshuapogi28 你可以使用略带透明的阴影，但这更加复杂，需要使用伪元素 ;) 我会尽快更新我的答案。 - Terry

你可能还可以使用倾斜的伪元素。 - jbutler483

谢谢。你很棒。你可以使用Bootstrap Glyphicons创建一个Material Icon吗？就像这样？http://assets.materialup.com/uploads/ec59074c-0609-4c2a-ba01-f1d556e8ca6a/teaser.png - joshua pogi 28

@joshuapogi28 可能可以，但如果 Twitter 图标是字形，则必须使用 text-shadow。这是最接近的效果：https://jsfiddle.net/teddyrised/ssexypqb/ - Terry

谢谢，伙计。我在这里找到了我的问题的答案。 http://enjoycss.com/previews/gf_3.html - joshua pogi 28

Answer 2

可以使用伪元素实现另一种效果：

div {
  height: 100px;
  width: 100px;
  background: gray;
  position: relative;
}
div:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  height: 30px;
  width: 100%;
  background: dimgray;
  transform: skewX(45deg);
  transform-origin: top left;
  box-shadow: 0 10px 20px dimgray;
}
div:after {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  width: 30px;
  height: 100%;
  background: dimgray;
  transform: skewY(45deg);
  transform-origin: top left;
  box-shadow: 10px 0 20px dimgray;
}

<div></div>

- jbutler483