这CSS设计从表盘刻度到艺术剪纸，真是离谱到极致？
- 内容介绍
- 文章标签
- 相关推荐
本文共计2924个文字，预计阅读时间需要12分钟。
某日，群内讨论这样一个问题：如何实现表盘刻度？这确实是一个富有创意的问题，方法也很多。
使用conic-gradient实现表盘刻度，最简单便捷的方式就是利用角向渐变。
某日，群里有这样一个问题，如何实现这样的表盘刻度：
这其实是个挺有意思的问题，方法也有很多。
单标签，使用 conic-gradient 实现表盘刻度最简单便捷的方式，就是利用角向渐变的方式 conic-gradient，代码也非常简单，首先，我们实现一个重复角向渐变：
<div></div>
div {
width: 300px;
height: 300px;
border-radius: 50%;
background: repeating-conic-gradient(
#000 0, #000 .8deg, transparent 1deg, transparent calc((360 / 60) * 1deg)
);
}
其实比较难理解的是 calc((360 / 60) * 1deg)，这是因为表盘一共通常有 60 个刻度。效果大概是这样：
接下来，只需要将中间镂空即可。
本文共计2924个文字，预计阅读时间需要12分钟。
某日，群内讨论这样一个问题：如何实现表盘刻度？这确实是一个富有创意的问题，方法也很多。
使用conic-gradient实现表盘刻度，最简单便捷的方式就是利用角向渐变。
某日，群里有这样一个问题，如何实现这样的表盘刻度：
这其实是个挺有意思的问题，方法也有很多。
单标签，使用 conic-gradient 实现表盘刻度最简单便捷的方式，就是利用角向渐变的方式 conic-gradient，代码也非常简单，首先，我们实现一个重复角向渐变：
<div></div>
div {
width: 300px;
height: 300px;
border-radius: 50%;
background: repeating-conic-gradient(
#000 0, #000 .8deg, transparent 1deg, transparent calc((360 / 60) * 1deg)
);
}
其实比较难理解的是 calc((360 / 60) * 1deg)，这是因为表盘一共通常有 60 个刻度。效果大概是这样：
接下来，只需要将中间镂空即可。