然后再次在这个矩形区域里面定义一个或者多个区域，同样给边框上个颜色，然后用border-radius:50%；这样就会让此矩形区域变换为圆形，依次在里面添加一个或者多个即可；
最后在你定义的圆形区域里面打上文字，如果那里不合适，用css控制一下区域或者文字；
希望我的回答能帮到你；
很多方法，给你几个常用的1、圆圈设为div背景，然后把这个div设置padding值来控制文字的位置
2、圆圈设为div背景，然后固定高度和宽度并设置 text-align:center再设置文字的行高line-height:与div的高度一样即可
3、圆圈设为div背景，在div内插入span或者a或者其他标签，设置margin属性控制位置；
css圆形按键下方有字可以带提示信息div。步骤如下：1、新建html文档。
2、书写hmtl代码。
3、书写css公用样式表代码。
4、书写css代码。代码整体结构。
6、查看效果。
![前端js 输入框限制（只能输入数字，10位小数，除0[0-9]、.、--、-0[0-9]、-.不能开头外，其他的都可以）？](/aiimages/%E5%89%8D%E7%AB%AFjs+%E8%BE%93%E5%85%A5%E6%A1%86%E9%99%90%E5%88%B6%EF%BC%88%E5%8F%AA%E8%83%BD%E8%BE%93%E5%85%A5%E6%95%B0%E5%AD%97%EF%BC%8C10%E4%BD%8D%E5%B0%8F%E6%95%B0%EF%BC%8C%E9%99%A40%5B0-9%5D%E3%80%81.%E3%80%81--%E3%80%81-0%5B0-9%5D%E3%80%81-.%E4%B8%8D%E8%83%BD%E5%BC%80%E5%A4%B4%E5%A4%96%EF%BC%8C%E5%85%B6%E4%BB%96%E7%9A%84%E9%83%BD%E5%8F%AF%E4%BB%A5%EF%BC%89%EF%BC%9F.png)
