css3怎么画时钟刻度 |css 的大于号

.clock {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #FFFFFF;
position: relative;
}
.clock::before {
content: "";
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
width: 6px;
height: calc(100% - 20px);
background-color: #000000;
}
.clock::after {
content: "";
position: absolute;
top: 50%;
left: 10px;
transform: translateY(-50%);
width: calc(100% - 20px);
height: 6px;
background-color: #000000;
}
.clock .tick {
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 10px;
background-color: #000000;
}
.clock .tick:nth-child(5n) {
height: 20px;
}
.clock .tick:nth-child(15n) {
height: 30px;
}

首先，需要创建一个圆形的容器，宽高设置为200px，并设置圆角半径为50%以呈现圆形。然后使用伪元素:before和:after画指针，通过设置定位和宽高属性来调整指针的样式。

接下来，大家需要画出时钟刻度。为此，大家将定义一个.tick类，它会在时钟圆弧上绘制一串等距的小线段。这里使用了nth-child选择器来区分每个刻度的长短程度，从而给整个时钟赋予更多的细节，让它看起来更加真实。

最后，将.tick类应用到圆形容器上，时钟就完成了。可以根据需要进行调整，如更改颜色、换成不同的字体、增加数字等。