javascript - 这种样式该怎么书写

Question

这种重复小点 大点 的样式该怎么写呢，圆圈的个数是由右边组件的高度和个数来决定的

天蓬老师 · Answer

最好有案例地址。
从图片的角度考虑：可能使用的是border-image,或者使用的背景图(可能有个父容器放背景图，里面有个子容器放内容)，随着子容器被撑高，父容器背景图片显示面积随之增大。
如果是代码实现：先制作几个圆，根据js动态加圆的p

大家讲道理 · Answer

小点用边框，dotted，大的当前圆圈用右边一行的背景图做。

高洛峰 · Answer

这是一种时间线的功能有相应的插件戳

阿神 · Answer

其实主要原理就是利用了css的 border-radius 属性，一个块元素（比如p）把这个属性设置为50%，那么就显示成了一个圆形。

至于空心的圆形，利用了border属性，设置了边框，边框颜色和背景颜色不同。

以下代码的实际效果可以在线看

Html



  This is a demo

CSS

.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;
}

Html

CSS

最终效果图