在 CSS 中,使用 border 属性可以创建一个圆形的框,而在其中填充色则需使用 background-color 属性。但是如何创建一个空心的圆呢?.circle { width: 50px;
在 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 实现一个空心圆形,同时也可以快速应用到自己的实践项目中。
粉丝
0
关注
0
收藏
0