css中实心圆怎么写

CSS中实心圆是非常常见的一种样式，尤其是在设计中经常会用到。那么，我们要如何用CSS来实现实心圆呢？

/* 圆 */
.circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: black;
} 

上述代码中，border-radius设置为50%表示让其四个角的圆角半径为宽度的50%，这样便能实现一个完整的圆形。

如果想要改变实心圆的大小，只需要调整width和height的数值即可。同样的，如果想修改实心圆的颜色，只需要改变background-color的数值即可。

需要注意的是，若在圆形外部嵌套其他元素，则可以看到四周有间隙，此时可以给外层元素添加display: flex和align-items: center的样式。这样可以使外层元素沿着垂直方向居中对齐。

/* 圆形容器 */
.circle-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 圆 */
.circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: black;
} 

上述代码中，我们将宿主元素设为.circle-container，并使用display: flex和align-items: center将它们在垂直方向上居中对齐，实现了较好的外观效果。

通过上述代码，我们已经能够实现一个简单的实心圆形，并且也掌握了如何修改圆形的大小、颜色以及如何解决间隙的问题。不难发现，CSS的实现能力是非常强大的，如果您想要学习更多的CSS技巧，建议多看书、多动手实践，不断提升自己的CSS技能。