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="//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="">Kategori</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/culture-gk/">Kultur Gk</a> </li><li> <a href="/java-interfaces/">Java-Grensesnitt</a> </li><li> <a href="/chemical-bonding/">Kjemisk-Binding</a> </li><li> <a href="/java-arraylist/">Java-Arraylist</a> </li><li> <a href="/linux-command/">Linux-Kommando</a> </li><li> <a href="/technical-scripter-2022-cat/">Technical Scripter 2022</a> </li><li> <a href="/latex-tutorial/">Opplæring I Lateks</a> </li><li> <a href="/computer-networks-maq/">Datamaskin-Nettverk-Maq</a> </li><li> <a href="/gmail-questions/">Gmail-Spørsmål</a> </li><li> <a href="/python-numpy-linear-algebra/">Python Numpy-Lineær Algebra</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">Avvikshåndtering</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Avvikshåndtering</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/exception-handling/"> <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="/find-array-index-with-value-javascript">Finn Array Index med en verdi i JavaScript</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-do-superscript-google-docs">Hvordan gjøre Superscript i Google Docs</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/rekha">Rekha</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/is-ap-statistics-hard-131738">Er AP-statistikk vanskelig? En ekspertdiskusjon</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/linux-uniq-command">Linux Uniq Command</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="/java-queue-interface">prioritert kø java</a>
</li><li><a href="/linux-task-manager">Oppgavebehandling for linux</a>
</li><li><a href="/how-split-string-java-with-delimiter">java skilletegn</a>
</li><li><a href="/java-convert-char-int">char til int</a>
</li><li><a href="/how-get-iphone-emojis-android">hvordan få apple emojis på Android</a>
</li><li><a href="/methods-mockito">mockito når som helst</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="//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>