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

Der neueste Linux-Installationsprozess von Tomcat8

Herunterladen https://tomcat.apache.org/download-...

Vue implementiert den automatischen Sprung zur Anmeldeseite, wenn das Token abläuft

Das Projekt wurde in diesen Tagen getestet und de...

Beispieloperation MySQL Kurzlink

So richten Sie einen MySQL-Kurzlink ein 1. Überpr...

Reines CSS zum Erzielen eines schmelzenden Kerzenmusters (Wassertropfen) – Beispielcode

Ergebnisse erzielen Umsetzungsideen Der Schmelzef...

So vermeiden Sie die URL-Zeitzonenfalle in MySQL

Vorwort Wenn Sie MySQL 6.0.x oder höher (JAR) ver...

Gestaltung von Popup-Fenstern und schwebenden Ebenen im Webdesign

Im Zuge des schrittweisen Übergangs von herkömmli...

Beispiele für die Verwendung von React Ref

Inhaltsverzeichnis Was ist ref So verwenden Sie r...

Eine kurze Analyse der Verwendung von watchEffect in Vue3

Vorwort Jeder sollte mit der Watch-API in vue2 ve...

CentOS 7 kann nach dem Ändern der Netzwerkkarte nicht auf das Internet zugreifen

Ping www.baidu.com unbekannter Domänenname Ändern...

Analyse der praktischen Erfahrung bei der Verwendung von Docker zum Erstellen von Microservices mit SpringBoot

Was ist das? Spring Boot ist ein Unterprojekt der...

10 Leistungskonfigurationselemente, die nach der Installation von MySQL angepasst werden müssen

In diesem Blog besprechen wir zehn Leistungseinst...

vue-table implementiert das Hinzufügen und Löschen

In diesem Artikelbeispiel wird der spezifische Co...

Erfahrung im Webdesign

<br />Der Autor war früher ein Anfänger im W...

Lernen Sie die schwarze Technologie der Union-All-Verwendung in MySQL 5.7 in 5 Minuten

Leistung von „Union All“ in MySQL 5.6 Teil 1: MyS...

7 Möglichkeiten zum Schreiben einer Vue v-for-Schleife

Inhaltsverzeichnis 1. Verwenden Sie in der v-for-...