天蓬老师2017-04-17 12:01:39
最好有個案地址。
從圖片的角度考慮：可能使用的是border-image,或使用的背景圖(可能有個父容器放背景圖，裡面有個子容器放內容)，隨著子容器被撐高，父容器背景圖片顯示面積隨之增加。
如果是程式碼實作：先製作幾個圓，依照js動態加圓的p
阿神2017-04-17 12:01:39
其實主要原理就是利用了css的 border-radius 屬性，一個塊元素（例如p）把這個屬性設為50%，那麼就顯示成了一個圓形。
至於空心的圓形，利用了border屬性，設定了邊框，邊框顏色和背景顏色不同。
以下程式碼的實際效果可以線上看
<html>
<head>
<title>This is a demo</title>
</head>
<body>
<p class='leftline'>
<p class='dot smalldot'></p>
<p class='dot smalldot'></p>
<p class='dot activedot'></p>
<p class='dot smalldot'></p>
<p class='dot smalldot'></p>
<p class='dot smalldot'></p>
<p class='dot smalldot'></p>
<p class='dot smalldot'></p>
<p class='dot smalldot'></p>
<p class='dot bigdot'></p>
<p class='dot smalldot'></p>
<p class='dot smalldot'></p>
</p>
</body>
</html>.leftline {
width: 30px;
height: 300px;
padding: 5px 0;
}
.dot {
margin: 10px auto;
border-radius: 50%;
}
.smalldot {
width: 4px;
height: 4px;
background: #aaaaaa;
}
.bigdot {
width: 10px;
height: 10px;
border: 4px solid #AAAAAA;
background: #FFF;
}
.activedot {
width: 30px;
height: 30px;
background: #117577;
}