css 圆里面数字 |css table颜色设置颜色设置颜色

// HTML 代码
<div class="circle">
<span>1</span>
</div>
// CSS 样式
.circle {
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #ff0000;
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
color: #ffffff;
}
.circle span {
display: inline-block;
text-align: center;
}

实现方法分析

1.首先在 HTML 中创建一个 div 元素，将数字放在 span 元素内，class 属性设置为 circle。

2.在 CSS 样式中，设置圆的大小和形状，颜色等属性，使用 flex 布局将数字居中显示，同时设置数字的大小和颜色。

3.在 span 标签中设置 display:inline-block 属性，text-align:center 属性将数字居中显示。

总结

以上是实现 CSS 圆内数字的方法，通过设置圆形的大小、样式和数字的样式属性，可以自定义多种形态的圆形数字。而实现该效果主要依赖于 CSS 样式的灵活运用和布局技巧。