CSS를 사용하여 콘텐츠 주위에 원을 만드는 방법은 무엇입니까?

CSS를 사용하여 콘텐츠 주위에 원을 만드는 방법은 무엇입니까?

---

이렇게

이 코드만으로

<span>1</span>

---

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/ 에서 콘텐츠 길이의 변화에 ​​반응하는 원을 렌더링하는 방법을 볼 수 있습니다.
마지막 원의 내용을 편집하여 지름이 어떻게 변하는 지 볼 수도 있습니다.

---

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/

---

지금은 답이 많지만 기본을 말씀 드리려고합니다.

첫 번째 요소는 인라인 요소이므로 위쪽에서 여백을 제공하여 블록 요소로 변환해야합니다. 인라인에 가깝고 블록 요소의 기능이 있기 때문에 인라인 블록으로 변환했습니다.

둘째, 숫자 자체가 위에서 아래로 확장되어 적당한 높이가되기 때문에 좌우 패딩을 더 많이 주어야합니다.하지만 스팬을 ROUND로 만들고 싶기 때문에 공간을 만들기 위해 왼쪽과 오른쪽에 패딩을 더 많이 주어야합니다. BORDER RADIUS 용.

셋째, 테두리 반경을 PADDING + 콘텐츠 자체의 너비보다 커야하므로 약 27px 정도의 둥근 정도가 필요하지만 모든 숫자를 안전하게 덮으려면 더 높은 값으로 설정할 수 있습니다.

실제 예 .

---

The border-radius shorthand property can be used to define all four corners simultaneously. The property accepts either one or two sets of values, each consisting of one to four lengths or percentages.

The Syntax:

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

Examples:

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

I your case

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


}

Check this Demo http://jsfiddle.net/daWcc/

---

In addition to the other solutions, http://css3pie.com/ does a great job as a polyfill for old internet explorer versions

EDIT: not necessary as of 2016

---

There are soo many tutorials out there.. try them.. here are a few..

http://dev-tips.com/featured/css-tip-how-to-make-ircles-without-images

http://blog.ardes.com/2009/3/4/css-circles

http://bryanhadaway.com/how-to-create-circles-with-css/

참고URL : https://stackoverflow.com/questions/9358882/how-to-make-a-circle-around-content-using-css