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

Question

我有以下设计元素，如果没有制作没有图像的大阴影，我无法让它工作。

有没有办法只用 CSS 来做到这一点？

（忽略背景中的图案……那只是为了表明阴影具有一定的透明度。）

Answer 1

多个box-shadow值可以产生这种效果。

这里的问题是透明度；如果您对阴影的颜色使用透明颜色值，它们将乘以某种渐变并最终变得完全不透明。

相反，创建一个与盒子具有相同大小和相同位置的伪元素，并box-shadow从该元素中放置而不是使用纯色。然后，您可以给伪元素一个opacity-value，它也会影响阴影，但（显然）不会影响实际的盒子。

基本的 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 */; 
}

这是一个具有更广泛样式的示例。请注意，您不需要 staticwidth和height-values，您可以让其.box根据其子项自动调整其大小。

Answer 2

您可以使用多个框阴影获得一般效果。

代码笔示例

但是，rgba 值的倍增效果排除了阴影具有您似乎需要的不透明度。

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

Answer 3

您可以像这样从倾斜的对象中添加阴影：

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

哎呀，看来我来晚了。我仍然想分享我的解决方案。

我非常接近 one-解决方案，<div>但由于伪元素是该元素上的内容，它们不能停留在该元素本身的“下方”，所以我不得不求助于二。::before::after<div>

我的解决方案（与 Nils 接受的答案相比）有一个优势，即您无需指定那么多box-shadow，并允许您使用像素以外的单位来创建“阴影”。

在线演示

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

div.wrapper {
    width:200px;
    height:200px;
    display:inline-block;
    border-radius:10px;
    position:relative;
 }
 div.wrapper::before,
 div.wrapper::after {
    content:"";
    display:inline-block;
    position:absolute;
    top:-40px;
    left:-40px;
    background-color:rgba(245,245,245,0.8);
    z-index:0;
    transform-origin:top left;
 }
 div.wrapper::before {
    width:45px;
    height:195px;
    border-top-left-radius:3px 10px;
    border-bottom-left-radius:10px;
    transform:skewY(45deg);
 }
 div.wrapper::after {
    width:195px;
    height:45px;
    border-top-left-radius:10px 3px;
    border-top-right-radius:10px;
    transform:skewX(45deg);
 }
 div.wrapper div.content {
    position:relative;
    border-radius:10px;
    width:100%;
    height:100%;
    background-color:#CCF;
    z-index:1;
 }

截屏：

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

我故意用一个蓝色的盒子来突出背景。你当然可以使用任何你喜欢的颜色。

注意，有几点需要注意：

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

2. Firefox 在历史上使用了“非标准”前缀版本的单角半径。