这个带阴影的盒子可以只用CSS构建（没有图像）吗？

Question

我有以下设计元素，并且在没有图像的情况下没有制作大阴影的情况下无法正常工作。

有没有办法只使用CSS？

（忽略背景中的模式......只是为了表明阴影有一定的透明度。）

Answer 1

多个box-shadow - 值可以创建此效果。

这里的问题是透明度;如果你对阴影的颜色使用透明的颜色值，它们会成倍增加到某种渐变中，并最终变得完全不透明。

相反，创建一个与框大小相同且位置相同的伪元素，并使用纯色从该元素中删除box-shadow。然后，您可以为伪元素赋予opacity - 值，这也将影响阴影，但（显然）不是实际的框。

基本的CSS可能是这样的：

.box {
  background: #fff;
  position: relative;
}

.box:before {
  position: absolute;
  content: " ";
  opacity: .25;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  box-shadow: -1px -1px 0 #000, -2px -2px 0 #000 /* and so on and so forth */; 
}

Here's an example 具有更广泛的样式。请注意，您不需要静态width和height - 值，您可以让.box根据其子项自动调整其大小。

Answer 2

您可以通过多个框阴影获得一般效果。

<强> Codepen Example

然而，rgba值的乘法效应排除了阴影具有您似乎需要的不透明度。

我想一个公式可以解决，以便可以指定alpha通道来解决这个问题。

Answer 3

您可以在that之内的偏斜物体中添加阴影：

HTML：

<div class="box shadow">
    <div class="shadowTop"></div>
    <div class="shadowLeft"></div>
</div>  

CSS：

body {
    background-color: green;
}
.box {
    background-color: red;
    border: 1px solid;
    width: 200px;
    margin: 98px auto;
    height: 200px;
    position: relative;
}
.shadowTop {
    position: absolute;
    left: 10px;
    top: 0px;
    width: 200px;
    height: 20px;
    box-shadow: 0px -20px 0px 0px rgba(0, 0, 0, 0.1);
    transform: skewX(45deg);
}
.shadowLeft {
    position: absolute;
    left: 0px;
    top: 30px;
    width: 20px;
    height: 200px;
    box-shadow: -20px -20px 0px 0px rgba(0, 0, 0, 0.1);
    transform: skewY(45deg);
}

Answer 4

哎呀，好像我来不及了。我仍想分享我的解决方案。

我非常接近一个{ - 1}}解决方案，但由于<div>和::before个伪元素是 上的内容，他们不能留在那个元素本身的“下面”，所以我不得不求助于两个 - ::after s。

我的解决方案（与Nils接受的答案相比）有一个优点，即您不需要指定那么多<div>，并允许您使用像素以外的单位来创建“阴影”

Online Demo

box-shadow

<div class="wrapper"><div class="content"></div></div>

截图：

诀窍是转换两个伪元素以创建阴影的幻觉。

我故意用一个蓝色的盒子脱离背景。你当然可以使用你喜欢的颜色。

请注意，有一点值得注意：

1. dabblet.com默认提供无前缀的JS库。您要么必须嵌入该库，要么在代码中添加前缀;

2. Firefox在历史记录中使用了"non-standard" prefixed version单角半径。