css - CSSを使用してコンテンツの周りに円を描く方法は？

Question

このような

このコードだけで

<span>1</span>

Answer 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/では、コンテンツの長さの変化に反応する円をレンダリングする方法を確認できます。
最後の円の内容を編集して、直径がどのように変化するかを確認することもできます。

Answer 2

あなたは今、多くの答えを持っていますが、私はあなたに基本を伝えようとします.

最初の要素はインライン要素なので、上からマージンをとってブロック要素に変換する必要があります。インラインに近く、ブロック要素の特徴があるため、インラインブロックに変換しました。

第二に、数字自体が上から下に伸びているため、上下よりも左右に多くのパディングを与える必要がありますが、スパンを丸くしたいので、スペースを空けるために左右に多くのパディングを与えます境界半径用。

3 番目に、border-radius を PADDING + コンテンツ自体の幅よりも大きくする必要があるため、27px 前後で必要な丸みが得られますが、すべての数字を安全にカバーするには、より高い値に設定できます。

実用例。

Answer 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/

Answer 4

border-radius 省略形プロパティを使用して、4 つの角すべてを同時に定義できます。このプロパティは、それぞれが 1 ～ 4 の長さまたはパーセンテージで構成される 1 つまたは 2 つの値のセットを受け入れます。

構文:

[ <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/