要使用 CSS 制作带有曲线和点的线性图表效果，需要掌握以下关键技术：
使用 position 属性和 ::before、::after 伪元素来创建点。可以设置 border-radius 属性来让点变成圆形，background-color 属性设置颜色，content 属性来插入空内容。
使用 background-image 属性来设置曲线图表的背景图。可以使用 SVG 或者 Canvas 画出曲线，并将其转化为 data URI 作为 background-image 的值。
使用 linear-gradient 属性来设置渐变色。通过调整 background-size 和 background-position 属性来让渐变色沿着曲线图表变化。
下面是一个简单的例子：
<div class="chart">
<div class="point" style="left: 20%; bottom: 60%;"></div>
<div class="point" style="left: 40%; bottom: 40%;"></div>
<div class="point" style="left: 60%; bottom: 70%;"></div>
<div class="point" style="left: 80%; bottom: 30%;"></div>
</div>.chart {
width: 100%;
height: 300px;
background-image: url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 70 C 20 50, 50 90, 100 50' stroke='%23FFB6C1' stroke-width='3' fill='none'/%3E%3C/svg%3E);
background-size: 100% 100%;
background-position: center center;
position: relative;
}
.point {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #FFB6C1;
position: absolute;
transform: translate(-50%, -50%);
}在上面的代码中，我们先创建了一个 div 元素作为曲线图表的容器，并设置了它的宽度、高度、背景图、背景图的大小和位置。接着，我们创建了四个点，并设置它们的位置和样式。注意 transform 属性用来让点的中心点与它的位置重合。
通过上面的代码，我们可以得到一个简单的带有曲线和点的线性图表效果。