Der CSS-Schriftrahmen ist eine Technik zur Erstellung eines randartiger Umriss um HTML-Textzeichen herum. Diese Technik wird verwendet, um die Sichtbarkeit zu verbessern oder dem Text einen dekorativen Effekt zu verleihen. Dies kann mit der Eigenschaft text-Stroke erreicht werden, die es ermöglicht, das Erscheinungsbild des Textes durch das Hinzufügen eines Rahmens anzupassen.
So wenden Sie einen Schriftrahmen in CSS an
Es gibt zwei Methoden, um Schriftränder auf Textelemente in HTML anzuwenden:
Inhaltsverzeichnis
Lassen Sie uns diese CSS-Eigenschaften im Detail untersuchen und verstehen, wie sie zum Einfügen von Texträndern in HTML verwendet werden.
Verwendung der Eigenschaft text-shadow
Der Text-Shadow-Eigenschaft in CSS fügt dem Text einen Schatteneffekt hinzu und sorgt so für Tiefe und Betonung. Es benötigt Parameter für horizontale und vertikale Versätze, den Unschärferadius und die Farbe, sodass Designer verschiedene Textschatteneffekte für eine verbesserte visuelle Attraktivität erstellen können.
Syntax:
text-shadow: h-shadow v-shadow blur-radius color;>
Immobilienwerte :
Die Eigenschaft text-shadow akzeptiert viele Werte, einige davon sind in der folgenden Tabelle aufgeführt.
| Eigentumswert | Beschreibung |
|---|---|
h-shadow> | Legt den horizontalen Schatten um den Text fest. |
v-shadow> | Legt den vertikalen Schatten um den Text fest. |
blur-radius> | Legt den Unschärferadius um den Textschatten fest. |
color> | Legt die Farbe des Textschattens fest. |
none> | Setzt nichts um den Text herum (kein Schatten). |
initial> | Setzt den Textschatten auf seinen Standardanfangswert. |
inherit> | Erbt die Eigenschaftswerte von seinem übergeordneten Element. |
Rückgabewert:
Es gibt einen Schriftrand/Schatten um den Text herum zurück.
Beispiele für Schriftartenränder
Beispiel 1: In diesem Beispiel wird die Eigenschaft text-shadow verwendet, um Schatten auf den Text zu erzeugen.
Java Localdatetimehtml
CSS-Textschatten-Eigenschaftstitel><style>h1 { text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF; } style> head> <body> <h1>techcodeview.comh1> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Ausgabe:</strong> </b> <span> </span></p> <img src='//techcodeview.com/img/picked/01/css-font-border.webp' alt="Textschatten-CSS"><p dir='ltr'> <b> <strong>Beispiel 2:</strong> </b> <span>In diesem Beispiel wird die Eigenschaft text-shadow verwendet, um umrandeten Text zu erstellen.</span></p>html<code class='hljs'> <pre class='hljs'><!DOCTYPE html> <html> <head> <title>CSS-Textschatten-Eigenschaftstitel><!-- Style to use text-shadow property --> <style>.GFG { Farbe: weiß; Schriftgröße: 50px; Textschatten: -1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000; } style> head> <body> <p>techcodeview.comp> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Ausgabe:</strong> </b> </p> <img src='//techcodeview.com/img/picked/01/css-font-border-2.webp' alt="CSS mit umrandetem Text"><h2 id='using-textstroke-property'> <b> <strong>Verwenden der Textstricheigenschaft</strong> </b> </h2><p dir='ltr'><span>Der</span> <span>Text-Stroke-Eigenschaft</span> <span>wird verwendet, um dem Text Striche hinzuzufügen. Mit dieser Eigenschaft können Sie die Breite und Farbe des Textes ändern. Diese Eigenschaft wird durch die Verwendung des Präfixes -webkit- unterstützt.</span></p> <p dir='ltr'> <b> <strong>Syntax:</strong> </b> </p> <pre class='hljs'>-webkit-text-stroke: width color;></pre><h3> <b> <strong>Beispiel</strong> </b> </h3><p dir='ltr'><span>In diesem Beispiel wird die Textstricheigenschaft verwendet, um umrandeten Text zu erstellen.</span></p>html<code class='hljs'> <pre class='hljs'><!DOCTYPE html> <html> <head> <title>Titel der CSS-Textstricheigenschaft><!-- Style to use text-stroke property --> <style>.GFG { Farbe: weiß; Schriftgröße: 50px; -webkit-text-strichbreite: 1px; -webkit-text-strichfarbe: schwarz; } style> head> <body> <p>techcodeview.comp> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Ausgabe:</strong> </b> <span> </span></p> <img src='//techcodeview.com/img/picked/01/css-font-border-3.webp' alt=""><p dir='ltr'> <b> <strong>Unterstützter Browser:</strong> </b> </p> <ul><li value='1'> <span>Google Chrome</span> <span>1</span></li><li value='2'> <span>Rand</span> <span> </span> <span>12</span></li><li value='3'> <span>Feuerfuchs</span> <span>1</span></li><li value='4'> <span>Oper</span> <span>3.5</span></li><li value='5'> <span>Safari</span> <span>1</span></li></ul><p dir='ltr'><span>CSS ist die Grundlage von Webseiten und wird für die Webseitenentwicklung durch die Gestaltung von Websites und Web-Apps verwendet. Sie können CSS von Grund auf erlernen, indem Sie dies befolgen</span> <span>CSS-Tutorial</span> <span>Und</span> <span>CSS-Beispiele</span> <span>.</span></p> <br> <br></article>
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->
</div><!--//primary-->
<div class="secondary col-md-4 col-sm-12 col-xs-12">
<aside class="info aside section">
<div class="section-inner">
<h2 class="">Kategorie</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/chatgpt/">Chatgpt</a> </li><li> <a href="/matrix/">Matrix</a> </li><li> <a href="/tree/">Baum</a> </li><li> <a href="/cpp-array/">Cpp-Array</a> </li><li> <a href="/c-map-function/">C++-Kartenfunktion</a> </li><li> <a href="/web-technologies/">Web-Technologien</a> </li><li> <a href="/linked-list/">Verlinkte Liste</a> </li><li> <a href="/google-workspace/">Google Workspace</a> </li><li> <a href="/apache-ant-tutorial/">Apache Ant-Tutorial</a> </li><li> <a href="/kafka-tutorial/">Kafka-Tutorial</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Roter Schwarzer Baum</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Roter Schwarzer Baum</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/red-black-tree/"> <i class="fa fa-external-link"></i> Weiterlesen</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Interessante Artikel</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/47-fascinating-eye-twitching-superstitions-from-all-over-world-131572">47 faszinierende, augenzuckende Aberglauben aus aller Welt</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/top-15-best-iptv-services">Top 15 der besten IPTV-Dienste für Firestick im Jahr 2024</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/different-ways-concatenate-two-strings-golang">Verschiedene Möglichkeiten, zwei Zeichenfolgen in Golang zu verketten</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/circular-queue">Runde Warteschlange</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-full-form-xd">Was ist die vollständige Form von XD</a> </strong> </span>
</li><!--//item-->
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="list music aside section">
<div class="section-inner">
<h2 class="heading">Beliebte Beiträge</h2>
<div class="content">
<ul class="list"> <li><a href="/javafx-with-eclipse">Javafx auf Eclipse</a>
</li><li><a href="/ternary-operator-java">Ternärer Operator Java</a>
</li><li><a href="/java-pair">Java-Paar</a>
</li><li><a href="/java-long-string">Java Long zum Stringen</a>
</li><li><a href="/difference-between-32-bit">32-Bit-Architektur vs. 64-Bit</a>
</li><li><a href="/difference-between-arraylist">Arraylist und Linkedlist</a>
</li><li><a href="/android-easter-egg">Was ist ein Android-Osterei?</a>
</li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
</div><!--//secondary-->
</div><!--//row-->
</div><!--//masonry-->
<footer class="footer">
<div class="container text-center">
<span>
Copyright ©2025 Alle Rechte Vorbehalten | <a href="//lt.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Haftungsausschluss</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Über Uns</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Datenschutzrichtlinie</a> </span>
</div>
</footer>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
</body>
</html>