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

Die detaillierteste Methode zur Installation von Docker auf CentOS 8

Installieren Sie Docker unter CentOS 8 Offizielle...

Mehrere Möglichkeiten zum einfachen Durchlaufen von Objekteigenschaften in JS

Inhaltsverzeichnis 1. Selbstaufzählbare Eigenscha...

Vue-Projekt implementiert Löschfunktion durch Wischen nach links (vollständiger Code)

Ergebnisse erzielen Der Code lautet wie folgt htm...

So installieren Sie ROS Noetic in Ubuntu 20.04

Haftungsausschluss: Da das Projekt die Verwendung...

So erstellen Sie eine MySQL-Datenbank (de1) mit Befehlen

1. Verbindung zu MySQL herstellen Format: mysql -...

So verwalten Sie zwischengespeicherte Seiten in Vue

Inhaltsverzeichnis Problem 1: Zerstörung 1. Wie m...

Erste Schritte beim Erstellen einer Website für Anfänger - Die Voraussetzungen und Tools, die zum Erstellen einer Website erforderlich sind

Heute werde ich diese Anfängerfragen beantworten: ...

Zusammenfassung von 3 Möglichkeiten zum verzögerten Laden eines Vue-Routers

Kein Lazy Loading verwenden importiere Vue von „v...

Einfache Implementierung zum Ausblenden der Bildlaufleiste in HTML

1. HTML-Tags mit Attributen XML/HTML-CodeInhalt i...

Detaillierte Erklärung der Verwendung und des Unterschieds zwischen relativ und absolut in HTML

Der Unterschied zwischen relativ und absolut in H...

JavaScript zum dynamischen Laden und Löschen von Tabellen

In diesem Artikel wird der spezifische JavaScript...

Detaillierte Erläuterung der Gründe und Lösungen für den Fehler beim normalen Start von Docker

1. Abnormale Leistung beim Docker-Start: 1. Der S...

So zeigen Sie im Hintergrund laufende Programme in Linux an und schließen sie

1. Führen Sie die .sh-Datei aus Sie können es dir...

Detailliertes Beispiel des Kettenprogrammierstils von jQuery

Das Implementierungsprinzip der Kettenprogrammier...

Verschaffen Sie sich ein umfassendes Verständnis des Prototypobjekts in JavaScript

Inhaltsverzeichnis 1. Was ist ein Prototyp? 1.1 F...