如何用盒子阴影技巧填充第一个方块？

Question

我正在试验一些 box-shadow 技巧，我无法填充第一个方块 (0 0 [color])。

最好用以下示例进行解释：

.box {
  width: 90px;
  position: relative;
  display: inline-block;
}
.box:before {
  content: '';
  width: 45px;
  height: 45px;
  position: absolute;
  z-index: 90;
  box-shadow: 0 0 #ffff00, 0 -45px #ffff00, -45px 0 #ffff00, 45px 0 #ff0000, 0 45px #3333ff, 45px 45px #00ff00;
}
.mark {
  font-size: 45px;
  width: 45px;
  text-align: center;
  position: absolute;
}

<div class="box">
  <span class="mark">?</span>
</div>

Answer 1

第一个方格 (0,0) 实际上是被 pseudo-element 占据的 space 所以用 box-shadow 填充它的唯一方法是使用 inset 像下面片段中的阴影。

法线 box-shadow 无法使用，因为法线阴影总是在外面:)

.box {
  width: 90px;
  position: relative;
  display: inline-block;
}
.box:before {
  content: '';
  width: 45px;
  height: 45px;
  position: absolute;
  z-index: 90;
  box-shadow: 0 -45px #ffff00, -45px 0 #ffff00, 45px 0 #ff0000, 0 45px #3333ff, 45px 45px #00ff00, inset 0 0 0 45px orange;
}
.mark {
  font-size: 45px;
  width: 45px;
  text-align: center;
  position: absolute;
}

<div class="box">
  <span class="mark">?</span>
</div>

另一种更简单的方法是将 background-color 添加到 pseudo-element。

.box {
  width: 90px;
  position: relative;
  display: inline-block;
}
.box:before {
  content: '';
  width: 45px;
  height: 45px;
  background-color: orange;
  position: absolute;
  z-index: 90;
  box-shadow: 0 -45px #ffff00, -45px 0 #ffff00, 45px 0 #ff0000, 0 45px #3333ff, 45px 45px #00ff00;
}
.mark {
  font-size: 45px;
  width: 45px;
  text-align: center;
  position: absolute;
}

<div class="box">
  <span class="mark">?</span>
</div>

Answer 2

将.box:before元素的background-color设置为黄色，并去掉黄色框阴影。然后将 z-index 设置为 -1 以呈现问号。

.box:before {
    content: '';
    width: 45px;
    height: 45px;
    position: absolute;
    z-index: -1;
    background-color: #FF0;
    box-shadow: 0 0, 0 0, 0 0, 45px 0 #F00, 0 45px #3FF, 45px 45px #0F0;
}

如何用盒子阴影技巧填充第一个方块？

How to fill the first square with box-shadow trick?

css

box-shadow