绘制绚丽的动态时间轴
在构建时间轴时，常会遇到绘制动态弯曲时间轴的需求，这需要解决以下难题：
- 动态长度：时间轴的长度可能根据内容动态变化，增加左侧弯道。
- 渐变连接：多个块状时间轴之间的边框需要渐变衔接。
- 弯曲效果：实现类似水管弯曲效果的边框。
代码实现：
1234
.content > div {
height: 100px;
width: 500px;
border: none;
border-top: 20px solid;
}
.content > div:nth-child(odd) {
border-right: 20px solid red;
border-image: linear-gradient(to right, red, green);
border-image-slice: 1;
}
.content > div:nth-child(even) {
border-left: 20px solid red;
border-image: linear-gradient(to left, red, green);
border-image-slice: 1;
}解决方法：
- 奇偶分块：将时间轴分成奇数序列和偶数序列，实现渐进和渐变效果。
- 层叠渐变：使用 border-image 和 border-image-slice 叠加渐变效果。
- 分段弯曲：通过左右边框的切换，营造弯曲视觉效果。
注意事项：
- 如果时间轴只有单一弯道，可以使用 conic-gradient 实现。
- 对于多个弯道的场景，可以通过上述方法叠加拼合。
