探索如何使用 CSS 重現視錯覺的有趣之處。
Adam Argyle
我們會在這篇文章中玩樂！有 100 種方法可以達成這個光學錯覺，我只是想和各位分享自己的想法，但鼓勵您多方嘗試。請試用示範版並查看原始碼。
如果你偏好使用影片，也可以觀看這篇 YouTube 文章：
總覽
這種錯覺的名稱就是「咖啡廳牆插圖」。什麼都找不到彎曲的線條，但我們的眼睛會認為一隻眼花撩亂。這很難讓人相信，但重新建構它絕對有助於您看清錯覺。
標記
此項目的 HTML 是簡單明瞭的列與欄。<body> 是具有子項 <div class="row"> 的容器。每列都包含五個 <div
class="square"> 元素，
<div class="row">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
…
風格
我選擇「CSS 格線」，是因為其似乎符合資料列的呈現樣式，而且它還包含 justify-content，這似乎是偏移資料列子項的好方法。
車型
從內文樣式開始，我使用 display: grid 和 grid-auto-rows 提供資料列版面配置。系統顯示的列大小 calc() 會考量每一列的邊框，讓效果符合整個可視區域。
body {
display: grid;
grid-auto-rows: calc(20vh - 4px);
gap: 4px;
background: gray;
margin: 0;
}
列樣式
我再次在這裡選擇了格線，但不想以這個表格建立列，grid-auto-flow: column將方向變更為欄。接著，我定義欄大小，並在資料列中加入一些內嵌邊框間距，這樣方塊就不會出現在可視區域邊緣。然後，我指定特定資料列，並將內容合理化為 center 或 end，藉此建立該偏移量來推動錯覺。
.row {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 9vw;
padding-inline: 4vw;
gap: 10vw;
background: white;
}
.row:nth-child(even) {
justify-content: center;
}
.row:nth-child(3n) {
justify-content: end;
}
正方形樣式
接下來，我們要變更方塊顏色並加上邊框：
.square {
border-inline: 4px solid gray;
background: black;
}
結語
現在你知道我怎麼做，你會怎麼做？🙂? 浮點數？Flexbox？漸層？！
讓我們帶您更多元的方法，並瞭解運用網路打造網站的所有方式。
請建立示範並透過 Twitter 推文連結，我就能將這項工具新增至下方的「社群重混」部分！