css - 如何用 box-shadow 技巧填充第一个正方形？

Question

我正在尝试一些box-shadow技巧，我无法填充第一个正方形（0 0 [颜色]）。

最好用以下示例解释：

.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) 实际上是伪元素占用的空间，因此用 a 填充它的唯一方法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>

---

另一种更简单的方法是将 a 添加background-color到伪元素。

.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 元素的背景颜色设置为黄色并移除黄色框阴影。然后将 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;
}