CSSの角丸プロパティとは何ですか?

CSS の角丸属性は border-radius で、[border-radius: 15px 50px 30px 5px] のように、任意の要素の角を丸くすることができます。 border-redius 属性に値を 1 つだけ指定すると、4 つの丸い角が生成されます。

角丸属性は border-radius 属性で、これを使用して任意の要素に「角丸」を作成できます。

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

border-radius 所有四个边角 border-*-*-radius 属性的缩写 border-top-left-radius 定义了左上角的弧度 border-top-right-radius 定义了右上角的弧度 border-bottom-right-radius 定义了右下角的弧度 border-bottom-left-radius 定义了左下角的弧度

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

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

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

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

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

1 つの値: 4 つの丸い角は同じ値です。

以下に 3 つの例を示します。

1. 4 つの値 - border-radius: 15px 50px 30px 5px:

2. 3 つの値 - border -radius: 15px 50px 30px:

3. 2 つの値 - border-radius: 15px 50px:

#コード例:

#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; }

関連する推奨事項:CSS チュートリアル

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