曲線圖是一種常見的數據可視化方式，它可以幫助我們更好地理解數據背后的趨勢和規律。在CSS3中，我們可以使用border-radius屬性和偽元素:before和:after來制作出漂亮的曲線圖。

.curve {
position: relative;
width: 500px;
height: 300px;
background-color: #f6f6f6;
overflow: hidden;
}
.curve:before,
.curve:after {
content: '';
position: absolute;
top: 0;
width: 500px;
height: 300px;
border-radius: 50%;
background-color: #1488CC;
opacity: 0.7;
}
.curve:before {
left: -250px;
}
.curve:after {
left: 250px;
}

在上面的代碼中，我們首先創建了一個容器元素.curve，設置了它的寬高和背景顏色，并將overflow屬性設置為hidden，以便隱藏偽元素的溢出部分。接著，我們使用偽元素:before和:after來分別創建左半部分和右半部分的曲線。其中，我們使用了border-radius屬性將元素變成圓形，并設置了背景顏色和透明度。

這樣，我們就完成了曲線圖的創建。如果需要在曲線圖上展示具體的數據點，我們可以使用絕對定位和transform屬性來實現：

.curve .point {
position: absolute;
width: 10px;
height: 10px;
background-color: #FF9F4A;
border-radius: 50%;
transform: translate(-50%, -50%);
}
.curve .point-1 {
left: 40%;
bottom: 30%;
}
.curve .point-2 {
left: 50%;
bottom: 60%;
}
.curve .point-3 {
left: 60%;
bottom: 20%;
}

在上面的代碼中，我們為每一個數據點創建了一個.point元素，并設置了它們的背景顏色和圓角。接著，我們使用絕對定位將它們放置在曲線圖上，并使用transform屬性將元素的中心點移動到元素本身的中心。

通過這樣的方式，我們可以用CSS3輕松制作出漂亮的曲線圖。同時，這種方式也具有一定的動態效果，可以讓用戶更加直觀地了解數據的變化趨勢。