深窥自己的心,而后发觉一切的奇迹在你自己。——培根

用到的是cssbackground属性和radial-gradient

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/** 淡蓝渲染到20px
* 白色渲染到20px(分割线
* 白色渲染到21px(分割线
* 淡蓝渲染到21px
* 淡蓝渲染到40px
* 后续白色打底
*/
background: radial-gradient(
circle at center,
#f6faff 20px,
#fff 20px,
#fff 21px,
#f6faff 21px,
#f6faff 40px,
#fff 0
);

效果: