如何用方塊陰影技巧填充第一個方格？

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）實際上是等與填充它的唯一方式由僞元件所佔據的空間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添加到僞元素。

.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的背景色：元件以黃色之前和除去的黃色框陰影。然後將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; 
}