De CSS-lettertyperand is een techniek die wordt gebruikt om een randachtige omtrek rond HTML-teksttekens. Deze techniek wordt gebruikt om de zichtbaarheid te vergroten of een decoratief effect aan de tekst toe te voegen. Dit kan worden bereikt met behulp van de eigenschap text-stroke, waarmee u het uiterlijk van tekst kunt aanpassen door er een rand omheen toe te voegen.
Hoe lettertyperand in CSS toe te passen
Er zijn twee methoden om lettertyperanden toe te passen op tekstelementen in HTML:
Inhoudsopgave
Laten we deze CSS-eigenschappen in detail bestuderen en begrijpen hoe ze worden gebruikt om tekstranden in HTML te plaatsen.
Gebruik de eigenschap text-shadow
De Eigenschap tekstschaduw in CSS voegt een schaduweffect toe aan tekst, waardoor diepte en nadruk ontstaat. Er zijn parameters nodig voor horizontale en verticale verschuivingen, vervagingsradius en kleur, waardoor ontwerpers verschillende tekstschaduweffecten kunnen creëren voor een verbeterde visuele aantrekkingskracht.
Syntaxis:
text-shadow: h-shadow v-shadow blur-radius color;>
Eigendomswaarden :
De eigenschap text-shadow accepteert veel waarden, waarvan sommige in de onderstaande tabel worden vermeld.
| Eigendoms-waarde | Beschrijving |
|---|---|
h-shadow> | Stelt de horizontale schaduw rond de tekst in. |
v-shadow> | Stelt de verticale schaduw rond de tekst in. |
blur-radius> | Stelt de vervagingsradius rond de tekstschaduw in. |
color> | Stelt de kleur van de tekstschaduw in. |
none> | Plaatst niets rond de tekst (geen schaduw). |
initial> | Stelt de tekstschaduw in op de standaard beginwaarde. |
inherit> | Erft de eigenschapswaarden van het bovenliggende element. |
Winstwaarde:
Het retourneert een lettertyperand/schaduw rond de tekst.
Voorbeelden van lettertyperanden
Voorbeeld 1: In dit voorbeeld wordt de eigenschap text-shadow gebruikt om schaduw op de tekst te creëren.
converteer nfa naar dfahtml
Titel CSS-tekstschaduweigenschap><style>h1 { tekstschaduw: 0 0 3px #FF0000, 0 0 5px #0000FF; } stijl> hoofd> <body> <h1>techcodeview.comh1> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Uitgang:</strong> </b> <span> </span></p> <img src='//techcodeview.com/img/picked/01/css-font-border.webp' alt="tekstschaduw CSS"><p dir='ltr'> <b> <strong>Voorbeeld 2:</strong> </b> <span>In dit voorbeeld wordt de eigenschap text-shadow gebruikt om tekst met randen te maken.</span></p>html<code class='hljs'> <pre class='hljs'><!DOCTYPE html> <html> <head> <title>Titel CSS-tekstschaduweigenschap><!-- Style to use text-shadow property --> <style>.GFG { kleur: wit; lettergrootte: 50px; tekstschaduw: -1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000; } stijl> hoofd> <body> <p>techcodeview.comp> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Uitgang:</strong> </b> </p> <img src='//techcodeview.com/img/picked/01/css-font-border-2.webp' alt="omrande tekst CSS"><h2 id='using-textstroke-property'> <b> <strong>De eigenschap Text-stroke gebruiken</strong> </b> </h2><p dir='ltr'><span>De</span> <span>Tekst-streek-eigenschap</span> <span>wordt gebruikt om lijn aan de tekst toe te voegen. Deze eigenschap kan worden gebruikt om de breedte en kleur van de tekst te wijzigen. Deze eigenschap wordt ondersteund door het voorvoegsel -webkit- te gebruiken.</span></p> <p dir='ltr'> <b> <strong>Syntaxis:</strong> </b> </p> <pre class='hljs'>-webkit-text-stroke: width color;></pre><h3> <b> <strong>Voorbeeld</strong> </b> </h3><p dir='ltr'><span>In dit voorbeeld wordt de eigenschap Text-stroke gebruikt om tekst met randen te maken.</span></p>html<code class='hljs'> <pre class='hljs'><!DOCTYPE html> <html> <head> <title>Titel CSS-tekstlijneigenschap><!-- Style to use text-stroke property --> <style>.GFG { kleur: wit; lettergrootte: 50px; -webkit-tekststrookbreedte: 1px; -webkit-tekst-streekkleur: zwart; } stijl> hoofd> <body> <p>techcodeview.comp> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Uitgang:</strong> </b> <span> </span></p> <img src='//techcodeview.com/img/picked/01/css-font-border-3.webp' alt=""><p dir='ltr'> <b> <strong>Ondersteunde 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>Firefox</span> <span>1</span></li><li value='4'> <span>Opera</span> <span>3.5</span></li><li value='5'> <span>Safari</span> <span>1</span></li></ul><p dir='ltr'><span>CSS is de basis van webpagina's en wordt gebruikt voor de ontwikkeling van webpagina's door websites en webapps te stylen. U kunt CSS vanaf de basis leren door dit te volgen</span> <span>CSS-zelfstudie</span> <span>En</span> <span>CSS-voorbeelden</span> <span>.</span></p> <br> <br></article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//changelesschoir.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </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="">Categorie</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/physics-difference-between/">Natuurkunde-Verschil-Tussen</a> </li><li> <a href="/get-advice/">Vraag Advies</a> </li><li> <a href="/control-systems/">Controlesystemen</a> </li><li> <a href="/python-list-programs/">Python-Lijstprogramma's</a> </li><li> <a href="/access-modifiers/">Toegangsmodificatoren</a> </li><li> <a href="/physical-quantities/">Fysieke Hoeveelheden</a> </li><li> <a href="/shell/">Schelp</a> </li><li> <a href="/ejb-tutorial/">Ejb-Zelfstudie</a> </li><li> <a href="/b-tree/">B-Boom</a> </li><li> <a href="/technical-scripter-2020-cat/">Technische Scripter 2020</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<div class="content">
<div class="item">
<div class="rekl_placeholder" id="sidebar_placeholder_1"> <script type="text/javascript">atOptions = {'key' : 'f53f1abf3c3a788f849c12a956865db1','format' : 'iframe','height' : 300,'width' : 160,'params' : {}};</script><script type="text/javascript" src="//changelesschoir.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>
</div>
</div>
</div>
<div class="section-inner">
<h2 class="heading">Hoe lees en schrijf ik een tekstbestand in C#?</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Een informaticaportaal voor nerds. Het bevat goed geschreven, goed doordachte en goed uitgelegde artikelen over computerwetenschappen en programmeren, quizzen en vragen over oefenen/competitief programmeren/bedrijfsinterviews.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/how-read-write-text-file-c"> <i class="fa fa-external-link"></i> Lees Verder</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Interessante Artikelen</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/hadoop-tutorial">Hadoop-zelfstudie</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/is-act-hard-9-key-factors-131830">Is de ACT moeilijk? 9 sleutelfactoren, overwogen</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/exception-handling/">Afhandeling Van Uitzonderingen</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/sum-of-all-numbers-that-can-be-formed-with-permutations-of-n-digits">Som van alle getallen die kunnen worden gevormd met permutaties van n cijfers</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/difference-between-first-name">Verschil tussen voornaam en achternaam</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">Populaire Berichten</h2>
<div class="content">
<ul class="list"> <li><a href="/c-include">inclusief c-programmering</a>
</li><li><a href="/er-diagram-dbms">e-r-modeldiagram</a>
</li><li><a href="/what-is-windows-desktop">wat is desktop ini</a>
</li><li><a href="/what-is-full-form-xd">wat betekent dit xd</a>
</li><li><a href="/bash-if">bash if-verklaring</a>
</li><li><a href="/sql-data-types">sql-gegevenstypen</a>
</li><li><a href="/composition-relations">samenstelling van de relatie</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 Rechten Voorbehouden | <a href="//fi.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Vrijwaring</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Wie Zijn Wij?</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Privacybeleid</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>
<script>
!function(){"use strict";let t=document.createElement("button");t.id="toTopBtn",t.innerHTML="↑";let e=`
#toTopBtn {
position: fixed;
bottom: 25px;
right: 25px;
z-index: 9999;
opacity: 0;
visibility: hidden;
background-color: #213141;
color: white;
border: none;
border-radius: 8px;
width: 50px;
height: 50px;
font-size: 24px;
cursor: pointer;
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
#toTopBtn:hover {
background-color: #555;
}
`,i=document.createElement("style");i.type="text/css",i.innerText=e,document.head.appendChild(i),document.body.appendChild(t),window.addEventListener("scroll",()=>{let e=window.scrollY||document.documentElement.scrollTop;e>300?(t.style.opacity="1",t.style.visibility="visible"):(t.style.opacity="0",t.style.visibility="hidden")}),t.addEventListener("click",()=>{window.scrollTo({top:0,behavior:"smooth"})})}();
</script>
</body>
</html>