css如何设置圆圈颜色12

html-css020

css如何设置圆圈颜色12,第1张

这边的设置圆圈颜色,有点歧义.

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 为顺时针)。