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><!--//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="/java-interfaces/">Java-Grensesnitt</a> </li><li> <a href="/compiler-tutorial/">Kompilatoropplæring</a> </li><li> <a href="/tcs/">Tcs</a> </li><li> <a href="/c-const-keyword/">C++-Const Søkeord</a> </li><li> <a href="/blogathon-2021-cat/">Blogathon-2021</a> </li><li> <a href="/cyber-security/">Cyber-Sikkerhet</a> </li><li> <a href="/min-heap/">Min-Haug</a> </li><li> <a href="/technical-scripter-2018-cat/">Technical Scripter 2018</a> </li><li> <a href="/javascript-lodash/">Javascript-Lodash</a> </li><li> <a href="/mensuration-3d/">3D Måling</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Matekursene på videregående skoler du bør ta</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Hvilke mattetimer bør du ta på videregående? Trenger du trig eller kalkulus for å imponere høyskoler? Lær hvilke kurs du skal ta, inkludert AP/IB-klasser.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/high-school-math-courses-you-should-take-131494"> <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="/does-coin-flip-really-50-50-probability">Har Coin flip virkelig en 50–50 sannsynlighet?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/best-summary-analysis-1311476">Beste sammendrag og analyse: The Great Gatsby, kapittel 4</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/supervised-unsupervised-learning">Veiledet og uovervåket læring</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-putnam-math-competition-1311522">Hva er Putnam Math-konkurransen? Hvordan kan du Excel?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-encrypt-password-java">Hvordan kryptere passord i Java?</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="/heap-sort-algorithm">heapify sortering</a>
</li><li><a href="/java-string-replace">string java erstatning</a>
</li><li><a href="/fibonacci-series-java">fibonacci kode java</a>
</li><li><a href="/quick-access-toolbar">ms word hurtigtilgangsverktøylinje</a>
</li><li><a href="/java-convert-string-int">transformer streng til int</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="//da.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>
</body>
</html>