HTML implementiert problemlos abgerundete Rechtecke

HTML implementiert problemlos abgerundete Rechtecke

Frage: Wie erreiche ich mit Div+CSS und Positionierung ein abgerundetes Rechteck?

Lösungsübersicht:

Inhalt: Fügen Sie zuerst eine große Ebene innerhalb des <body>-Tags hinzu (die große Ebene wird verwendet, um den insgesamt großen Rahmen zu fixieren), und dann enthält die große Ebene vier kleine Ebenen (die vier kleinen Ebenen sind jeweils mit vier abgerundeten Ecken gefüllt (mit PS vorab in eine elliptische Form gebracht und dann mit dem Slice-Werkzeug ausgeschnitten)).

Stil: Die Eigenschaften des CSS-Sets innerhalb des <head>-Tags:

1.Position: relativ;

2. Breite und Höhe;

3 Hintergrundfarbe;

4. Grenzlinie (wird verwendet, um die relativen Positionen der vier ursprünglichen Ecken anzupassen. Die Grenzlinieneinstellung kann nach der Anpassung gelöscht werden)

Beim Festlegen des CSS der kleinen Ebene müssen in jeder Ebene die folgenden Eigenschaften enthalten sein:

1.Position: absolut;

2. Breite und Höhe;

3. Richtungsattribute (links, rechts, unten, oben)

4.Hintergrund: URL ("") keine Wiederholung; (Einführung von Bildern mit abgerundeten Ecken in alle Richtungen)

Hier ist mein Code zur Implementierung des abgerundeten Rechtecks:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <!doctype html >   
  2.   
  3. < html   lang = "en" >     
  4.   
  5.   <Kopf>​​   
  6.   
  7.    < Meta   Zeichensatz = "UTF-8" >   
  8.   
  9.    < Meta   Name = "Generator"   Inhalt = "EditPlus®" >   
  10.   
  11.    < Meta   Name = "Autor"   Inhalt = "" >   
  12.   
  13.    < Meta   Name = "Schlüsselwörter"   Inhalt = "" >   
  14.   
  15.    < Meta   Name = "Beschreibung"   Inhalt = "" >   
  16.   
  17.    < Titel > Produktion abgerundeter Ecken </ Titel >   
  18.   
  19.    < Stil   Typ = Text /css >   
  20.   
  21. #P
  22.   
  23.     
  24.   
  25. {
  26.   
  27. Position: relativ;
  28.   
  29. Breite: 400px;
  30.   
  31. Höhe: 200px;
  32.   
  33. Hintergrund: schwarz;
  34.   
  35. Rand: automatisch;
  36.   
  37. }
  38.   
  39. #plefttop
  40.   
  41. {
  42.   
  43. Position: absolut;
  44.   
  45. Breite: 50px;
  46.   
  47. Höhe: 50px;
  48.   
  49. Hintergrund: URL("Bilder/11.jpg") keine Wiederholung;
  50.   
  51. }
  52.   
  53. #rechtsoben
  54.   
  55. {
  56.   
  57. Position: absolut;
  58.   
  59. Breite: 50px;
  60.   
  61. Höhe: 50px;
  62.   
  63. rechts: -9px;
  64.   
  65. oben: 0px;
  66.   
  67. Hintergrund: URL("Bilder/22.jpg") keine Wiederholung;
  68.   
  69. }
  70.   
  71. #linksunten
  72.   
  73. {
  74.   
  75. Position: absolut;
  76.   
  77. Breite: 50px;
  78.   
  79. Höhe: 50px;
  80.   
  81. links: 0px;
  82.   
  83. unten: -14px;
  84.   
  85. Hintergrund: URL("Bilder/33.jpg") keine Wiederholung;
  86.   
  87. }
  88.   
  89. #rechtsunten
  90.   
  91. {
  92.   
  93. Position: absolut;
  94.   
  95. Breite: 50px;
  96.   
  97. Höhe: 50px;
  98.   
  99. rechts: -9px;
  100.   
  101. unten: -14px;
  102.   
  103. Hintergrund: URL("Bilder/44.jpg") keine Wiederholung;
  104.   
  105. }
  106.   
  107.    </ Stil >   
  108.   
  109.   </ Kopf >   
  110.   
  111.   < Textkörper >   
  112.   
  113. < div   id = p >   
  114.   
  115. < div   id = plefttop > </ div >   
  116.   
  117. < div   id = rechts oben > </ div >   
  118.   
  119. < div   id = pleftbottom > </ div >   
  120.   
  121. < div   id = rechts unten > </ div >   
  122.   
  123. </div>​​   
  124.   
  125. </ Körper >   
  126.   
  127. </ html >     
  128.   

Hinweis: Der in meinem Code verwendete CSS-Stil ist Inline. Es gibt drei Arten von CSS-Stilen: Inline, eingebettet und extern.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Originallink: http://www.cnblogs.com/cyn941105/p/5588940.html

<<:  Lösung für das Problem „Fehler beim Konfigurieren von IDEA für die Verbindung zur MySQL-Datenbank“

>>:  Nginx erstellt Implementierungscode für RTMP-Liveserver

Artikel empfehlen

Führen Sie die Schritte zum Upgrade von Nginx http auf https aus.

Der Unterschied zwischen http und https ist Bei m...

Detaillierte Erläuterung der verschachtelten Tabelle im Vue-ElementUI-Formular und der Überprüfung jeder Zeile

Inhaltsverzeichnis Effektanzeige Code-Link Schlüs...

Beschreiben Sie kurz die Replikation der MySQL-Überwachungsgruppe

Originaltext: https://dev.mysql.com/doc/refman/8....

10 Möglichkeiten zum Anzeigen komprimierter Dateiinhalte in Linux (Zusammenfassung)

Wenn wir den Inhalt einer archivierten oder kompr...

Index-Skip-Scan in MySQL 8.0

Vorwort MySQL 8.0.13 unterstützt nun den Index-Sk...

HTML-Optimierungstechniken, die Sie kennen müssen

Um die Leistung von Webseiten zu verbessern, begi...

js und jquery, um einen Tab-Statusleisten-Umschalteffekt zu erzielen

Heute werden wir einen einfachen Fall durchgehen ...

Detaillierte Erklärung der Linux-Befehle und der Dateisuche

1. Führen Sie eine Dateinamensuche durch which (S...

Implementierung der Konvertierung zwischen Unterstreichung und Camel Case in js (mehrere Methoden)

Inhaltsverzeichnis Anwendungsszenarien: Methode 1...

So verwenden Sie die REM-Anpassung in Vue

1. Entwicklungsumgebung vue 2. Computersystem Win...

Best Practices für die Bereitstellung des ELK7.3.0-Protokollsammlungsdienstes mit Docker

Schreiben Sie am Anfang Dieser Artikel behandelt ...

Reines CSS zum Lösen des Decken- und Bodenabsaugens in den Implementierungsschritten des H5-Layouts

Welche Produkte möchten Sie erwähnen? Vor kurzem ...

Implementierung der IP-Adresskonfiguration in Centos7.5

1. Bevor Sie die IP-Adresse konfigurieren, verwen...

Verwendung von Markierungs-Tags im CSS-Listenmodell

In diesem Artikel werden hauptsächlich die Stilat...

Detaillierte Erklärung zur Verwendung des Feldsatzes und der Legende für seltene Tags

Was <fieldset> und <legend> betrifft,...