web-dev-qa-db-ja.com

CSSを使用してコンテンツの周りに輪を作る方法は？

このような

circle around content

このコードのみで

<span>1</span>
csscss-shapes
59
Jitendra Vyas

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

95
Jose Rui Santos

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/

6
Curt

今、多くの答えがありますが、基本を教えてみます。

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

第二に、数字自体が上から下に伸びているため、上と下よりも左右にパディングを与える必要がありますが、適切な高さを取得しますが、スパンをラウンドさせたいので、スペースを作るために左右にパディングを追加しますBORDER RADIUSの場合。

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

実用例 。

6
Shawn Taylor

Border-radius shorthandプロパティを使用して、4つのコーナーすべてを同時に定義できます。このプロパティは、1つまたは2つの値セットを受け入れます。各セットは、1つから4つの長さまたはパーセンテージで構成されます。

構文：

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

4
Rupesh Pawar

他のソリューションに加えて、 http://css3pie.com/ は古いInternet Explorerバージョンのポリフィルとして素晴らしい仕事をします

編集：2016年以降は不要

0
Urs