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

推薦する

React Native APPのアップデートに関する簡単な説明

目次アプリ更新プロセス大まかなフローチャートアプリ情報の更新1. まず取得する必要があるファイルアド...

MySQL はデータベースを動的に更新します スクリプト例の説明

具体的なupgradeスクリプトは次のとおりです。インデックスを動的に削除する アップグレードが存在...

MySQL デッドロック ルーチン: 一意のインデックスの下でのバッチ挿入順序の不一致

序文デッドロックの本質はリソースの競合です。バッチ挿入の順序が一貫していないと、デッドロックに陥りや...

Docker環境にJenkinsコンテナをインストールする詳細なチュートリアル

推奨される Docker 学習教材: https://www.runoob.com/docker/d...

ApplicationHost.config (IIS ストレージ構成領域ファイル) の概要

新しく作成された Web サイトの場合は、ASP.NET MVC5 を例に挙げます。セッションを処理...

Vue の計算プロパティの紹介

目次1. 計算プロパティとは何ですか? 2. 計算プロパティの構文3. 例1. 計算プロパティとは何...

HTML ul 順序なしテーブルのアプリケーションネスト

順序なしリストのアプリケーションネストコードをコピーコードは次のとおりです。 <!DOCTYP...

Vue ElementUI で Excel ファイルを手動でサーバーにアップロードする方法の詳細な説明

目次概要プロパティ設定処理ロジック概要具体的な需要シナリオは次のとおりです。 Excel ファイルを...

Reactにおけるキーの役割の詳細な説明

目次質問: ボタンをクリックすると、スパンの色が赤に変わりますか?上記の問題を分析します。 2番目の...

Docker プライベートリポジトリの管理とローカルリポジトリ内のイメージの削除

1: Dockerプライベートウェアハウスのインストール1. イメージリポジトリからイメージをダウン...

MySQLとRedisキャッシュ間の同期ソリューションについての簡単な説明

目次1. ソリューション 1 (UDF)デモケース2. ソリューション2（binlogの解析）キャナ...

Windows 8 での ssh コマンドの使用記録

1. 仮想マシンとgit bashウィンドウを開き、接続の準備をします2. 仮想マシンでifconf...

Navicat 接続 MySQL エラーの説明分析

目次環境仮想マシンバージョンMySQL バージョン事前準備MySQLの実行ステータスを確認するルート...

データベースマルチテーブル接続クエリの実装方法の詳細説明

データベースマルチテーブル接続クエリの実装方法の詳細説明結合演算子を使用して複数のテーブルクエリを実...

Web ベースの電子メール コンテンツの HTML フォーマット標準の概要

1. ページ要件1) 標準のヘッダーとフッターを使用するXML/HTML コードコンテンツをクリップ...