要素に丸い境界線を追加する border-radius メソッド

border-radius:10px; /* すべての角は半径 10px で丸められます*/

border-radius: 5px 4px 3px 2px; /* 4つの半径値は、時計回りに左上隅、右上隅、右下隅、左下隅です*/

border-radius の値は px 単位でしか表現できないと考えないでください。パーセンテージや em も使用できますが、現時点では互換性はあまり良くありません。

上部の実線半円:

方法: 高さを幅の半分に設定し、左上隅と右上隅の半径のみを要素の高さに合わせて設定します (これより大きくてもかまいません)。

div{

       height:50px;/*幅の半分*/
       幅:100ピクセル;
     背景:#9da;
       border-radius:50px 50px 0 0;/*半径は少なくとも高さの値である必要があります*/
       }

塗りつぶされた円:

方法: 幅と高さの値が一定(つまり正方形)になるように設定し、4 つの角の半径の値をその半分の値に設定します。

次のコード:

div{
     height:100px;/*幅の設定と同じ*/
      幅:100ピクセル;
      背景:#9da;
      border-radius:50px;/*4つの角の半径の値はすべて幅または高さの値の半分に設定されます*/
      }

完全なコード

<!doctypehtml>
  <html>
  <ヘッド>
  <メタ文字セット="utf-8">
  <title>境界線の半径</www.dztcsd.com/title>
  <スタイル タイプ="text/css">
  div.circle{
       height:100px;/*幅の設定と同じ*/
       幅:100ピクセル;
       背景:#9da;
       border-radius:50px;/*4つの角の半径の値はすべて幅または高さの値の半分に設定されます*/
       }
   /*タスク部分*/
      div.半円{
        高さ:100px;
       幅:50px;
       背景:#9da;
       境界線の半径:?;
       }

         </スタイル>
  </head>
  <本文>
  <div class="circle">
  </div>
  <br/>
  <!--タスクセクション-->
  <div class="semi-circle">
  </div>

    </本文>
  </html>

要素に丸い境界線を追加する border-radius メソッドに関するこの記事はこれで終わりです。border-radius 丸い境界線に関するその他の関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: Linux クラウドサーバー上に SFTP サーバーとイメージサーバーを構築する方法

>>: Vueのウェブページスクリーンショット機能の詳しい説明