css实现带圈文字①②③的方法参考

做网站时候为了让排版更好看，会经常用到下列带圈文字：

®@❶❷❸❹❺❻❼❽❾❿⓫⓬⓭⓮⓯⓰⓱⓲⓳⓴①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯⑰⑱⑲⑳⓪㊀㊁㊂㊃㊄㊅㊆㊇㊈㊉㊎㊍㊌㊋㊏㊚㊛㊐㊊㊣㊤㊥㊦㊧㊨㊒㊫㊑㊓㊔㊕㊖㊗㊘㊜㊝㊞㊟㊠㊡㊢㊩㊪㊬㊭㊮㊯㊰㊙ⒶⒷⒸⒹⒺⒻⒼⒽⒾⒿⓀⓁⓂⓃⓄⓅⓆⓇⓈⓉⓊⓋⓌⓍⓎⓏⓐⓑⓒⓓⓔⓕⓖⓗⓘⓙⓚⓛⓜⓝⓞⓟⓠⓡⓢⓣⓤⓥⓦⓧⓨⓩ㉿

需要用时可以直接复制上面的带圈字符，但是改变其样式会比较麻烦。所以有人也会用加载第三方字体来实现，但是如果不是大面积使用的话，加载第三方字体库来实现会影响网站页面加载速度。所以我们可以用css来实现。本文就来介绍下用css来实现带圈文字。

比如我们要做到如下效果：

请看实现上图效果的HTML和CSS具体代码：

<span class="dqbh">1</span>

<style>
.dqbh {
 border-radius: 50%;
 height: 25px;
 width: 25px;
 display: inline-block;
 background: #38a4fa;
 text-align: center;
 border: 1px solid#38a4fa;
 white-space: nowrap;
 padding: 1px 3px 1px 1px;
 font-size: 20px;
 color: #ffffff;
 transform: scale(0.80);
}
</style>

通过上面代码就是可以实现带圈数字样式了，这种方法的好处是通过css修改文字样色，圈的背景色都很方便。