Question

如何使用css设置阴影？

Here a better drawing 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>

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>

如何为div

如何使用css设置阴影？

2 个答案: