这边的设置圆圈颜色,有点歧义.
1.类似圆环的形式;2.半圆填充颜色
对于第一种那就简单了:
div{
width: 200px
height:200px
border-radius: 50%
border: 10px solid #1AA1E1
display: inline-block
box-sizing: border-box
}
第二种半圆的话,那么会相对麻烦点(当然图片的方法就不说了):
div{
width: 200px
height:200px
border-radius: 50%
position: relative
display: inline-block
box-sizing: border-box
overflow: hidden
border:1px solid #e3e3e3
}
div:after{
content: ''
position: absolute
width: 50%
height: 100%
background-color: #0000FF
top:0
left:0
}
可以使用 DrawArc 方法来实现有间隔的圆。这个方法需要提供七个参数:左上角 X 坐标、左上角 Y 坐标、右下角 X 坐标、右下角 Y 坐标、开始弧度、结束弧度、是否使用顺时针绘制(true 为顺时针)。