CSS3 border-radius 丸角の実装方法と使い方の詳しい説明

以前は、角を丸くするのは非常に面倒でしたが、CSS3 では、角を丸くするのは非常に簡単になり、border-radius という 1 つの文だけで済みます。以下、青島スターネットワークが border-radius の具体的な使用方法を紹介します。

CSS3 の丸い角には、 border-radius (「境界の半径」を意味する) という 1 つのプロパティのみを設定する必要があります。このプロパティに値を指定すると、4 つの角すべての半径が同時設定されます。すべての合法的な CSS メトリックを使用できます: em、ex、pt、px、パーセンテージなど。

border-radius のブラウザサポート

IE 9、Opera 10.5、Safari 5、Chrome 4、Firefox 4 はすべて border-radius プロパティをサポートしています。

Safari と Chrome の以前のバージョンでは、-webkit-border-radius プロパティがサポートされています。

Firefox の以前のバージョンでは、-moz-border-radius プロパティがサポートされていました。

現時点では、互換性を確保するためには、-moz-border-radius と border-radius を同時に設定するだけで済みます。

-moz-border-radius: 15px;
境界線の半径: 15px;

(注意: border-radius は最後に宣言する必要があります。そうでない場合は無効になる可能性があります。)

さらに、Firefox の初期バージョンでは、標準の構文とは若干異なる、単一の丸い角の構文が使用されていました。

-moz-border-radius-topleft (標準構文: border-top-left-radius)
-moz-border-radius-topright (標準構文: border-top-right-radius)
-moz-border-radius-bottomleft (標準構文: border-bottom-left-radius)
-moz-border-radius-bottomright (標準構文: border-bottom-right-radius)

border-radiusの例

#rcorners1 {
    境界線の半径: 25px;
    背景: #8AC007;
    パディング: 20px;
    幅: 200ピクセル;
    高さ: 150px;
}
 
#rcorners2 {
    境界線の半径: 25px;
    境界線: 2px 実線 #8AC007;
    パディング: 20px;
    幅: 200ピクセル;
    高さ: 150px;
}
 
#rcorners3 {
    境界線の半径: 25px;
    背景: url(paper.gif);
    背景位置: 左上;
    背景繰り返し: 繰り返し;
    パディング: 20px;
    幅: 200ピクセル;
    高さ: 150px;
}

CSS3 border-radius - 各角の丸みを指定します

border-radius プロパティに値を 1 つだけ指定すると、 4 つの丸い角が生成されます。

ただし、4 つのコーナーを 1 つずつ指定する場合は、次のルールを使用できます。

4 つの値: 最初の値は左上隅、2 番目の値は右上隅、3 番目の値は右下隅、4 番目の値は左下隅です。

3つの値：最初の値は左上隅、2番目の値は右上隅と左下隅、3番目の値は右下隅です

2つの値: 最初の値は左上隅と右下隅、2番目の値は右上隅と左下隅です

1つの値: 4つの角すべてが同じ丸みを帯びた値を持ちます

CSS3 border-radius 単一丸角設定

4つの角の丸みを一括で設定できるほか、各角を個別に設定することもできます。 4 つのコーナーに対応して、CSS3 では 4 つの個別のプロパティが提供されます。

左上の境界線の半径

境界線の右上の半径

境界線の右下の半径

左下の境界線の半径

CSS3 border-radius 丸角の実装と使用法に関するこの記事はこれで終了です。CSS3 border-radius 丸角に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。