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 サイトの他の関連記事を参照してください。