従來の角丸生成スキームでは、背景パターンとして複數(shù)の畫像を使用する必要があります。 CSS3 の登場により、これらの畫像の作成に時間を無駄にする必要がなくなりました。必要なのは、ブラウザ IE 9、Opera 10.5、Safari 5、Chrome 4、Firefox 4 をサポートする border-radius 屬性だけです

1. border -radius プロパティ

CSS3 の角の丸い場合は、border-radius (「境界線の半徑」を意味します) という 1 つのプロパティを設(shè)定するだけで済みます。このプロパティに値を指定して、4 隅すべての半徑を同時に設(shè)定します。すべての法的な CSS 測定値 (em、px、パーセントなど) を使用できます。

例として、以下は div ボックス (幅と高さは 200、背景は赤、境界線は 2px ソリッド #000)

css3 (border-radius) 境界線フィレットの詳細な説明

次に円を設(shè)定します角の半徑は 50px、つまり:

border-radius:50px;

css3 (border-radius) 境界フィレットの詳細な説明

このステートメントは、各フィレットの「水平半徑」と「垂直半徑」も 50px に設(shè)定します。

css3(border-radius)ボーダー角丸詳細解説

border-radiusは1～4個の値を同時に設(shè)定できます。 (前のマージンとパディングについて考えてください) 値を設(shè)定すると、4 つのフィレットすべてがこの値を使用することになります。 2 つの値が設(shè)定されている場合、左上隅と右下隅は最初の値を使用し、右上隅と左下隅は 2 番目の値を使用することを意味します。 3 つの値が設(shè)定されている場合、最初の値は左上隅に使用され、2 番目の値は右上隅と左下隅に使用され、3 番目の値は右下隅に使用されることを意味します。 4つの値が設(shè)定されている場合は、左上隅、右上隅、右下隅、左下隅（時計回りの順）に対応します。

例:

border-radius:50px 25px; //表示左上角和右下角使用第一個值，右上角和左下角使用第二個值

css3(border-radius) ボーダーの角丸の詳細説明

border-radius:25px 10px 50px; //左上角使用第一個值，右上角和左下角使用第二個值，右下角使用第三個值

css3(border-radius) ボーダーの角丸の詳細説明

border-radius:25px 10px 50px 0;//左上角、右上角、右下角、左下角(順時針順序)

css3(境界線- radius) 境界円 角度の詳しい説明

border-radius では、スラッシュを使用して 2 番目の値セットを設(shè)定することもできます。このとき、最初の値は水平方向の半徑を表し、2 番目の値は垂直方向の半徑を表します。 2 番目の値セットも 1 ～ 4 個の値を同時に設(shè)定でき、適用ルールは最初の値セットと同じです。

border-radius:50px/25px;

css3(border-radius)ボーダー角丸加工の詳しい解説

border-radius: 100px 25px 80px 5px / 45px 25px 30px 15px;

css3(border-radius)ボーダーの角丸の詳しい解説

2.個別の角丸の設(shè)定

4つの角丸を同時に設(shè)定するだけでなく、各コーナーを個別に設(shè)定します。四隅に対応して、CSS3 は 4 つの個別のプロパティを提供します:

* border-top-left-radius

* border-top-right-radius

* border-bottom-right-radius

* border-bottom-left-radius

これら 4 つのプロパティには、同時に 1 ～ 2 つの値を設(shè)定できます。値を 1 に設(shè)定すると、水平半徑が垂直半徑と等しいことを意味します。 2 つの値が設(shè)定されている場合、最初の値は水平方向の半徑を表し、2 番目の値は垂直方向の半徑を表します。

border-top-left-radius: 50px;

css3 (border-radius) ボーダーフィレットの詳細 border-radius) border 角丸の詳細説明

border-top-left-radius: 50px 100px;//第一個值表示水平半徑，第二個值表示垂直半徑。

実裝コード

width:0;
height:0;
border:100px solid gray;
border-radius:100px;
border-right-color:#fff;