黃金比例，也稱為黃金數、黃金比例或甚至是神聖比例，是兩個數字之間的特殊關係，其大約等於 1.618。它常用希臘字母「phi」表示。值得注意的是，這個比例與費波那契數列有著密切的聯繫—這是一系列的數字，每個數字都是前兩個數字的總和。費波那契數列以 0、1 開始，然後繼續：1、2、3、5、8、13、21，依此類推。隨著數字的遞增，每個數字與前一個數字之間的比例逐漸接近 1.618，或 phi。這個獨特的比例在自然界、藝術和建築中出現，使它在數學上令人著迷且在視覺上令人愉悅！
在這個教程中，我們將使用一些網格聲明和一些額外的技巧來重新創建 黃金比例圖。
讓我們開始吧！
我們將使用這部分費波那契數列：
1, 1, 2, 3, 5, 8, 13, 21這有 8 個數字，因此我們的標記將由一個含有 8 個 <li> 元素的 <ol> 組成。
在 CSS 網格中，我們將創建一個畫布，其大小由最後兩個數字的總和 13 + 21 = 34 得到的寬度，以及最大的數字 21 作為高度：
ol {
all: unset;
display: grid;
grid-template-columns: repeat(34, 1fr);
grid-template-rows: repeat(21, 1fr);
list-style: none;
}現在還看不出什麼，但如果我們啟用開發者工具的 網格檢查器，我們可以看到網格：
接下來，我們將為 <li> 元素添加一些常見的樣式：
li {
aspect-ratio: 1 / 1;
background: var(--bg);
grid-area: var(--ga);
}還是什麼都看不見，讓我們使用一些內容來填充 --bg (background-color) 和 --ga (grid-area) 變數：
&:nth-of-type(1) {
--bg: #e47a2c;
--ga: 1 / 1 / 22 / 22;
}
&:nth-of-type(2) {
--bg: #baccc0 ;
--ga: 1 / 22 / 23 / 35;
}
&:nth-of-type(3) {
--bg: #6c958f;
--ga: 14 / 27 / 22 / 35;
}
&:nth-of-type(4) {
--bg: #40363f;
--ga: 17 / 22 / 22 / 27;
}
&:nth-of-type(5) {
--bg: #d7a26c;
--ga: 14 / 22 / 17 / 25;
}
&:nth-of-type(6) {
--bg: #ae4935;
--ga: 14 / 25 / 17 / 27;
}
&:nth-of-type(7) {
--bg: #e47a2c;
--ga: 16 / 26 / 17 / 27;
}
&:nth-of-type(8) {
--bg: #f7e6d4;
--ga: 16 / 25 / 17 / 26;
}現在，我們得到了這個：
很酷！那麼發生了什麼？我們通過使用 --bg 自訂屬性為每個 <li> 元素賦予了自己的 background-color。然後，我們利用 grid-area 在網格中放置和調整矩形的大小。grid-area 是一個縮寫，表示：
row-start / col-start / row-end / col-end現在，怎麼來創建螺旋效果呢？雖然 CSS 不能直接繪製螺旋，但我們可以通過在每個 <li> 上添加圓形作為 ::after 偽元素來進行偽造：
li {
/* 與之前相同 */
overflow: hidden;
position: relative;
&::after {
aspect-ratio: 1 / 1;
background-color: rgba(255, 255, 255, .3);
border-radius: 50%;
content: '';
display: block;
inset: 0;
position: absolute;
}
}這給我們帶來：
還不太完美，但如果我們 加倍 圓形的大小並 平移 它們，情況會變得更好：
&::after {
/* 與之前相同 */
scale: 2;
translate: var(--tl);
}不過，在我們為每個 <li> 更新 --tl（平移）屬性之前，變化不大：
&:nth-of-type(1) {
--tl: 50% 50%;
}
&:nth-of-type(2) {
--tl: -50% 50%;
}
/* 其餘元素同樣設置 */現在我們得到了這個：
在這裡發生了什麼？
我們創建了一個大小是其元素兩倍的圓形，然後使用平移將圓形移動到不同的方向，以給人一種連續螺旋的外觀。通過調整每個元素的平移，圓形「流動」進入彼此，模仿出螺旋的效果。
最後，由於我們為 <li> 元素添加了 overflow: hidden，圓形在超出其容器時會被「切割」，給我們一種完美螺旋的幻覺！
這是最終結果在 CodePen 上的展示：
https://codepen.io/stoumann/pen/VwoYPzG
原文出處：https://dev.to/madsstoumann/the-golden-ratio-in-css-53d0
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式