从盒阴影到虚线边框：我如何在 CSSBattle 的每日目标中达到 63 个字符 🎯

Source: Dev.to

通往 63 字符的旅程

让我带你了解我的解法是如何演变的——因为 过程 才是有趣的部分。

尝试 1 — 暴力法（box‑shadow 时代）

*{
  background:#FFF;
  *{
    border:70px solid#328FC1;
    margin:70;
    color:323138;
    box-shadow:190px 110px,-190px 110px,190px -110px,-190px -110px
  }
}

我当时的想法是：四个正方形，四个 box‑shadow 偏移。视觉上可以实现，但字符数仍然偏高。利用 box‑shadow 做位置技巧是 CSSBattle 的经典手法——但这里并不是合适的工具。

尝试 2 — 改用虚线边框

随后我灵光一现。目标使用了 虚线边框图案。如果我直接…使用 dashed 怎么样？

*{
  background:#FFF;
  *{
    border:70px dashed#328FC1;
    margin:0;
  }
}
&{
  border:70px dashed#323138;
}

外层元素得到一种颜色，内层元素得到另一种。代码行数更少，逻辑更清晰。

尝试 3 — 合并为一条规则

如果两个边框共享相同属性，而我只在颜色上做区分呢？

*{
  background:#FFF;
  color:323138;
  border:75q dashed;
  *{
    color:328FC1;
    margin:0;
  }
}

变得更短了。用 color 代替显式的 border-color。75q 代替 70px（CSS 的 q 单位是四分之一毫米——写起来更短，配合合适的数值可以得到相似的视觉效果）。不过背景白色仍然保留着。

尝试 4 — “等等，我真的需要它吗？”的时刻

*{
  color:323138;
  border:75q dashed;
  *{
    color:328FC1;
    margin:0
  }
}

63 字符。得分：819.42。
background:#FFF 完全是多余的。默认背景已经是白色。我一直背负着无用的负担。

审视并自问 “这行代码真的有作用吗？” 的那一刻——才是真正的字符隐藏之处。

Source: …

我实际学到的

1. 你首先想到的技术往往不是最有效的。
   我一开始使用盒子阴影（box‑shadows），因为那是我熟悉的。虚线边框才是正确的工具，而我之所以发现它们，是因为保持了好奇心。

2. 每添加一个属性都会增加字符成本。要质疑一切。
   background:#FFF 看起来安全且明确，但其实并非必需。询问“这行代码是否值得保留？”的自律不仅适用于 CSSBattle，也适用于其他场景。

3. q 单位确实存在，却被严重低估。
   CSS 有四分之一毫米（quarter‑millimeter）单位。我爱这门语言。

4. 每日练习会悄然累积。
   我并不是一次性完成的。通过多天的尝试，我逐渐建立了模式识别能力，看到许多几乎不懂的顶级解法，经历了许多“哦，这真巧妙”的瞬间，慢慢内化。

5. 小成就值得庆祝。
   当字符数降到 80 时，我很高兴。降到 63 更让我 非常 高兴。虽然都不是世界纪录，但都感觉来之不易。

你应该尝试 CSSBattle 吗？

如果你写 CSS——答案是肯定的。它会：

• 迫使你学习一些晦涩但真实存在的 CSS 属性
• 让你思考属性 为何 起作用，而不仅仅是 它们做了什么
• 向你介绍在日常工作中几乎不会遇到的单位、技巧和简写方式
• 当字符数减少 2 时，给你一次小小的多巴胺冲击

你还会查看最高票解答，感到自己渺小。这没关系；这正是目的所在。即使只理解了排名第一的解答的 20 %，也能学到东西。

最终思考

我从未想到我每天的目标字符数会达到两位数。很长一段时间，我只要接近目标图像就很开心，随后上榜了也很开心，突破 100 字符、80 字符、再到 63 字符时更是欣喜。

排行榜上总会有更聪明的人。他们的解法明天仍会给我带来启发。

但今天，63 个字符已经感觉很多了。

你玩过 CSSBattle 吗？你从中学到的最喜欢的 CSS 小技巧是什么？留下评论——我真的很想知道。