空心圆样式

Posted on | Post modified: | In
Words count in article: 75 | Reading time ≈ 1

UI设计了一个空心圆样式，所以这边找了段CSS代码来实现：

1
2
3
4
5
6
7
div {
  width: 100px;
  height: 100px;
  background-color: red;
  border-radius: 50%;
  border: 20px solid orange;
}

参数说明：

  • background-color—控制圆心颜色.

  • border-radius— 控制圆角.

  • border— 控制圆环大小和颜色.

实现效果如下：

image-20200813175112338