CSS Font Border er en teknikk som brukes til å lage en kantlignende kontur rundt HTML-teksttegn. Denne teknikken brukes for å forbedre synligheten eller legge til en dekorativ effekt til teksten. Dette kan oppnås ved å bruke tekst-strek-egenskapen, som gjør det mulig å tilpasse utseendet til tekst ved å legge til en kant rundt den.
Slik bruker du Font Border i CSS
Det er to metoder for å bruke skriftgrenser på tekstelementer i HTML:
Innholdsfortegnelse
La oss studere disse CSS-egenskapene i detalj, og forstå hvordan de brukes til å sette tekstkanter i HTML.
Bruker tekst-skygge-egenskap
De Tekst-Shadow Property i CSS legger til en skyggeeffekt til tekst, og gir dybde og vekt. Det krever parametere for horisontale og vertikale forskyvninger, uskarphet radius og farger, slik at designere kan lage ulike tekst-skyggeeffekter for forbedret visuell appell.
Syntaks:
text-shadow: h-shadow v-shadow blur-radius color;>
Eiendomsverdier :
text-shadow-egenskapen aksepterer mange verdier, noen av dem er nevnt i tabellen nedenfor.
| Eiendomsverdi | Beskrivelse |
|---|---|
h-shadow> | Setter den horisontale skyggen rundt teksten. |
v-shadow> | Setter den vertikale skyggen rundt teksten. |
blur-radius> | Stiller inn uskarphet rundt tekstskyggen. |
color> | Angir fargen på tekstskyggen. |
none> | Setter ikke noe rundt teksten (ingen skygge). |
initial> | Setter tekstskyggen til standard startverdi. |
inherit> | Arver egenskapsverdiene fra det overordnede elementet. |
Returverdi:
Det returnerer en skriftkant/skygge rundt teksten.
Eksempler på skriftkantkanter
Eksempel 1: Dette eksemplet bruker text-shadow-egenskapen for å lage skygge til teksten.
testing og typer testinghtml
CSS text-shadow egenskap tittel><style>h1 { text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF; } stil> hode> <body> <h1>techcodeview.comh1> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Produksjon:</strong> </b> <span> </span></p> <img src='//techcodeview.com/img/picked/01/css-font-border.webp' alt="tekstskygge CSS"><p dir='ltr'> <b> <strong>Eksempel 2:</strong> </b> <span>Dette eksemplet bruker tekst-skygge-egenskapen for å lage tekst med kantlinjer.</span></p>html<code class='hljs'> <pre class='hljs'><!DOCTYPE html> <html> <head> <title>CSS text-shadow egenskap tittel><!-- Style to use text-shadow property --> <style>.GFG { farge: hvit; skriftstørrelse: 50px; text-shadow: -1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000; } stil> hode> <body> <p>techcodeview.comp> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Produksjon:</strong> </b> </p> <img src='//techcodeview.com/img/picked/01/css-font-border-2.webp' alt="kantlinjet tekst CSS"><h2 id='using-textstroke-property'> <b> <strong>Bruker tekst-strek-egenskap</strong> </b> </h2><p dir='ltr'><span>De</span> <span>Tekst-Stroke Property</span> <span>brukes til å legge til strek i teksten. Denne egenskapen kan brukes til å endre bredden og fargen på teksten. Denne egenskapen støttes ved å bruke -webkit- prefikset.</span></p> <p dir='ltr'> <b> <strong>Syntaks:</strong> </b> </p> <pre class='hljs'>-webkit-text-stroke: width color;></pre><h3> <b> <strong>Eksempel</strong> </b> </h3><p dir='ltr'><span>Dette eksemplet bruker tekst-strek-egenskap for å lage tekst med kantlinjer.</span></p>html<code class='hljs'> <pre class='hljs'><!DOCTYPE html> <html> <head> <title>CSS-tekststrek-egenskapstittel><!-- Style to use text-stroke property --> <style>.GFG { farge: hvit; skriftstørrelse: 50px; -webkit-text-stroke-width: 1px; -webkit-tekst-strøk-farge: svart; } stil> hode> <body> <p>techcodeview.comp> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Produksjon:</strong> </b> <span> </span></p> <img src='//techcodeview.com/img/picked/01/css-font-border-3.webp' alt=""><p dir='ltr'> <b> <strong>Støttet nettleser:</strong> </b> </p> <ul><li value='1'> <span>Google Chrome</span> <span>1</span></li><li value='2'> <span>Kant</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 er grunnlaget for nettsider, brukes til nettsideutvikling ved å style nettsteder og nettapper. Du kan lære CSS fra grunnen av ved å følge dette</span> <span>CSS veiledning</span> <span>og</span> <span>CSS eksempler</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="//spiritscaution.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="">Kategori</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/physics-questions/">Fysikk-Spørsmål</a> </li><li> <a href="/maths-class-10-cat/">Matte-Klasse-10</a> </li><li> <a href="/software-engineering/">Software Engineering</a> </li><li> <a href="/javascript-operators/">Javascript-Operatører</a> </li><li> <a href="/json-tutorial/">Json Veiledning</a> </li><li> <a href="/bordering-countries-sea/">Grenseland Og Hav</a> </li><li> <a href="/groovy-tutorial/">Groovy Opplæring</a> </li><li> <a href="/salesforce-tutorial/">Salesforce-Veiledning</a> </li><li> <a href="/graph-theory-tutorial/">Opplæring I Grafteori</a> </li><li> <a href="/microsoft-azure-tutorial/">Microsoft Azure-Veiledning</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="//spiritscaution.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>
</div>
</div>
</div>
<div class="section-inner">
<h2 class="heading">Hvor (og hvordan) får du en kassesjekk: 8 enkle trinn</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Lurer du på hvor du kan få tak i en kassesjekk? Vi leder deg gjennom nøyaktig hvordan du får en kassesjekk, hvorfor du kanskje trenger den, og hvor mye den vil koste.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/where-get-cashier-s-check-131426"> <i class="fa fa-external-link"></i> Les Mer</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Interessante Artikler</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/java-thread-pool">Java Thread Pool</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/python-constructor">Python-konstruktør</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/design-hex-binary-converter">Design hex til binær konverter</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/javascript-array-unshift-method">JavaScript Array unshift()-metoden</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/namespace-in-c-set-2-extending-namespace-and-unnamed-namespace">Navnområde i C ++ | Sett 2 (utvide navneområdet og ikke navngitt navneområde)</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">Populære Innlegg</h2>
<div class="content">
<ul class="list"> <li><a href="/javascript-sleep-wait">sove for javascript</a>
</li><li><a href="/java-tuple">java tuppel</a>
</li><li><a href="/urfi-javed">hvem er urfi javed</a>
</li><li><a href="/java-hashmap">hva er java hashmap</a>
</li><li><a href="/java-naming-convention">navnekonvensjon for java</a>
</li><li><a href="/java-stringbuilder-class">java strengbygger</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 Rettigheter Reservert | <a href="//sr.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Ansvarsfraskrivelse</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Om Oss</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Personvernerklæring</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>