CSS3の角丸に関する関連知識を詳しく解説

CSS3 角丸

CSS3 border-radius プロパティを使用すると、任意の要素に「角丸」を作成できます。

ブラウザのサポート

表内の数字は、この属性をサポートする最初のブラウザのバージョン番号を表します。

-webkit- または -moz- の前の数字は、そのプレフィックスをサポートする最初のバージョンを示します。

CSS3 border-radius プロパティ

CSS3 border-radius プロパティを使用すると、任意の要素に「丸い角」を作成できます。

コードは次のとおりです:

#rcorners1 {
    border-radius: 25px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}
#rcorners2 {
    border-radius: 25px;
    border: 2px solid #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}
#rcorners3 {
    border-radius: 25px;
    background: url(paper.gif);
    background-position: left top;
    background-repeat: repeat;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

CSS3 border-radius - それぞれの丸い角を指定します

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

ただし、四隅を 1 つずつ指定したい場合は、次のルールを使用できます:

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

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

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

1 つの値: 4 つのフィレット値は同じです

以下はソースコード:

#rcorners4 {
    border-radius: 15px 50px 30px 5px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}
#rcorners5 {
    border-radius: 15px 50px 30px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}
#rcorners6 {
    border-radius: 15px 50px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

楕円のコーナーも作成できます:

例

#rcorners7 {
    border-radius: 50px/15px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}
#rcorners8 {
    border-radius: 15px/50px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}
#rcorners9 {
    border-radius: 50%;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px;
}

【関連推奨事項】

1 特別な推奨事項: 「php Programmer Toolbox」V0.1バージョンのダウンロード

2 無料の CSS オンライン ビデオ チュートリアル

3. php.cn Dugu Jiijian (2) - CSS ビデオ チュートリアル

以上がCSS3の角丸に関する関連知識を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。