HTMLは角丸四角形を簡単に実装します

HTMLは角丸四角形を簡単に実装します

質問: div+css と配置を使用して角丸四角形を実現するにはどうすればよいですか?

ソリューションの概要:

内容: まず、<body> タグ内に大きなレイヤーを追加します (大きなレイヤーは、全体の大きなフレームを固定するために使用されます)。次に、大きなレイヤーに 4 つの小さなレイヤーを含めます (4 つの小さなレイヤーは、それぞれ 4 つの丸い角で埋められます (PS で楕円形に事前に作成され、スライス ツールで切り取られます))

スタイル: <head> タグ内に設定される CSS のプロパティ:

1.位置: 相対的;

2. 幅と高さ

3 背景色;

4. 境界線（元の4隅の相対位置を調整するために使用します。境界線の設定は調整後に削除できます）

小さなレイヤーの CSS を設定するときに、各レイヤーに含める必要があるプロパティは次のとおりです。

1.位置：絶対;

2. 幅と高さ

3. 方向属性（左、右、下、上）

4.background: url ("") no-repeat; (すべての方向に角丸画像を導入)

角丸四角形を実装するコードは次のとおりです。

XML/HTML コードコンテンツをクリップボードにコピー
  1. <!doctype html >   
  2.   
  3. < html   lang = "ja" >     
  4.   
  5.   <ヘッド>   
  6.   
  7.    <メタ 文字セット= "UTF-8" >   
  8.   
  9.    <メタ  name = "ジェネレータ"  コンテンツ= "EditPlus®" >   
  10.   
  11.    <メタ 名前= "著者"  コンテンツ= "" >   
  12.   
  13.    <メタ  name = "キーワード"  コンテンツ= "" >   
  14.   
  15.    <メタ  name = "説明"  コンテンツ= "" >   
  16.   
  17.    < title >丸い角の制作</ title >   
  18.   
  19.    <スタイル タイプ=テキスト/css >   
  20.   
  21. #p
  22.   
  23.     
  24.   
  25. {
  26.   
  27. 位置:相対;
  28.   
  29. 幅:400ピクセル;
  30.   
  31. 高さ:200px;
  32.   
  33. 背景：黒;
  34.   
  35. マージン:自動;
  36.   
  37. }
  38.   
  39. #左上
  40.   
  41. {
  42.   
  43. 位置:絶対;
  44.   
  45. 幅:50px;
  46.   
  47. 高さ:50px;
  48.   
  49. 背景:url("images/11.jpg") 繰り返しなし;
  50.   
  51. }
  52.   
  53. #トップへ
  54.   
  55. {
  56.   
  57. 位置:絶対;
  58.   
  59. 幅:50px;
  60.   
  61. 高さ:50px;
  62.   
  63. 右:-9px;
  64.   
  65. 上:0px;
  66.   
  67. 背景:url("images/22.jpg") 繰り返しなし;
  68.   
  69. }
  70.   
  71. #下腹部
  72.   
  73. {
  74.   
  75. 位置:絶対;
  76.   
  77. 幅:50px;
  78.   
  79. 高さ:50px;
  80.   
  81. 左:0px;
  82.   
  83. 下:-14px;
  84.   
  85. 背景:url("images/33.jpg") 繰り返しなし;
  86.   
  87. }
  88.   
  89. #下から
  90.   
  91. {
  92.   
  93. 位置:絶対;
  94.   
  95. 幅:50px;
  96.   
  97. 高さ:50px;
  98.   
  99. 右:-9px;
  100.   
  101. 下:-14px;
  102.   
  103. 背景:url("images/44.jpg") 繰り返しなし;
  104.   
  105. }
  106.   
  107.    </スタイル>   
  108.   
  109.   </ヘッド>   
  110.   
  111.   <本文>   
  112.   
  113. < div   id = p >   
  114.   
  115. < div   id = plefttop > </ div >   
  116.   
  117. < div   id = prighttop > </ div >   
  118.   
  119. < div   id =左下> </ div >   
  120.   
  121. < div   id =下端> </ div >   
  122.   
  123. </div>​​   
  124.   
  125. </本文>   
  126.   
  127. </html>​​     
  128.   

注: 私のコードで使用されている CSS スタイルはインラインです。CSS スタイルには、インライン、埋め込み、外部の 3 種類があります。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

オリジナルリンク: http://www.cnblogs.com/cyn941105/p/5588940.html

<<:  ログインボックスのドラッグ効果を実現するためのJavascript

>>:  IDEA を MYSQL データベースに接続するための構成時に失敗する問題の解決策

推薦する

Vueのプラグインの仕組みとインストールの詳細を深く理解する

序文： Vue を使用する場合、多くの場合、カスタム プラグインをいくつか使用して記述し、 Vue....

Nginx ベースの HTTPS ウェブサイトを設定する手順

目次序文：暗号化アルゴリズム: 1. HTTPS の概要2. NginxはHTTPSウェブサイト設定...

Centos7 に PHP と Nginx をインストールする詳細なチュートリアル

Centos のサーバー側への適用がますます普及するにつれて、Centos7 もますます使用されるよ...

MySQL エラー「すべての派生テーブルには独自のエイリアスが必要です」の解決方法

MySQL は、マルチテーブルクエリを実行するときにエラーを報告します。 [SQL] SELECT ...

無効属性が設定されていてバックグラウンドがデータを読み取れない場合に、選択を読み取り専用にサポートする方法

コードをコピーコードは次のとおりです。 <span style="font-fami...

Day.js をベースにした JavaScript での日付処理のよりエレガントな方法

目次day.js を使用する理由モーメントデイ.js day.js がなければどうなるでしょうか? ...

CentOS 8.4 に Docker をインストールする詳細なチュートリアル

目次序文：システム要件:インストール環境:古いバージョンをアンインストールします: yum は具体的...

vue3 における vuex と pinia の落とし穴

目次導入インストールと使用方法文章の相違点と類似点の簡単な比較VuexとPiniaの長所と短所Pin...

Nginx ルーティング転送とリバースプロキシロケーション構成の実装

Nginx を設定する 3 つの方法最初の方法は、位置一致部分を直接置き換える。 2 番目の pro...

MySQL データの集約とグループ化

多くの場合、データを実際に取得せずに要約する必要があり、 MySQLこの目的のために特別な関数を提供...

DockerとFastDFSのインストールコマンドと使い方の詳しい説明

Dockerの機能1) すぐに始められるユーザーがプログラムを「Docker 化」するには、わずか数...

VMware Workstation と vSphere 間で仮想マシンを移行する (画像とテキスト)

1. Workstationで仮想マシンのハードウェアバージョンを変更するWorkstation ...

Linux に MySQL 8.0.x をインストールするための完全な手順

マイグレーションMySQL 入門MySQL はもともとオープンソースのリレーショナル データベース管...

JS でオブジェクトが空オブジェクトかどうかを判断する 5 つの方法

1. jsonオブジェクトをjson文字列に変換し、文字列が「{}」であるかどうかを判断します。 v...

Linux ファイル管理コマンド例の分析 [表示、閲覧、統計など]

この記事では、Linux ファイル管理コマンドについて例を挙げて説明します。ご参考までに、詳細は以下...