CSS-skriftgrænsen er en teknik, der bruges til at skabe en kantlignende kontur omkring HTML-teksttegn. Denne teknik bruges til at øge synligheden eller tilføje en dekorativ effekt til teksten. Dette kan opnås ved hjælp af egenskaben tekststrøg, som gør det muligt at tilpasse udseendet af tekst ved at tilføje en kant rundt om den.
Sådan anvender du Font Border i CSS
Der er to metoder til at anvende skrifttyperammer på tekstelementer i HTML:
Indholdsfortegnelse
Lad os studere disse CSS-egenskaber i detaljer og forstå, hvordan de bruges til at sætte tekstkanter i HTML.
Bruger tekst-skygge egenskab
Det Tekst-Skygge egenskab i CSS tilføjer en skyggeeffekt til teksten, hvilket giver dybde og vægt. Det kræver parametre for vandrette og lodrette forskydninger, sløringsradius og farve, hvilket giver designere mulighed for at skabe forskellige tekst-skyggeeffekter for forbedret visuel appel.
Syntaks:
text-shadow: h-shadow v-shadow blur-radius color;>
Ejendomsværdier :
egenskaben text-shadow accepterer mange værdier, nogle af dem er nævnt i tabellen nedenfor.
| Ejendomsværdi | Beskrivelse |
|---|---|
h-shadow> | Indstiller den vandrette skygge omkring teksten. |
v-shadow> | Indstiller den lodrette skygge omkring teksten. |
blur-radius> | Indstiller sløringsradius omkring tekstskyggen. |
color> | Indstiller farven på tekstskyggen. |
none> | Sætter ikke noget omkring teksten (ingen skygge). |
initial> | Indstiller tekstskyggen til dens standardindledende værdi. |
inherit> | Nedarver egenskabsværdierne fra dets overordnede element. |
Returneringsværdi:
Det returnerer en skriftramme/-skygge omkring teksten.
Eksempler på skriftgrænser
Eksempel 1: Dette eksempel bruger egenskaben text-shadow til at skabe skygge til teksten.
indsættelsessorteringsalgoritmerhtml
CSS-tekst-skygge-egenskabstitel><style>h1 { text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF; } stil> hoved> <body> <h1>techcodeview.comh1> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Produktion:</strong> </b> <span> </span></p> <img src='//techcodeview.com/img/picked/01/css-font-border.webp' alt="tekst skygge CSS"><p dir='ltr'> <b> <strong>Eksempel 2:</strong> </b> <span>Dette eksempel bruger egenskaben tekst-skygge til at oprette tekst med kant.</span></p>html<code class='hljs'> <pre class='hljs'><!DOCTYPE html> <html> <head> <title>CSS-tekst-skygge-egenskabstitel><!-- Style to use text-shadow property --> <style>.GFG { farve: hvid; skriftstørrelse: 50px; text-shadow: -1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000; } stil> hoved> <body> <p>techcodeview.comp> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Produktion:</strong> </b> </p> <img src='//techcodeview.com/img/picked/01/css-font-border-2.webp' alt="afgrænset tekst CSS"><h2 id='using-textstroke-property'> <b> <strong>Brug af egenskaben tekststrøg</strong> </b> </h2><p dir='ltr'><span>Det</span> <span>Tekst-Stroke egenskab</span> <span>bruges til at tilføje streg til teksten. Denne egenskab kan bruges til at ændre tekstens bredde og farve. Denne egenskab understøttes ved at bruge præfikset -webkit-.</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 eksempel bruger egenskaben tekststrøg til at oprette tekst med kant.</span></p>html<code class='hljs'> <pre class='hljs'><!DOCTYPE html> <html> <head> <title>CSS tekst-streg egenskab titel><!-- Style to use text-stroke property --> <style>.GFG { farve: hvid; skriftstørrelse: 50px; -webkit-tekst-strøg-bredde: 1px; -webkit-tekst-streg-farve: sort; } stil> hoved> <body> <p>techcodeview.comp> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Produktion:</strong> </b> <span> </span></p> <img src='//techcodeview.com/img/picked/01/css-font-border-3.webp' alt=""><p dir='ltr'> <b> <strong>Understøttet browser:</strong> </b> </p> <ul><li value='1'> <span>Google Chrome</span> <span>1</span></li><li value='2'> <span>Edge</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 grundlaget for websider, bruges til websideudvikling ved at style websteder og webapps. Du kan lære CSS fra bunden ved at følge dette</span> <span>CSS tutorial</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="/cpp-bitset/">Cpp-Bitsæt</a> </li><li> <a href="/c-keyword/">C Nøgleord</a> </li><li> <a href="/julia-dictionary-methods/">Julia-Ordbog-Metoder</a> </li><li> <a href="/maths-class-6-cat/">Matematik-Klasse-6</a> </li><li> <a href="/digital-electronics-adders/">Digital Elektronik - Addere</a> </li><li> <a href="/environment/">Miljø</a> </li><li> <a href="/hadoop-tutorial/">Hadoop Tutorial</a> </li><li> <a href="/math/">Matematik</a> </li><li> <a href="/bash-tutorial/">Bash Tutorial</a> </li><li> <a href="/computer-graphics/">Computer Grafik</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Hvad er en AP Scholar? Fordele og krav</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Vil du blive AP Scholar? Vi forklarer, hvad prisen er, hvad kravene er, og hvorfor du ikke skal stresse over det.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/what-is-an-ap-scholar-1311418"> <i class="fa fa-external-link"></i> Læs Mere</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="/how-align-images-css">Hvordan justerer man billeder i CSS?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-css">Hvad er CSS</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/numpy-logspace">numpy.logspace()</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/javascript-sleep-wait">JavaScript søvn/vent</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-address-resolution-protocol-works">Hvordan fungerer Address Resolution Protocol (ARP)?</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 Indlæg</h2>
<div class="content">
<ul class="list"> <li><a href="/thread-sleep-java-with-examples">java søvn</a>
</li><li><a href="/exception-handling-java">undtagelseshåndtering i java</a>
</li><li><a href="/first-java-program-hello-world-example">prøve java kode</a>
</li><li><a href="/ridhima-tiwari">ridhima tiwari</a>
</li><li><a href="/javascript-onclick-event">javascript onclick</a>
</li><li><a href="/law-logical-equivalence-discrete-mathematics">ækvivalens love</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 Rettigheder Forbeholdes | <a href="//pt.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 Os</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Privatlivspolitik</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>