css上空心圆怎么做

在 CSS 中，使用 border 属性可以创建一个圆形的框，而在其中填充色则需使用 background-color 属性。但是如何创建一个空心的圆呢？

.circle {
  width: 50px;
  height: 50px;
  border: 2px solid black;
  border-radius: 50%;
} 

以上的 CSS 代码可以创建一个实心的黑色圆形，在实现空心效果时，只需将 border 的宽度调整为所需的粗细即可。

.circle {
  width: 50px;
  height: 50px;
  border: 2px solid black;
  border-radius: 50%;
  background-color: white;
} 

如果需要在空心的圆形中央添加文字或图标，可以使用 text-align 和 line-height 属性来实现垂直水平居中。

.circle {
  width: 50px;
  height: 50px;
  border: 2px solid black;
  border-radius: 50%;
  line-height: 50px;
  text-align: center;
  color: black;
  font-size: 24px;
  font-weight: bold;
} 

以上的 CSS 代码可以创建一个空心圆形，圆形的宽高为 50px，边框粗细为 2px，圆形内垂直水平居中一个黑色的粗体文字。

通过以上的实例，相信大家已经学会了如何使用 CSS 实现一个空心圆形，同时也可以快速应用到自己的实践项目中。