Austausch von Forschungserfahrungen zur Verwendung von Zeichen anstelle von abgerundeten und scharfen Ecken

Austausch von Forschungserfahrungen zur Verwendung von Zeichen anstelle von abgerundeten und scharfen Ecken

1. Die Beziehung zwischen Schriftarten und Zeichenanzeige

Die scharfen Ecken auf der linken und rechten Seite sind in der Schriftart Songti: <>
Nicht betroffen von der Schriftart: <>

Hier sind die scharfen Ecken links und rechts in der Schriftart Arial: <>
Nicht betroffen von der Schriftart: <>

Die scharfen Ecken auf der linken und rechten Seite sind in Lucida Sans Unicode: <>
Nicht betroffen von der Schriftart: <>

Die scharfen Ecken links und rechts sind hier in der Schriftart Times New Roman: <>
Nicht betroffen von der Schriftart: <>

Die scharfen Ecken auf der linken und rechten Seite sind in der Schriftart Verdana: <>
Nicht betroffen von der Schriftart: <>

Hier sind die scharfen Ecken in Auf- und Abwärtsrichtung in der Schriftart Songti mit kleinen scharfen Ecken: ˇ^
Nicht betroffen von der Schriftart: ∧∨

Hier sind die spitzen Ecken in Auf- und Abwärtsrichtung in der Schriftart Arial gehalten, mit kleinen spitzen Ecken: ˇ^
Nicht betroffen von der Schriftart: ∧∨

Die scharfen Ecken in der oberen und unteren Richtung sind in der Unicode-Schriftart Lucida Sans, kleine scharfe Ecken: ˇ^
Nicht betroffen von der Schriftart: ∧∨

Die spitzen Ecken in der oberen und unteren Richtung sind in der Schriftart Times New Roman gehalten, mit kleinen spitzen Ecken: ˇ^
Nicht betroffen von der Schriftart: ∧∨

Hier sind die scharfen Ecken in Auf- und Abwärtsrichtung in der Schriftart Verdana mit kleinen scharfen Ecken: ˇ^
Nicht betroffen von der Schriftart: ∧∨

Hier ist ein 45-Grad-Winkel, die Schriftart ist Songti:

Hier ist ein 45-Grad-Winkelkörper in der Schriftart Arial:

Hier ist ein 45-Grad-Winkel in Lucida Sans Unicode :

Hier ist ein 45-Grad-Winkel in der Schriftart Times New Roman:

Hier ist ein 45-Grad-Winkel in der Schriftart Verdana:

Hier ist eine solide scharfe Ecke, die Schriftart ist Songti: ► ◄ ▲▼

Hier ist die durchgezogene scharfe Ecke, die Schriftart ist Arial: ► ◄ ▲▼

Hier ist die durchgezogene Ecke, die Schriftart ist Lucida Sans Unicode: ► ◄ ▲▼

Hier sind die durchgezogenen scharfen Ecken, die Schriftart ist Times New Roman: ► ◄ ▲▼

Hier ist die durchgezogene scharfe Ecke, die Schriftart ist Verdana: ► ◄ ▲▼

Hier ist ein ausgefüllter Kreis. Aufgrund seiner begrenzten Größe verhält er sich wie ein sechseckiger Körper. Die Schriftart ist Songti:

Hier ist ein ausgefüllter Kreis. Aufgrund seiner begrenzten Größe verhält er sich wie ein sechseckiger Körper. Die Schriftart ist Arial:

Hier ist ein ausgefüllter Kreis. Aufgrund seiner begrenzten Größe verhält er sich wie ein sechseckiger Körper. Die Schriftart ist Lucida Sans Unicode:

Hier ist ein ausgefüllter Kreis. Aufgrund seiner begrenzten Größe verhält er sich wie ein sechseckiger Körper. Die Schriftart ist Times New Roman:

Hier ist ein ausgefüllter Kreis. Aufgrund seiner begrenzten Größe verhält er sich wie ein sechseckiger Körper. Die Schriftart ist Verdana:

Hier ist ein hohler Kreis mit der Schriftart in Songti:

Hier ist ein hohler Kreis mit der Schriftart Arial:

Hier ist ein hohler Kreis in Lucida Sans Unicode:

Hier ist ein hohler Kreis in der Schriftart Times New Roman:

Hier ist ein hohler Kreis mit der Schriftart Verdana:

Hier ist ein Viertelbogen, die Schriftart ist Songti: ╰ ╯╭ ╮

Hier ist ein Viertelkreis in der Schriftart Arial: ╰ ╯╭ ╮

Hier ist ein Viertelkreis in Lucida Sans Unicode: ╰ ╯╭ ╮

Hier ist ein Viertelkreis in Times New Roman: ╰ ╯╭ ╮

Hier ist ein Viertelbogen in Verdana: ╰ ╯╭ ╮

2. Realisieren Sie einen Viertelkreis

Füllen Sie die vier Ecken mit einem Viertelkreis, um mit der Hintergrundfarbe einen abgerundeten Eckeneffekt zu erzielen.

CSS Code:

Code kopieren
Der Code lautet wie folgt:

.quarter_round{Anzeige: Inline-Block; Breite: 8px; Höhe: 8px; Überlauf: ausgeblendet; Schriftfamilie: „宋体“;}.quarter_round span{Anzeige: Inline-Block; Schriftgröße: 16px; Zeilenhöhe: 1;}.quarter_round .lt{}.quarter_round .rt{Rand links: -7px;}.quarter_round .lb{Rand oben: -6px;}.quarter_round .rb{Rand: -6px 0 0 -7px;}

HTML Quelltext:

Code kopieren
Der Code lautet wie folgt:

&lt;span class=&quot;viertelrund&quot;&gt;&lt;span class=&quot;lt&quot;&gt;●&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;viertelrund&quot;&gt;&lt;span class=&quot;rt&quot;&gt;●&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;viertelrund&quot;&gt;&lt;span class=&quot;lb&quot;&gt;●&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;viertelrund&quot;&gt;&lt;span class=&quot;rb&quot;&gt;●&lt;/span&gt;&lt;/span&gt;

3. Realisieren Sie das abgerundete Rechteck mit einfarbigem Hintergrund

Füllen Sie die vier Ecken mit einem Viertelkreis, um mit der Hintergrundfarbe einen abgerundeten Eckeneffekt zu erzielen.

4. Implementieren Sie ein abgerundetes Rechteck mit einem festen Hintergrund und scharfen Ecken

Füllen Sie die vier Ecken mit einem Viertelkreis und fügen Sie ein Symbol mit scharfen Ecken hinzu, um ein abgerundetes Rechteck in Vollfarbe mit scharfen Ecken zu erstellen.

Füllen Sie die vier Ecken mit einem Viertelkreis und fügen Sie ein Symbol mit scharfen Ecken hinzu, um ein abgerundetes Rechteck in Vollfarbe mit scharfen Ecken zu erstellen.

5. Implementieren Sie den abgerundeten Rechteckeffekt mit doppeltem Rand und scharfen Ecken für Sina Weibo-Blogkommentare

Füllen Sie die vier Ecken mit einem Viertelkreis, wiederholen Sie dies einmal und versetzen Sie es um 1 Pixel. Fügen Sie ein Symbol mit scharfen Ecken, einen Versatz von 2 Pixeln nach oben und unten und eine rechteckige doppelschichtige Beschriftung hinzu, um den endgültigen Doppelrahmeneffekt zu erzielen.

◆ ●
Füllen Sie die vier Ecken mit einem Viertelkreis, wiederholen Sie dies einmal und versetzen Sie es um 1 Pixel. Fügen Sie ein Symbol mit scharfen Ecken, einen Versatz von 2 Pixeln nach oben und unten und eine rechteckige doppelschichtige Beschriftung hinzu, um den endgültigen Doppelrahmeneffekt zu erzielen.

<<:  javascript:void(0) Bedeutung und Anwendungsbeispiele

>>:  CSS3 zum Erreichen eines Menü-Hover-Effekts

Artikel empfehlen

Detailliertes Tutorial zur Installation von MySQL unter Linux

MySQL-Downloads für alle Plattformen sind unter M...

5 Möglichkeiten, um schnell den Leerraum eines Inline-Blocks in HTML zu entfernen

Der Eigenschaftswert „Inline-Block“ ist sehr nütz...

So führen Sie JavaScript in Jupyter Notebook aus

Später habe ich auch hinzugefügt, wie man Jupyter...

Mehrere gängige Methoden zum Festlegen der Ankerpositionierung in HTML

Mir sind mehrere Möglichkeiten bekannt, die Ankerp...

Lassen Sie sich das Funktionsprinzip von JavaScript erklären

Inhaltsverzeichnis Browserkernel JavaScript-Engin...

Detaillierte Analyse des Reaktionsprinzips und der bidirektionalen Daten von Vue

Verstehen von object.defineProperty, um Reaktions...

So konfigurieren Sie einen Pfadalias für das React-Scaffolding

Die React-Version beim Schreiben dieses Artikels ...

So erzielen Sie mit CSS einen Daten-Hotspot-Effekt

Die Wirkung ist wie folgt: analysieren 1. Hier se...

Detaillierte Erläuterung des automatischen Füllschreibens von CSS3-Flexboxen

In diesem Artikel wird hauptsächlich die Methode ...