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

Bringen Sie Ihnen Schritt für Schritt bei, wie Sie mit vue3 ein Brick-Breaking-Spiel entwickeln

Vorwort Ich habe einige Beispiele mit Vue3 geschr...

Installationsschritte für die chinesische Eingabemethode von Ubuntu 20.04

Dieser Artikel installiert die Google-Eingabemeth...

Flex-Grow-, Flex-Shrink-, Flex-Basis- und Neun-Raster-Layout verstehen

1. Flex-Grow-, Flex-Shrink- und Flex-Basis-Eigens...

So stellen Sie ein SpringBoot-Projekt mit Dockerfile bereit

1. Erstellen Sie ein SpringBoot-Projekt und packe...

Docker-Bindung mit fester IP/Hostübergreifender Container-Gegenzugriffsvorgang

Vorwort Bisher waren statische IPs, die über Pipe...

Vuex implementiert einfache Warenkorbfunktion

In diesem Artikelbeispiel wird der spezifische Co...

Acht Regeln für effektive Webformulare

Wenn Sie Informationen von Ihren Benutzern sammel...

Lösen Sie das MySQL 5.7.9 Version sql_mode=only_full_group_by Problem

MySQL 5.7.9 Version sql_mode=only_full_group_by P...

Detaillierte Erklärung der MySQL Master-Slave-Inkonsistenz und Lösungen

1. MySQL Master-Slave-Asynchronität 1.1 Netzwerkv...

Detailliertes Tutorial zur Installation und Deinstallation von MySql

In diesem Artikel finden Sie das Tutorial zur Ins...

HTML + CSS zum Erzielen des Spezialeffektcodes für die Aufladung der Wassertropfenfusion

Inhaltsverzeichnis Vorwort: erreichen: Zusammenfa...

Implementierungsmethode für die bidirektionale Bindung von Vue-Daten

Inhaltsverzeichnis 1. Einleitung 2. Code-Implemen...

Führen Sie die folgenden Schritte aus, um die Anmeldung durch Gesichtserkennung in Ubuntu zu implementieren

1. Installieren Sie Howdy: Howdy-Projektadresse s...

Erste Schritte mit dem Alibaba Cloud ECS-Server (unbedingt zu lesendes Tutorial für Neulinge)

1. Alibaba Cloud wählt den geeigneten Cloud-Serve...

Eine kurze Diskussion über die Unterschiede zwischen den drei wichtigsten Datenbanken: Mysql, SqlServer und Oracle

MySQL Vorteil: Kleine Größe, hohe Geschwindigkeit...