Как сделать круг вокруг контента с помощью CSS?

Подобно этому

circle around content

Только с этим кодом

<span>1</span>

ОТВЕТЫ

Ответ 1

http://jsfiddle.net/MafjT/

Вы можете использовать этот css

span {
    display: block;
    height: 60px;
    width: 60px;
    line-height: 60px;

    -moz-border-radius: 30px; /* or 50% */
    border-radius: 30px; /* or 50% */

    background-color: black;
    color: white;
    text-align: center;
    font-size: 2em;
}

Поскольку вам нужен круг, вам нужно установить одинаковое значение в ширину, высоту и высоту строки (чтобы центрировать текст по вертикали). Вы также должны использовать половину этого значения для радиуса границы.

Это решение всегда отображает круг, независимо от длины содержимого.

Но если вы хотите, чтобы эллипс расширялся с содержимым, http://jsfiddle.net/MafjT/256/

Изменение размера с содержанием - Улучшение

В этом https://jsfiddle.net/36m7796q/2/ вы можете увидеть, как отображать круг, который реагирует на изменение длины контента.
Вы даже можете отредактировать содержимое в последнем круге, чтобы увидеть, как изменяется диаметр.

Ответ 2

Теперь у вас много ответов, но я пытаюсь рассказать вам об основах.

Первый элемент - это встроенный элемент, поэтому, давая ему margin сверху, нам нужно преобразовать его в элемент block. Я преобразован в встроенный блок, потому что он близок к встроенному и имеет функции блочных элементов.

Во-вторых, вам нужно дать прописку справа и слева больше, чем сверху и снизу, потому что сами цифры простираются сверху вниз, поэтому она становится разумной по высоте. НО, поскольку мы хотим сделать span ROUND, чтобы мы дали им дополнение больше слева и справа чтобы освободить место для BORDER RADIUS.

В-третьих, вы устанавливаете радиус границы, который должен быть больше PADDING + ширины содержимого, поэтому вокруг 27px вы получите требуемую округлость, но для безопасного покрытия всех цифр вы можете установить его на более высокое значение.

Практический пример.

Ответ 3

Использование CSS3:

span
{-moz-border-radius: 20px;
    border-radius: 20px;
border-color:black;
    background-color:black;
color:white;
    padding-left:15px;
    padding-right:15px;
    padding-top:10px;
    padding-bottom:10px;
    font-size:1.3em;
}

http://jsfiddle.net/NXZnq/

Ответ 4

Стеновое свойство border-radius можно использовать для одновременного определения всех четырех углов. Свойство принимает один или два набора значений, каждый из которых состоит из одной или четырех длин или процентов.

Синтаксис:

[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

Примеры:

border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px;
border-radius: 5px;
border-radius: 5px 10px / 10px;

Я ваш случай

span {
    border-radius: 100px;
    background: #000;
    color : white;
    padding : 10px 15px;


}

Проверьте это демо http://jsfiddle.net/daWcc/

Ответ 5

В дополнение к другим решениям http://css3pie.com/ отлично справляется с polyfill для старых версий Internet Explorer

РЕДАКТИРОВАТЬ: не требуется с 2016 года