CSS3 の角丸プロパティの各値は何を表しますか?

CSS3では角丸属性「border-radius」には1～4個の属性値があり、4つの属性値を設定した場合、その属性値は左上隅、右上隅、下隅を表します角丸属性値の構文は「border-radius: 左上の角丸値、右上の角丸値、右下の角丸値、左下の角丸値」です。

このチュートリアルの動作環境: Windows 10 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

css3 の角丸プロパティの各値は何を表しますか?

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

border-radius プロパティは 1 つで、最大まで指定できます。 to four border -*- radius プロパティの複合プロパティ

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

ただし、四隅を 1 つずつ指定する場合は、次の規則を使用できます。

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

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

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

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

各半径の 4 つの値の順序は、左上隅、右上隅、右下隅、左下隅です。左下隅を省略した場合は、右上隅も同じになります。右下隅を省略した場合は、左上隅も同じになります。右上を省略した場合は左上と同じになります。

例 1

border-radius:2em;

は次と同等です:

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

例 2

border-radius: 2em 1em 4em / 0.5em 3em;

は次と同等です:

border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

(学習ビデオの共有: CSS ビデオ チュートリアル )

以上がCSS3 の角丸プロパティの各値は何を表しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。