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

推薦する

Node.jsはブレークポイント再開を実装する

目次ソリューション分析スライス履歴書のダウンロード具体的な解決プロセス論理的分析フロントエンドサーバ...

Chrome デベロッパー ツールの詳細な紹介 - タイムライン

1. 概要ユーザーは、アクセスする Web アプリケーションがインタラクティブでスムーズに実行される...

bashコマンドの使い方の詳細な説明

Linux では、基本的に vi エディタのように「.sh」拡張子を持つテキストの処理と実行を記述す...

MySQL explain クエリ命令情報の取得原理と例

explain はクエリ実行プラン情報を取得するために使用されます。 1. 文法次のように、sele...

Nginx http を https にアップグレードする手順を完了する

httpとhttpsの違いは一部のウェブサイトでは、http を開くと、安全ではないというメッセージ...

Ubuntu での Subversion (SVN) の詳細なインストールと設定

ソフトウェア開発者であれば、Subversion に精通している必要があります。 Subversio...

HTML テーブル マークアップ チュートリアル (18): テーブル ヘッダー

<br />ヘッダーはテーブルの最初の行を参照します。ヘッダー内のテキストは中央揃えで太...

小さな画面のモバイルデバイス向けにWebページを設計する際に注意すべきこと

その理由は、このタイプの Web ページが WAP と呼ばれるワイヤレス プロトコルから生成されたた...

VMware仮想マシンブリッジによるインターネット相互接続を実現する方法

VMware をインストールして新しい仮想マシンを作成したら、オプション バーの [編集] - [仮...

Vue フロントエンドで PDF を生成してダウンロードする方法

目次1. インストールと導入2. PDFファイルをパッケージ化してエクスポートする方法構成の詳細PD...

503 サービス利用不可エラーの解決方法の説明

1. Webページを開くと503サービス利用不可が表示されますが、更新すると正常にアクセスできます。...

Alibaba Cloud Ubuntu 16.04でpptpdサービスを構築する方法

1. PPTP VPNを構築するには、ポート1723とGREプロトコルを開く必要があります。 1. ...

Dockerイメージを完全にアンインストールする手順

1. docker ps -a 実行中のイメージプロセスを表示する [root@mylinux~]#...

jwtを使用してノードによって生成されたトークンをどこに保存するかについての簡単な説明

A: 通常はクライアントに保存されます。 jwt または JSON Web Token は、リクエス...

Linux サーバーと Windows システム間でファイルをアップロードおよびダウンロードする方法

背景: Linux サーバーのファイルのアップロードとダウンロード。 XShell+Xftp インス...