如何为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);}
}

Answer 1

您唯一的选择是使用多个框阴影.但是,有一些限制:

• 您必须使用半透明的颜色,因为它们会相互显示.
• 您必须手动指定每个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>