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

推薦する

div タグ内の要素の margin-top が無効である場合の解決策

タイトル通りです。その質問は非常に奇妙です。要素の親タグはdivで、幅や高さなどの属性は設定されてい...

Ubuntu16.04にclionをインストールするプロセス全体と手順の詳細な説明

CLion のプロセス全体を最初から説明します。CLion は、JetBrains がリリースした新...

DockerイントラネットはDNSを構築し、ip:port操作の代わりにドメイン名アクセスを使用します

たとえば、イントラネットに Jenkins サーバーがある場合、そのサーバーにアクセスするには、その...

Vue大画面表示適応方法

この記事では、vueの大画面表示適応の具体的なコードを参考までに紹介します。具体的な内容は以下のとお...

JS デコレータ パターンと TypeScript デコレータ

目次デコレータパターンの紹介TypeScript のデコレータデコレータの使用デコレーターファクトリ...

MySQL の NULL 値に関する体験談と分析チュートリアルシリーズ

目次1. テストデータ2. ヌル値による不便3. スペース、空の値、null をどのように判断すれば...

Tkinterはjsキャンバスを使用してグラデーションカラーを実現します

目次1. RGBを使用して色を表す2. Tkinter キャンバスコンポーネント3. グラデーション...

自動ウェブページ更新と自動ジャンプのサンプルコード

ウェブページの自動更新: <head></head> の間に次のコードを追加...

CSS を使用して複数列の等高レイアウトを設定する方法の例

最初は、複数の列のコンテンツのサイズと高さが異なります。ここで、表示する背景を異なるものに設定し、各...

ルート変更を監視するJavaScriptの詳細な説明

目次歴史pushState() メソッドpushState() の使用シナリオreplaceStat...

N キロメートル以内のデータを検索する MySQL の簡単な例

地球の円周率と半径、検索ポイントの経度と緯度から、検索ポイントと検索データテーブル間の距離はNキロメ...

CSS の Display、Visibility、Opacity、rgba、z-index: -1 の違い

ウェブページ上のいくつかの要素の非表示、透明、その他のプロパティを制御する必要があることがよくありま...

VUE+Express+MongoDBのフロントエンドとバックエンドの分離によるノートウォールの実現

付箋紙の壁シリーズを実現しようと思っています。シンプルなものはシンプル、複雑なものは多機能です。開発...

カルーセル効果を実現するための純粋なjs

この記事では、カルーセルマップの効果を実現するためのjsの具体的なコードを参考までに共有します。具体...

Alibaba Cloud Server Tomcatにアクセスできません

目次1. はじめに2. 解決策2.1 ファイアウォールを設定してポートを開く2.3 ポートを確認し、...