CSS3で角丸を設定する方法

CSS3 では、「border-radius」属性を使用して、任意の要素の角を丸く設定できます。角を丸く設定するための完全なコードは、「border-radius:25px;padding:20px;width:」のようになります。 200ピクセル;高さ: 150ピクセル;"。

この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。

CSS3 border-radius プロパティ

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

次は 3 つの例です:

1. 角が丸い要素の背景色を指定します:

2.角の丸い要素の境界線 Corner:

3. 背景画像の要素の角の丸い部分を指定します:

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

Example

#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 つの丸い角は同じ値です
[推奨学習: "

css ビデオ チュートリアル

"]

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