Was ist der Textumrisseffekt?-CSS-Tutorial-php.cn

Was ist der Textumrisseffekt?

WBOY

Freigeben： 2023-08-23 21:25:02

nach vorne

1304 Leute haben es durchsucht

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;

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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;

Nach dem Login kopieren

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>

Nach dem Login kopieren

Fügen Sie Text innerhalb des

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;

Nach dem Login kopieren

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

<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>

Nach dem Login kopieren

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!