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

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

58 голосов
/ 20 февраля 2012

Как это

circle around content

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

<span>1</span>

Ответы [ 6 ]

94 голосов
/ 20 февраля 2012

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/ вы можете увидеть, как визуализировать окружность, которая реагирует на изменение длины содержимого.
Вы даже можете редактироватьсодержимое на последнем круге, чтобы увидеть, как изменяется диаметр.

6 голосов
/ 20 февраля 2012

У вас сейчас много ответов, но я постараюсь рассказать вам основы.

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

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

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

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

6 голосов
/ 20 февраля 2012

Использование 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 голосов
/ 20 февраля 2012

Сокращенное свойство 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/

0 голосов
/ 03 июня 2013

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

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

0 голосов
/ 20 февраля 2012
...