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 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="/c-projects/">C++ Projekter</a> </li><li> <a href="/banking-general-awareness/">Bankvirksomhed Generel Bevidsthed</a> </li><li> <a href="/hashtable/">Hashtabel</a> </li><li> <a href="/html-basics/">Html-Grundlæggende</a> </li><li> <a href="/cpu-scheduling/">Cpu-Planlægning</a> </li><li> <a href="/ai-blogs/">Ai-Blogs</a> </li><li> <a href="/graph/">Kurve</a> </li><li> <a href="/differences/">Forskelle</a> </li><li> <a href="/java-multithreading/">Java Multithreading</a> </li><li> <a href="/java-jdbc/">Java Jdbc</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">JavaScript Array every() metode</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> JavaScript Array every() Metode med eksempel, javascript array metoder, concat() metode, every() metode, filter() metode, forEach() metode, join() metode, indexOf() metode, lastIndexOf() metode, map( ) metode, push() metode, slice() metode, sort() metode, unshift() metode, toSource() metode osv.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/javascript-array-every-method"> <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="/list-indoor-games-names-english">Liste over indendørs spilnavne på engelsk for børn i 2024</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/advantages-disadvantages-technology">Fordele og ulemper ved teknologi</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-many-years-century">Hvor mange år i et århundrede?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/arrow-symbols-latex">Pilesymboler i LaTeX</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-install-python-packages-with-requirements">Sådan installeres Python-pakker med requirements.txt</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="/two-dimensional-array-c">todimensionelt array-program i c</a>
</li><li><a href="/who-invented-laptop">første bærbare computer</a>
</li><li><a href="/pandas-dataframe-iterrows">pandaer iterrows</a>
</li><li><a href="/how-generate-random-number-between-1-10-c">tilfældigt tal mellem 1 og 10</a>
</li><li><a href="/sunny-deol">solrig deol</a>
</li><li><a href="/java-math-class">java matematik klasse</a>
</li><li><a href="/best-cars-world">bedste bil i verden</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="//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 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>
<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>