如何利用纯css,制作圆圈数字?不需要图片

 时间:2026-02-14 03:20:15

1、先在html里,创建几个div,里面是数字内容。

如何利用纯css,制作圆圈数字?不需要图片

2、直接运行页面,显示的数字并不是我们需要的。

如何利用纯css,制作圆圈数字?不需要图片

3、我们添加样式,让div添加背景颜色,添加高度,宽度,并设置为行内元素(display:inline-block),另外关键的样式为添加border-radius,边框弧度。

如何利用纯css,制作圆圈数字?不需要图片

4、运行后,可以看到圆圈数字的初步效果了。

如何利用纯css,制作圆圈数字?不需要图片

5、再细化一下,修改为table-cell的显示方式,方便左右,上下居中,添加居中的样式。

如何利用纯css,制作圆圈数字?不需要图片

6、再来看一下效果,很漂亮的圆圈数字效果了。

如何利用纯css,制作圆圈数字?不需要图片

  • jquery如何实现鼠标放上div时改变其大小
  • js如何删除某个html标签下的某个子标签
  • 如何用CSS修改不同input标签的样式
  • css如何给图片加上两层边框
  • 如何运用PYTHON正则表达式判断大小写
  • 热门搜索
    香水知识 四妙丸的作用 高中化学知识点总结 足球小知识 加盟什么店最赚钱 self什么意思 看破红尘什么意思 茶叶小知识 现在什么时间 妇科千金片治什么病