css - 花哨的 CSS 阴影，可能吗？

Question

我目前正在使用 HTML/CSS 编写一个 PSD 文件，设计者使用了一种有点奇特的阴影。我想不出在 CSS 中做到这一点的方法 - 这可能吗？ - 如果是这样，怎么办？

这是阴影:

Answer 1

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

这是一个尝试执行此操作的代码笔(您可以调整它以适合您的目的): 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);
}