我时不时地会遇到“CSS 阶段”。最新的一件事是在我发现 CSSBattle 时开始的。该网站每天都会面临挑战，您需要使用 CSS 用最少的字符重现图像。我很可怕，极其冗长，但我必须说我着迷了。
我最喜欢的事情之一就是查看其他人的解决方案，这就是我发现我的其他 css-battlers 同伴在那里大量使用 box-shadow 的方式，然后我对它产生了超级好奇。他们基本上利用这一特性来永远复制一个矩形。我会展示如何做。
根据文件，该属性有很多安排。但我们这里使用的是左上角的颜色。因此，例如：
（CSSBattle 每日目标为 16/11/2024）
在这张图片中我们只看到一个 div；其他的都是影子。所以，html 将是：
<html>
<body>
<div></div>
</body>
</html>
CSS 将是：
* {
background: #6592CF;
position: absolute;
}
div {
top: 52px;
left: 52px;
width: 70px;
height: 30px;
background: #EEB850;
box-shadow:
0 75px #243D83, 0 150px #EEB850,
105px 0 #243D83, 210px 0 #EEB850,
105px 75px #EEB850, 210px 75px #243D83,
105px 150px #243D83, 210px 150px #EEB850;
}
请注意，top 和 left 属性的单位是 px，距离是相对于第一个属性的。
也许我是唯一一个，但我觉得这很有趣。我将继续学习 CSS，如果我发现其他很酷的东西，我会告诉你。
以上是我们如何处理盒子阴影的详细内容。更多信息请关注PHP中文网其他相关文章！
