我們如何處理盒子陰影

我時不時會遇到「CSS 階段」。最新的一件事是在我發現 CSSBattle 時開始的。網站每天都會面臨挑戰，您需要使用 CSS 用最少的字元重現圖像。我很可怕，極其冗長，但我必須說我著迷了。

我最喜歡的事情之一就是查看其他人的解決方案，這就是我發現我的其他 css-battlers 同伴在那裡大量使用 box-shadow 的方式，然後我對它產生了超級好奇。他們基本上利用這一特性來永遠複製一個矩形。我會展示如何做。

盒子陰影屬性

根據文件，該屬性有很多安排。但我們這裡使用的是左上角的顏色。因此，例如：

（CSSBattle 每日目標為 16/11/2024）

在這張圖片中我們只看到一個 div；其他的都是影子。所以，html 會是：

CSS 將是：

請注意，top 和 left 屬性的單位是 px，距離是相對於第一個屬性的。

也許我是唯一一個，但我覺得這很有趣。我會繼續學習 CSS，如果我發現其他很酷的東西，我會告訴你。

以上是我們如何處理盒子陰影的詳細內容。更多資訊請關注PHP中文網其他相關文章！