花哨的CSS阴影，可能吗？

Question

我目前正在PSD编码HTML/CSS文件，设计师使用了一些有点花哨的阴影。我无法想办法在CSS中做到这一点 - 这可能吗？ - 如果是的话，怎么样？

这是影子：

Answer 1

根据thgaskell的建议链接，您可以使用#box：before和#box：after添加2个稍小的索引小于0的框并为它们添加阴影。也可以使用阴影的颜色作为背景颜色。

这是一个尝试执行此操作的codepen（您可以调整它以适合您的目的）： http://codepen.io/walmik/pen/fyidv

这是另一个调整到您附加的图像： http://codepen.io/walmik/pen/eqpGk

<强> HTML：

<div id='box'>Fancy Shadow</div>

<强> CSS：

#box {
  position: relative;
  width: 600px;
  height: 300px;
  padding: 20px;
  background: #fff;
  text-align: center;
  font-size: 24px;
  color: #333;
  font-family: Georgia. serif;
  box-shadow: 0px 0px 2px #888;
}

#box:before, #box:after
{
  /*this is like appending a div element before the box:*/
  z-index: -1; 
  position: absolute; 
  content: "";
  bottom: 0px;
  left: 0px;
  width: 45%; 
  height: 60%;
  top: 15px;
  max-width:300px;
  background: #888; 
  -webkit-box-shadow: -2px -15px 30px #888;   
  -moz-box-shadow: -2px -15px 30px #888;
  box-shadow: -2px -15px 30px #888;
}

#box:after
{ 
  /*this is like appending a div element after the box:*/
  right: 3px;
  left: auto;
  -webkit-box-shadow: 2px -15px 30px #888;   
  -moz-box-shadow: 2px -15px 30px #888;
  box-shadow: 2px -15px 30px #888;
  -webkit-transform: rotate(1deg);    
  -moz-transform: rotate(1deg);   
  -o-transform: rotate(1deg);
  -ms-transform: rotate(1deg);
  transform: rotate(1deg);
}

Answer 2

您正在寻找的是CSS3属性box-shadow。语法如下：

box-shadow：h-shadow v-shadow blur spread color inset;

您在上图中所做的投影有一个渐变，目前CSS无法实现，但类似的阴影可能是这样的：

box-shadow：-10px -10px 20px＃000;

你需要玩这些数字才能把它带到你喜欢的地方，但这应该可以帮助你开始。