CSS Halbkreis
Implementierung des Halbkreises
Eine einfache Implementierungssequenz von HTML- und CSS-Tags wird zusammen mit dem Grenzgeschäft von CSS angewendet. Öffnen Sie den Texteditor und verwenden Sie den folgenden Code, um einen Halbkreis auf einer Webseite zu zeichnen. Für die Implementierung eines Halbkreises in HTML und CSS haben wir interne CSS verwendet, die mit den Öffnungs- und Schluss -Tags in das Tag deklariert sind. Beginnen Sie mit den HTML -Tags, öffnen Sie das Kopf -Tag. Dann haben wir im ersten Schritt den Titel der Seite gegeben. Dieser Titelname wird zum Zeitpunkt der Ausführung oben auf der Registerkarte im Browser angezeigt. Nach dem Schließen des Titel -Tags deklarieren wir das Style -Tag. Erstens werden wir den Rand und die Polsterung der Form erklären.
Differenz B/W Margin und Polsterung
Der Rand ist der Raum um das Objekt, das Sie erstellen möchten. Diese Eigenschaft wird für die Objekteinstellung auf der Seite verwendet, entweder nach links oder rechts usw. Es ist ein transparenter Bereich, der keine Hintergrundfarbe hat. Ein Rand umgibt die Form von allen 4 Seiten.
Polsterung ist der Teil, der zwischen dem erstellten Objekt und dem Inhalt innerhalb des Objekts vorhanden ist. Dieser Inhalt kann eine Form, einen Text usw. sein. Die Padding -Eigenschaft gibt an, wie ein Objekt im Container aussieht. Dieser Behälter enthält auch eine Hintergrundfarbe. Das Erhöhen oder Verringern der Polsterung beeinflusst die Größe des Inhalts darin.
Hier im Style -Code haben wir sowohl Margin als auch Polster als 0 deklariert. Dies bedeutet. Es ist notwendig, diese Eigenschaften als 0 zu erklären, anstatt sie aus dem Code zu entfernen, da sie als automatisch angesehen wird, wenn sie nicht als Null deklariert wird.
*Rand: 0;
Polsterung: 0;
Die dritte Eigenschaft im Zusammenhang mit Form ist die Hintergrundfarbe weiß. Dies ist die Standardfarbe. Wenn Sie es nicht erwähnen, wird es immer weiß sein. Als nächstes werden wir das Styling der Div verwenden. Div ist ein Behälter, der einige Elemente darin enthält. Es wirkt sich weder auf das Layout noch auf den Inhalt aus, bis wir einen Stil geben. Hier haben wir viel Effekt für den Div -Behälter verwendet. Alle Auswirkungen der Form werden für die Anpassungen auf den Div -Behälter angewendet. Die Position des Behälters wird als absolut angenommen.
Die beiden grundlegenden Formeigenschaften sind die Lage und Richtung der Form. Um die Form anzupassen, werden wir die oberen und linken Attribute verwenden. 'Top' entscheidet über die Entfernung der Form vom oberen Rand der Webseite. Der linke Teil zeigt den Abstand der Form vom linken Rand der Seite. Beide Eigenschaften werden in Prozent genommen.
Top 20%;Links: 10%;
Die Transformationsfunktion ist eine leistungsstarke Eigenschaft, mit der das Objekt gedreht, verzerrt, gebeugt oder übersetzt wird. Eine der am häufigsten verwendeten Merkmale ist die "Translate" -Funktion, mit der das Objekt von einem Ort zum anderen verschoben wird. Bei der Erstellung eines Halbkreises haben wir zwei Werte der Verschiebung von links und die Spitze in Prozent verwendet. Wir haben beide Werte mit dem negativen Vorzeichen für die Anpassung genommen.
Transformation: Translate (-50%, -50%)Jetzt werden wir einige Effekte auf die Form verwenden, die eine Eigenschaft wie ihre Höhe und Breite erzeugt. Beide Eigenschaften werden in Pixel eingenommen.
Höhe: 100px;Breite: 200px;
Was ist das grenzradius-Eigentum und warum wird es verwendet??
Der Grenzradius ist das Rückgrat der Schaffung eines Kreises oder eines Halbkreises in HTML. Diese Eigenschaft spielt eine wichtige Rolle, um die Ecken der Ränder des Randes eines Objekts umzusetzen. Mit dem Grenze zu spielen und sie in die Mitte zu drehen, macht einen perfekten Kreis. Die Parameter können 4 Werte betragen. Das Grenz-Radius-Eigentum wird verwendet, um den Wert des Radius der Grenze zu geben. Die 4 Werte sind die Länge, der Prozentsatz, die anfängliche und erben Eigenschaften.
Diese 4 Werte werden in einer spezifischen Reihenfolge angegeben, um einen Radius eines Randes zu bilden:
- Oben links
- Oben rechts
- Unten rechts
- Unten links
Der Randradius kann alle oder die angepasste Werte enthalten, indem ein Wert entfernen. Wenn der Wert der unteren linken Seite entfernt wird, ist der Wert der Wert der oberen rechten Form der Form.
Border-Radius: 150px 150px 0 0;Um einen Halbkreis zu machen, haben wir 2 Werte als 150px genommen, und die anderen beiden werden als Null deklariert. Wenn wir alle Werte wie 150 oder eine andere Zahl näher daran nehmen, wäre die resultierende Form ein voller Kreis oder ein Oval. Nach dieser Ausrichtung des Radius haben wir die Farbe der roten Form zugeordnet. Jetzt schließen wir den Stilbereich und den Kopfabschnitt auch.
Im Körperabschnitt des Code deklarieren wir eine DIV, nur die Öffnung und die Schließetiketten für DIV werden hier verwendet. Das gesamte Styling wird im Stil von CSS deklariert.
Jetzt speichern wir den Code im Texteditor. Stellen Sie sicher, dass die gebildete Datei mit dem Namen eine Erweiterung von HTML gespeichert werden muss. Zum Beispiel Beispiel.HTML ist die Datei, an der wir arbeiten.
Um die Textdatei auszuführen, öffnen Sie die Datei, indem Sie die Option "Open-With" auswählen und einen beliebigen Browser Ihrer Wahl auswählen. Auf diese Weise wird das Dateisymbol durch das Browser -Symbol ersetzt.
Sie werden sehen, dass ein Halbkreis mit roter Farbe gebildet wird und dieselben Ausrichtungen durchgeführt werden, die wir deklariert hatten.
Abschluss
Eine Implementierung eines Halbkreises in CSS wird durchgeführt, indem eine kurze Einführung in HTML und CSS eingeführt wird. Ein einfacher Texteditor und ein Browser sind für die Ausführung von HTML- und CSS -Tags in der Datei verantwortlich. Wir haben zu diesem Zweck interne CSS verwendet. Darüber hinaus wird hier auch ein wichtiges CSS-Eigentum definiert. Wenn Sie dieser Funktion folgen, wird ein Kreis gebildet, wir müssen nur einige Werte davon anpassen. Alle Effekte werden im CSS -Abschnitt deklariert. Der Körperabschnitt enthält nur den Div -Behälter.