css - 花式 CSS 阴影，可能吗？

Question

我目前正在编写一个PSD文件HTML/CSS，设计师使用了一个有点花哨的阴影。我想不出办法在 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);
}

Answer 2

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

box-shadow: h-shadow v-shadow blur spread color inset；

你在上图中所做的阴影有一个渐变，这在目前的 CSS 中是不可能的，但类似的阴影可能是这样的：

盒子阴影：-10px -10px 20px #000;

您需要使用数字才能将其放到您喜欢的位置，但这应该可以帮助您开始。