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

要素に丸い境界線を追加する 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のウェブページスクリーンショット機能の詳しい説明

推薦する

MySQL 圧縮の使用シナリオとソリューション

導入圧縮トランスポート プロトコル、圧縮列ソリューション、圧縮テーブル ソリューションなど、MySQ...

HTML テーブルタグチュートリアル (25): 垂直配置属性 VALIGN

垂直方向では、行の配置を上、中央、下に設定できます。基本的な構文<TR VALIGN=&quo...

HTML テーブル マークアップ チュートリアル (40): ヘッダーの暗い境界線の色属性 BORDERCOLORDARK

テーブルヘッダーでは、暗い境界線の色を個別に定義できます。基本的な構文<TH 境界線の色を暗く...

display:olck/none を使用してメニューバーを作成する方法

display:bolck/none によるメニューバーの完成の効果 図 1:まず、完成したエフェク...

Reactの状態の理解についての簡単な分析

複雑なコンポーネント (クラス コンポーネント) と単純なコンポーネント (関数コンポーネント) を...

重複したMySQLレコードを現場でチェックし、処理する実践的な記録

目次序文分析するデータ合計繰り返し率どこにあるかと持っているかの違い要約する序文私はソフトウェアの導...

in() の ID の順序に従った Mysql クエリ結果の順序の詳細な説明

in() の ID の順序に従った Mysql クエリ結果の順序の詳細な説明コード例: <se...

Oracle と MySQL の高可用性ソリューションの比較分析

Oracle と MySQL の高可用性ソリューションについては、以前からまとめたいと思っていたので...

ウェブインターフェースデザインでウェブサイトのスタイルガイドを作成する方法（画像とテキスト付き）

スタイル ガイドとは何でしょうか? 簡単に言えば、ストーリーを伝える方法を説明するドキュメントです。...

Dockerコマンドは一般ユーザーが実行できるように実装されている

dockerをインストールすると、通常はdockerユーザーグループが作成されます。ステップ2: 現...

Vue3 の SetUp 関数のプロパティとコンテキスト パラメータの詳細な説明

1. setUp関数の最初のパラメータpropsセットアップ(プロパティ、コンテキスト){}最初のパ...

CentOS7 で jar アプリケーションの起動を設定する方法

プロジェクトの展開中に遭遇した落とし穴Zhihudemo を展開する際、Jenkins などの自動展...

ダイナミッククロックを実現するJS+CSS

この記事の例では、動的な時計を実装するためのJS + CSSの具体的なコードを参考までに共有していま...

CSSカウンター関連属性の学習の詳細な説明

CSS カウンター属性はほぼすべてのブラウザ (IE8 を含む) でサポートされていますが、あまり使...

htm 初心者ノート（初心者は必ず読んでください）

1. HTMLとは何かHTML (ハイパーテキスト マークアップ言語): ハイパーテキスト マーク...