css3を使用して丸みのあるグラフィックを作成する

CSS3を使って角丸グラフィックを作成する方法を学んだばかりですが、角丸サイズの設定方法がわからないかもしれないので、以下で説明します。

基本知識

(1) border-radius は CSS3 で新たに追加された属性で、ボックスの角の丸みを設定するために使用されます。

表記

• 4 つの値の表現: 左上、右上、右下、左下 (時計回り) 例: border-radius: 10px 20px 30px 40px;
• 単一値表現: 4 つの角は次のように均一に設定されます。border-radius: 10px;
• 分割表記:
  • 左上: border-top-left-radius: 20px;
  • 右上: border-top-right-radius: 20px;
  • ​ 左下：border-bottom-left-radius: 20px;
  • 右下: border-bottom-right-radius: 20px;
    属性値: 長さの単位 (px など) またはパーセンテージを指定できます。

(2) border-radius は、コーナーごとに 2 つの重要なエッジの半径を個別に設定することもできます。

• border-top-left-radius: 上端の半径 左端の半径;
• border-top-right-radius: 上端の半径 右端の半径;
• border-bottom-left-radius: 下端の半径 左端の半径;
• border-bottom-right-radius: 下端の半径 右端の半径;

border-radius は複合属性であり、上記 4 つの属性を一律に設定できます。

border-radius: 左上隅の上端半径 右上隅上端半径 右下隅下端半径 左下隅下端半径 / 左上隅左端半径 右上隅右端半径 右下隅右端半径 左下隅左端の半径

例: border-radius: 20px 40px 60px 80px / 30px 60px 90px 120px;

場合

以下は事例です、一度打てば分かりますが、次のような図を作ってみましょう。

最初の写真を例に挙げます

1. まず、設定する必要があるコーナーを見つけます。明らかに、左上コーナーと右下コーナーです。
2. 次に、左上隅の上マージンが幅の 100% であり、左上隅の左マージンも高さの 100% であることがわかります。
3. 次に、このように角を設定できます（ボックスの幅が100ピクセル、高さが200ピクセルの場合）

 border-top-left-radius: 100px 200px;
 border-bottom-right-radius: 100px 200px;

または

 border-top-left-radius: 100%;
 border-bottom-right-radius: 100%;

もしくは全体的に書いてください

 border-radius: 100px 0 100px 0/200px 0 200px 0;

最初のグラフィックの完全なコードは次のとおりです。

 .box1 {
   
    
    
            width: 100px;
            height: 200px;