border-radius(CSS3プロパティ)

1. border-radiusの完全な表現:

border-radius:要素に丸みを帯びた境界線を追加します。
border-radius:10px 20px 30px 40px / 40px 30px 20px 10px
「/」の前の4つの値は、丸みを帯びた角の水平方向の半径を示し、次の4つの値は、丸みを帯びた角の垂直方向の半径を示します。
ここに画像の説明を挿入します
水平半径と垂直半径は次のように表されます。
ここに画像の説明を挿入します
例:border-top-left-radius
border-radius: 2em 1em 4em / 0.5em 3em;と同等
:2em 0.5em;
border-top-right-radius:1em 3em;
border-bottom-right-radius:4em 0.5em ;
border-bottom -left-radius:1em 3em;

一般的な略語:

  • border-radius:30px / 20px;は、丸みを帯びた各コーナーの水平方向の半径が30px、垂直方向の半径が20pxであることを示します。
  • border-radius:30px; 等同到:border-radius:30px 30px 30px 30px / 30px 30px 30px 30px;

2つの異なる数の属性値

Border-radiusは、最大4つのborder-*-radiusプロパティを指定できる複合属性です: border-top-left-radius(左上隅)、border-top-right-radius(右上)、border-bottom-right -半径(右下隅)、border-bottom-left-radius(左下隅)
ここに画像の説明を挿入します

  • 4つの値:border-radius:30px 20px 30px 10px;(各値は丸みを帯びた角の半径値を表し、各角の水平および垂直半径を対応する値に設定します)
    左上(10px)、右上(20px)、右下(30px)、左下(10px)

    ここに画像の説明を挿入します

  • 3つの値:border-radius:30px 50px 10px;(左上、右上、左下、右下)、対角線は等しい
    ここに画像の説明を挿入します

  • 2つの値:border-radius:90px 50px;(最初の値は左上隅と右下隅、2番目の値は右上隅と左下隅です)

ここに画像の説明を挿入します

  • 1つの値(一般的に使用):border-radius:50px;これは通常、丸い境界線、丸いボタンを設定するために使用され、4つの角は同じ丸い値を持ちます。

ここに画像の説明を挿入します

属性値には、px、%、emを指定できます。

  • 1.px:半径値は設定されたピクセル値です
  • 2.%:
     div{
    
    
		width:200px;
		height:100px;
		border-radius:50%;
		}
以元素的宽高乘以百分数后得到值r1和r2,进行绘制。等同于border-radius:100px/50px;

ここに画像の説明を挿入します
注:バーダー半径を使用して要素を丸くする場合、境界線とパディングによってボックスモデルのサイズが変わることに注意してください。このとき、border-radiusを直接50%に設定すると円を形成できますが、コンテンツ領域の幅と高さの半分に設定しただけでは、通常の円は形成されません。
ここに画像の説明を挿入します
ここに画像の説明を挿入します

  • 3. Em:emは最も一般的な相対長さの単位であり、植字で使用される測定方法です。ベンチマーク値は、現在の要素のフォントサイズです。CSSでは、1emは現在の要素のフォントサイズを表し、実際の値は適用される要素によって異なります。
border-radius: 2em/1em

ここに画像の説明を挿入します

おすすめ

転載: blog.csdn.net/qq_43812504/article/details/110850778