如何使用CSS包围一个数字与一个圆？ [英] How to use CSS to surround a number with a circle?

问题描述

我想在此图片中圈出一个数字：

I would like to surround a number in a circle like in this image:

这是否可能，如何实现？

Is this possible and how is it achieved?

推荐答案

这里是一个演示： http://jsfiddle.net/thirtydot/dQR9T/2637 /

HTML：

<div class="numberCircle">30</div>

CSS：

.numberCircle {
    border-radius: 50%;
    behavior: url(PIE.htc); /* remove if you don't care about IE8 */

    width: 36px;
    height: 36px;
    padding: 8px;

    background: #fff;
    border: 2px solid #666;
    color: #666;
    text-align: center;

    font: 32px Arial, sans-serif;
}

要使此工作在 IE8及更早版本，则必须下载并使用 CSS3 PIE 。我的演示不会在IE8中工作，但是这是因为jsFiddle不托管 PIE.htc 。

To make this work in IE8 and older, you must download and use CSS3 PIE. My demo above won't work in IE8, but that's only because jsFiddle doesn't host PIE.htc.

这篇关于如何使用CSS包围一个数字与一个圆？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！