border-radiusは要素に丸い境界線を追加する方法です

border-radiusは要素に丸い境界線を追加する方法です

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

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

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

上部の実線半円:

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

XML/HTML コードコンテンツをクリップボードにコピー
  1. div{
  2.   
  3. height:50px;/*幅の半分*/
  4.   
  5. 幅:100ピクセル;
  6.   
  7. 背景:#9da;
  8.   
  9. border-radius:50px 50px 0 0;/*半径は少なくとも高さの値である必要があります*/
  10.   
  11. }

塗りつぶされた円:

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

次のコード:

CSSコードコンテンツをクリップボードにコピー
  1. div{
  2.   
  3.   高さ: 100px ; /*幅の設定と同じ*/   
  4.   
  5.   : 100px ;
  6.   
  7.   背景: #9da ;
  8.   
  9.   border -radius: 50px ; /*4つの角の半径の値はすべて幅または高さの値の半分に設定されます*/   
  10.   
  11. }
XML/HTML コードコンテンツをクリップボードにコピー
  1. <!doctype html >   
  2. <html>   
  3. <ヘッド>   
  4. <メタ 文字セット= "utf-8" >   
  5. <タイトル>境界線の半径</ www.dztcsd.com /タイトル>   
  6. <スタイル タイプ= "text/css" >   
  7. div.circle{
  8. height:100px;/*幅の設定と同じ*/
  9. 幅:100ピクセル;
  10. 背景:#9da;
  11. border-radius:50px;/*4つの角の半径の値はすべて幅または高さの値の半分に設定されます*/
  12. }
  13. /*タスク部分*/
  14. div.半円{
  15. 高さ:100px;
  16. 幅:50px;
  17. 背景:#9da;
  18. 境界線の半径:?;
  19. }
  20.       
  21. </スタイル>   
  22. </ヘッド>   
  23. <本文>   
  24. < div  クラス= "円" >   
  25. </div>   
  26. <br />   
  27. <!--タスクセクション-->   
  28. < div  クラス= "半円" >   
  29. </div>   
  30.   
  31. </本文>   
  32. </html>   

以上が、要素に丸い境界線を追加するborder-radiusメソッドの内容です。皆様のお役に立てれば幸いです。123WORDPRESS.COMを応援してください〜

<<:  メタを使用してトラフィックキャッシュをキャンセルし、ページにアクセスするたびにページを更新して簡単にデバッグできるようにします。

>>:  Windows Server 2008R2、2012、2016、2019 の違い

推薦する

CSS レスポンシブ レイアウト システムの例コード

レスポンシブ レイアウト システムは、今日の一般的な CSS フレームワークではすでに非常に一般的で...

Vue.js でフォントを読み込む正しい方法

目次font-faceでフォントを正しく宣言するフォントをプリロードするフォントをホストするにはli...

22 Vue 最適化のヒント (プロジェクトの実践)

目次コードの最適化v-for でキーを使用するv-if/v-else-if/v-else でキーを使...

Linux デバイス用ネットワーク ドライバーの紹介

有線ネットワーク: イーサネット 無線ネットワーク: 4G、WiFi、Bluetooth、5G 概要...

Hyper-V の紹介とインストールと使用 (詳細な図解)

はじめに:IT 業界の巨人である Microsoft 独自の仮想化技術は、VMware や Citr...

Tomcat が応答データグラムを書き戻すタイミングの詳細な分析

疑問が生じるこの質問は、ファイルのダウンロードを記述しているときに発生しました。HttpServle...

CSS は、小さな鋭角のチャット ダイアログ ボックスで鋭角の吹き出し効果を実現します。

1. CSS を使用して、小さな尖った角のチャット ダイアログ ボックスと尖った角の吹き出しを描画...

Javascript における非同期待機の詳細な理解

この記事では、async/await がすべての JavaScript 開発者にとって非同期プログラ...

読み込み進捗バーのネイティブ JS 実装

この記事では、ネイティブ JS によって実装された動的読み込みプログレス バーの特殊効果を紹介します...

Dockerを使用してMySQL 8.0をデプロイする方法の例

1. 公式サイトを参照してdockerをインストールする2. MySQLイメージをプルします(デフォ...

純粋な JS を使用して vue.js で双方向バインディング機能を実装する方法

目次まず、双方向バインディングを実装するアイデアについて説明します。これらの機能を実装するための j...

MySQL でテーブル データを削除した後もディスク領域がまだ占有されているのはなぜですか?

目次1.MySQLデータ構造2. テーブルファイルのサイズは変更されておらず、MySQLの設計に関連...

https ウェブサイトを展開し、Nginx でアドレス書き換えを構成するための詳細な手順

Nginx は、高性能な Web サイト サーバーおよびリバース プロキシ サーバーであり、IMAP...