当我们在进行 Web 开发时，很多时候都是在有意或无意地创建一些矩形，深究一下，到底有多少中方式来得到一个几何图形呢？本文将简单介绍几种生成圆形、三角形和多边形的方式，并分析每种方式的优缺点。
下面是可能使用到的方式：
border-radius
border
rotating shapes with transform
pseudo elements
box-shadow
wrapping text into shapes with shape-outside
clip-path on an element
SVG assets
canvas
more
border-radius
使用 border-radius 样式属性是继续阅读 »
最近在写一个动画效果，使 ul 下面的 li 逐个进入，就像下图
做这个效果用到了 css 的 animation 中 animation-delay，给 li 设置入场动画后，再给 li 设置 animation-delay，像这样：
css
.li-animation-delay-1 {
animation-delay: 0.1s;
}
并且每一个 li 的 animation-delay 都比前一个 li 的长 .1s，也就达到了后面的 li 的入场动画后播放的效果。
因为 li 的数量也不确定，所以我打算批量生成一些 li-animation-delay-*, 查了一下 scss 正好有 for 的用法：继续阅读 »