css 消息 时间线 |css 点边框

时间线通常用于展示一系列时间相关的事件，如历史事件、公司发展历程等等。下面是一个简单的示例：

<div class="timeline">
<div class="event">
<div class="date">2010年</div>
<div class="description">公司成立</div>
</div>
<div class="event">
<div class="date">2012年</div>
<div class="description">推出第一个产品</div>
</div>
<div class="event">
<div class="date">2015年</div>
<div class="description">成功上市</div>
</div>
</div>
/* CSS 代码 */
.timeline {
position: relative;
margin: 50px auto;
}
.timeline::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 100%;
background: #ccc;
}
.event {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 50px;
width: 50%;
}
.event::before {
content: "";
position: absolute;
top: 50%;
left: -20px;
transform: translateY(-50%);
width: 20px;
height: 20px;
border-radius: 50%;
background: #ccc;
}
.event:last-child::before {
display: none;
}
.event .date {
font-size: 18px;
font-weight: bold;
}
.event .description {
width: 70%;
background: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

在这个示例中，大家使用了一个带有 class 为timeline的 div 元素作为容器，再在其中添加了一些 class 为event的子元素。每个event子元素都包含一个date元素和一个description元素，用于展示时间和事件描述。

在 CSS 代码中，大家使用了伪元素::before来创建时间线，以及一些基本的样式来控制事件的布局和样式。这里只是一个简单示例，实际上可以使用 CSS 来实现各种不同形式的时间线，具体取决于设计师和开发者的创意和技巧。