简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Artikel  >  Web-Frontend  >  Was ist der Textumrisseffekt?

Was ist der Textumrisseffekt?

WBOY
WBOYnach vorne
2023-08-23 21:25:021226Durchsuche

Was ist der Textumrisseffekt?

Manchmal müssen wir nur die Umrisse des Textes anzeigen und den Textabstand entfernen. Es kann auch von einem Kontureffekt gesprochen werden.

Wir können verschiedene CSS-Eigenschaften verwenden, um Umrisseffekte für Text zu generieren. Beispielsweise können wir dem Text einen Rahmen hinzufügen, die Füllfarbe des Texts entfernen und dem Text einen Umrisseffekt hinzufügen.

Hier verwenden wir drei verschiedene Methoden von HTML und CSS, um Text mit Umrisseffekt anzuzeigen.

Verwenden Sie verschiedene CSS-Eigenschaften

Bei dieser Methode verwenden wir drei CSS-Eigenschaften, um dem Text einen Umrisseffekt hinzuzufügen. Die erste ist „-webkit-text-fill-color“, die die Füllfarbe des Textes so ändert, dass sie mit der Hintergrundfarbe übereinstimmt. Die zweite ist „-webkit-text-lines-width“, die dem Text eine Strichstärke hinzufügt, und die dritte CSS-Eigenschaft ist „-webkit-text-lines-color“, die dem Text eine Umrissfarbe hinzufügt.

Grammatik

Benutzer können drei verschiedene CSS-Eigenschaften verwenden, um Kontureffekte gemäß der folgenden Syntax zum Text hinzuzufügen. 

-webkit-text-fill-color: color;
-webkit-text-stroke-width: size;
-webkit-text-stroke-color: color;

In der obigen Syntax legen wir die Füllfarbe und die Strichbreite des Texts fest, und der Strich stellt die Umrissfarbe dar.

Die chinesische Übersetzung von

Beispiel 1

lautet:

Beispiel 1

Im folgenden Beispiel haben wir ein div-Element mit dem Klassennamen „text1“, das Text enthält. Die Schriftgröße des Textes haben wir in CSS eingestellt. Um dem Text zusätzlich einen Umrisseffekt hinzuzufügen, stellen wir eine Füllfarbe auf Weiß, eine Strichstärke auf „1 Pixel“ und eine Strichfarbe auf „Blau“ ein, um einen blauen Umriss anzuzeigen.

In der Ausgabe kann der Benutzer den Text mit einer blauen Umrandung betrachten. 

<html>
<head>
   <style>
      .text1 {
         font-size: 50px;
         -webkit-text-fill-color: white;
         -webkit-text-stroke-width: 1px;
         -webkit-text-stroke-color: blue;
      }
   </style>
</head>
<body>
   <h2>Using the <i> different CSS properties </i> to add outline effect on the text.</h2>
   <div class = "text1">This text has a default background.</div>
</body>
</html>

Beispiel 2

wird übersetzt als:

Beispiel 2

Im folgenden Beispiel haben wir einen roten Hintergrund für das div-Element festgelegt. Als nächstes verwenden wir „Rot“ als Füllfarbe, sodass die Füllfarbe mit dem Hintergrund übereinstimmt. Hier beträgt die Strichstärke „1,2px“ und die Strichfarbe „Gelb“.

In der Ausgabe kann der Benutzer Text mit gelber Umrandung auf rotem Hintergrund sehen. 

<html>
<head>
   <style>
      .text {
         font-size: 50px;
         width: 600px;
         height: auto;
         background-color: red;
         -webkit-text-fill-color: red;
         -webkit-text-stroke-width: 1.2px;
         -webkit-text-stroke-color: yellow;
      }
   </style>
</head>
<body>
   <h2>Using the <i> different CSS properties </i> to add outline effect on the text</h2>
   <div class = "text"> This text has a red background. </div>
</body>
</html>

Verwenden Sie die CSS-Eigenschaft „Text-shadow“

Bei dieser Methode verwenden wir die CSS-Eigenschaft „text-shadow“, um einen Umrisseffekt für den Text zu erzeugen. Wenn wir den Text ausblenden, indem wir die gleiche Textfarbe wie die Hintergrundfarbe festlegen und nur den Textschatten anzeigen, können wir einen Umrisseffekt erzeugen.

Grammatik

Benutzer können die CSS-Eigenschaft „text-shadow“ verwenden, um dem Text einen Umrisseffekt hinzuzufügen, indem sie der folgenden Syntax folgen. 

text-shadow: x-offset y-offset blur color;

Die Eigenschaft „text-shadow“ benötigt 4 verschiedene Werte, um den Schatten festzulegen. Der erste ist der x-Versatz, der zweite ist der y-Versatz, der dritte ist der Unschärfewert und der vierte ist die Schattenfarbe.

Beispiel 3

Sie können es ohne Übersetzung behalten

Im folgenden Beispiel enthält das div-Element Text. In CSS legen wir die gleiche Hintergrundfarbe und Schriftfarbe fest. Anschließend haben wir die CSS-Eigenschaft „text-shadow“ verwendet, um den Umrisseffekt hinzuzufügen. Hier haben wir 4 gegenüber 4 Werten für den „Text-Shadow“-Wert verwendet. Das erste Paar ist für den rechten Schatten, das zweite Paar für den unteren Schatten, das dritte Paar für den linken Schatten und das letzte Paar für den oberen Schatten.

Eigentlich wird der Textschatten anstelle des Strichs angezeigt, wodurch ein Umrisseffekt entsteht. 

<html>
<head>
   <style>
      .text {
         color: rgb(117, 117, 235);
         font-size: 50px;
         background-color: rgb(117, 117, 235);
         text-shadow: -1px -1px 2px red, 1px -1px 2px red, -1px 1px 2px red, 1px 1px 2px red;
      }
   </style>
</head>
<body>
   <h2>Using the <i> text-shadow CSS property </i> to add outline effect on the text</h2>
   <div class = "text"> Welcome to the TutorialsPoint! </div>
</body>
</html>

Fügen Sie Text innerhalb des -Tags hinzu und wenden Sie einen Strich auf den Text an

Hier konvertieren wir Text in ein SVG-Bild. Danach legen wir die Strichfarbe, Füllfarbe, Strichbreite usw. fest und verwenden verschiedene CSS-Eigenschaften, um dem Text einen Umrisseffekt hinzuzufügen.

Grammatik

Benutzer können der folgenden Syntax folgen, um Text in SVG zu konvertieren und dem Text einen Umrisseffekt hinzuzufügen. 

paint-order: stroke;
fill: color;
stroke: color;

In der obigen Syntax legen wir die Füllfarbe des Textes fest. Zusätzlich legen wir die Strichfarbe des Textes fest. Die CSS-Eigenschaft „paint-order: Stroke“ ermöglicht es uns, Füllfarben durch Striche zu überlappen, wenn sich die Füllfarben überschneiden.

Die chinesische Übersetzung von

Beispiel 4

lautet:

Beispiel 4

Im folgenden Beispiel haben wir das HTML-Tag verwendet, um ein HTML-Element zu erstellen, und das HTML-Tag , um Text innerhalb des SVG hinzuzufügen. Im CSS setzen wir „Stroke-Width“ auf 3 Pixel, um einen 3 Pixel großen Umriss anzuzeigen, und „Stroke-Linejoin“ auf „Rundung“, sodass sich zwei Linien immer dann zu einem Kreis verbinden, wenn sie sich verbinden. Zusätzlich verwenden wir „fill:white“, um die Textfarbe auf die gleiche Farbe wie den Hintergrund einzustellen, und „Stroke“, um den Text als braune Umrandung anzuzeigen. 

<html>
<head>
   <style>
      svg {
         font-size: 35px;
         width: 490px;
         height: 100;
      }
      .text {
         stroke-width: 3px;
         stroke-linejoin: round;
         paint-order: stroke;
         fill: white;
         stroke: brown;
      }
   </style>
</head>
<body>
   <h2>Using the <i> SVG text </i> to add outline effect on the text</h2>
   <svg viewBox = "0 0 490 100">
      <text class = "text" x = "10" y = "45"> This text is in the svg element </text>
   </svg>
</body>
</html>

Wir haben drei Möglichkeiten gesehen, dem Text einen Umrisseffekt hinzuzufügen. Die erste Methode verwendet drei verschiedene CSS-Eigenschaften, um die Füllfarbe des Texts zu ändern und den Strich des Texts festzulegen.

Die zweite Methode zeigt „Textschatten“ anstelle von Text an. Die dritte Methode konvertiert den Text in SVG und fügt dem Text mithilfe verschiedener SVG-bezogener CSS-Eigenschaften einen Umrisseffekt hinzu.

Das obige ist der detaillierte Inhalt vonWas ist der Textumrisseffekt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css html webkit
Stellungnahme：
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Wie wähle ich mehrere Dateien mithilfe von HTML-Eingabe-Tags aus?Nächster Artikel：Wie wähle ich mehrere Dateien mithilfe von HTML-Eingabe-Tags aus?

In Verbindung stehende Artikel

Mehr sehen