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 データベースに接続するための構成時に失敗する問題の解決策

推薦する

JS変数ストレージのディープコピーとシャローコピーの詳しい説明

目次可変タイプとストレージスペーススタックメモリとヒープメモリ基本的なデータ型参照タイプグラフィック...

MySQLインデックスの使用に関するヒントと注意事項

1. インデックスの役割一般的なアプリケーション システムでは、読み取りと書き込みの比率は約 10:...

クロスブラウザの問題に対する 5 つの解決策 (要約)

簡単なレビュー: ブラウザの互換性の問題は、しばしば頭痛の種となります。ここでは、これらの問題を回避...

Nginx インストールの詳細なチュートリアル

1. Nginxの簡単な紹介Nginx は、無料のオープンソースの高性能 HTTP サーバーおよびリ...

Windows で Nginx を使用して https サーバーとリバース プロキシを構成する際の問題

リクエストロジックフロントエンド --> https経由でnginxをリクエストnginx -...

jQueryは広告の表示と非表示のアニメーションを実装します

数秒後に広告が表示されて消えることがよくあります。この機能を実装するには、JQuery フレームワー...

MySQLデータベースのマスタースレーブ同期の実際のプロセスの詳細な説明

目次インストール環境の説明MySQLデータベースサービスをインストールするメインライブラリを構成する...

JavaScript ベースで年・月・日の 3 階層連携を実現

この記事では、年、月、日の3段階のリンクを実現するためのJavaScriptの具体的なコードを参考ま...

Apache SkyWalkingのセルフモニタリングを素早く有効にする方法を説明します

1. Prometheusテレメトリデータを有効にするデフォルトでは、テレメトリは次のように無効にな...

Linux環境でのshadowsocks+polipoグローバルプロキシの設定

1. シャドウソックスをインストールするsudo apt-get install python-pi...

RabbitMQ の Docker インストールと設定手順

目次単一マシンの展開オンラインプルミラーを見るRabbitMQを作成して実行するMQコンテナを正常に...

MySQL 構成 SSL マスタースレーブ レプリケーション

MySQL5.6 SSLファイルの作成方法公式ドキュメント: https://dev.mysql.c...

Ubuntu環境でのSSHの詳細なインストールと使用

SSH は Secure Shell の略で、安全な伝送プロトコルです。Ubuntu クライアントは...

nginxリバースプロキシを介したデバッグコードの実装

背景現在、会社のプロジェクトは、フロントエンドとバックエンドが分離された方法で開発されています。新し...

React Native の基本原則の深い理解 (Bridge of React Native)

この記事では、React Native の基本をすでに理解していることを前提とし、ネイティブと Ja...