CSS時(shí)間軸是在網(wǎng)頁設(shè)計(jì)中很常用的一種效果，它可以將時(shí)間線上的事件以虛線的形式呈現(xiàn)出來，讓用戶可以更直觀地了解時(shí)間軸上的發(fā)展歷程。

.timeline {
position: relative;
padding: 40px 0;
}
.timeline::before {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 2px;
height: 100%;
background: #d3d3d3;
transform: translateX(-50%);
}
.timeline-item {
position: relative;
padding: 40px 0;
}
.timeline-item::before {
content: '';
position: absolute;
top: 0;
left: -7px;
width: 14px;
height: 14px;
border-radius: 50%;
background: #fff;
border: 2px solid #d3d3d3;
z-index: 1;
}
.timeline-item .content {
position: relative;
max-width: 400px;
padding: 15px;
border-radius: 5px;
background: #fff;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
z-index: 2;
}
.timeline-item::after {
content: '';
position: absolute;
top: 50%;
left: -6px;
width: 10px;
height: 10px;
background: #fff;
border: 2px solid #d3d3d3;
border-radius: 50%;
transform: translateY(-50%);
z-index: 1;
}
.timeline-item.right::before {
left: auto;
right: -7px;
}
.timeline-item.right::after {
left: auto;
right: -6px;
}
.timeline-item.right .content {
text-align: right;
}
.timeline-item:nth-child(odd) .content {
transform: translateX(-20px);
}
.timeline-item:nth-child(even) .content {
transform: translateX(20px);
}
.timeline-item:nth-child(odd)::before {
transform: rotate(45deg);
}
.timeline-item:nth-child(even)::before {
transform: rotate(-135deg);
}

以上是一個(gè)基本的CSS時(shí)間軸虛線樣式的代碼，可以通過修改相應(yīng)的樣式屬性來定制符合要求的時(shí)間軸效果。