DEV Community
·
CSS中的黄金比例
💡
原文英文，约700词，阅读约需3分钟。
📝
内容提要
黄金比例约为1.618，与斐波那契数列相关。文章介绍用CSS网格和伪元素创建黄金比例图，通过调整背景色和网格区域，实现螺旋效果。
🎯
关键要点
- 黄金比例约为1.618，与斐波那契数列相关。
- 斐波那契数列是一个每个数字是前两个数字之和的数列。
- 文章介绍如何使用CSS网格和伪元素创建黄金比例图。
- 使用8个<li>元素构建一个有序列表，CSS网格的宽度为34，高度为21。
- 为每个<li>元素设置背景色和网格区域，以形成矩形。
- 通过添加圆形伪元素来模拟螺旋效果。
- 调整圆形的大小和位置以创建连续的螺旋效果。
- 最终效果是一个视觉上完美的螺旋图形。
➡️
