Chenarul fontului CSS este o tehnică folosită pentru a crea o contur asemănător unei margini în jurul caracterelor text HTML. Această tehnică este folosită pentru a spori vizibilitatea sau pentru a adăuga un efect decorativ textului. Acest lucru poate fi realizat folosind proprietatea text-stroke, care permite personalizarea aspectului textului prin adăugarea unui chenar în jurul acestuia.
Cum să aplicați chenarul fontului în CSS
Există două metode de a aplica chenarele fontului elementelor de text în HTML:
Cuprins
Să studiem aceste proprietăți CSS în detaliu și să înțelegem cum sunt folosite pentru a pune chenarele textului în HTML.
Folosind proprietatea text-shadow
The Proprietate text-umbră în CSS adaugă un efect de umbră textului, oferind profunzime și accent. Este nevoie de parametri pentru decalajele orizontale și verticale, raza de estompare și culoare, permițând designerilor să creeze diferite efecte de umbră de text pentru un aspect vizual îmbunătățit.
Sintaxă:
text-shadow: h-shadow v-shadow blur-radius color;>
Valorile proprietăților :
Proprietatea text-shadow acceptă o mulțime de valori, unele dintre ele sunt menționate în tabelul de mai jos.
| Valoarea proprietății | Descriere |
|---|---|
h-shadow> | Setează umbra orizontală în jurul textului. |
v-shadow> | Setează umbra verticală în jurul textului. |
blur-radius> | Setează raza de estompare în jurul umbrei textului. |
color> | Setează culoarea umbrei textului. |
none> | Nu stabilește nimic în jurul textului (fără umbră). |
initial> | Setează umbra textului la valoarea inițială implicită. |
inherit> | Moștenește valorile proprietății din elementul părinte. |
Valoare returnată:
Returnează un chenar/umbră de font în jurul textului.
Exemple de chenar de font
Exemplul 1: Acest exemplu folosește proprietatea text-shadow pentru a crea umbră textului.
xor cpphtml
Titlul proprietății text-umbră CSS><style>h1 { text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF; } stil> cap> <body> <h1>techcodeview.comh1> body> html>>></pre> </code> <p dir='ltr'> <b> <strong>Ieșire:</strong> </b> <span> </span></p> <img src='//techcodeview.com/img/picked/01/css-font-border.webp' alt="text umbră CSS"><p dir='ltr'> <b> <strong>Exemplul 2:</strong> </b> <span>Acest exemplu folosește proprietatea text-shadow pentru a crea text mărginit.</span></p>html<code class='hljs'> <pre class='hljs'><!DOCTYPE html> <html> <head> <title>Titlul proprietății text-umbră CSS><!-- Style to use text-shadow property --> <style>.GFG { culoare: alb; dimensiunea fontului: 50px; text-shadow: -1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000; } stil> cap> <body> <p>techcodeview.comp> body> html>>></pre> </code> <p dir='ltr'> <b> <strong>Ieșire:</strong> </b> </p> <img src='//techcodeview.com/img/picked/01/css-font-border-2.webp' alt="text marginit CSS"><h2 id='using-textstroke-property'> <b> <strong>Folosind proprietatea text-stroke</strong> </b> </h2><p dir='ltr'><span>The</span> <span>Proprietate Text-Stroke</span> <span>este folosit pentru a adăuga un contur în text. Această proprietate poate fi folosită pentru a modifica lățimea și culoarea textului. Această proprietate este acceptată prin utilizarea prefixului -webkit-.</span></p> <p dir='ltr'> <b> <strong>Sintaxă:</strong> </b> </p> <pre class='hljs'>-webkit-text-stroke: width color;></pre><h3> <b> <strong>Exemplu</strong> </b> </h3><p dir='ltr'><span>Acest exemplu folosește proprietatea text-stroke pentru a crea text mărginit.</span></p>html<code class='hljs'> <pre class='hljs'><!DOCTYPE html> <html> <head> <title>Titlul proprietății CSS text-stroke><!-- Style to use text-stroke property --> <style>.GFG { culoare: alb; dimensiunea fontului: 50px; -webkit-text-stroke-width: 1px; -webkit-text-stroke-culoare: negru; } stil> cap> <body> <p>techcodeview.comp> body> html>>></pre> </code> <p dir='ltr'> <b> <strong>Ieșire:</strong> </b> <span> </span></p> <img src='//techcodeview.com/img/picked/01/css-font-border-3.webp' alt=""><p dir='ltr'> <b> <strong>Browser acceptat:</strong> </b> </p> <ul><li value='1'> <span>Google Chrome</span> <span>1</span></li><li value='2'> <span>Margine</span> <span> </span> <span>12</span></li><li value='3'> <span>Firefox</span> <span>1</span></li><li value='4'> <span>Operă</span> <span>3.5</span></li><li value='5'> <span>Safari</span> <span>1</span></li></ul><p dir='ltr'><span>CSS este baza paginilor web, este folosit pentru dezvoltarea paginilor web prin modelarea site-urilor web și a aplicațiilor web. Puteți învăța CSS de la zero urmând acest lucru</span> <span>Tutorial CSS</span> <span>și</span> <span>Exemple CSS</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="">Categorie</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/alternatives/">Alternative</a> </li><li> <a href="/restful/">Odihnitor</a> </li><li> <a href="/aws-tutorial/">Tutorial Aws</a> </li><li> <a href="/java-priority-queue/">Java-Coada-Prioritate</a> </li><li> <a href="/excel-formulas/">Formule Excel</a> </li><li> <a href="/java-arraylist/">Java-Arraylist</a> </li><li> <a href="/microsoftexcel/">Microsoft Excel</a> </li><li> <a href="/euler-totient/">Euler-Totient</a> </li><li> <a href="/linux-command/">Comanda Linux</a> </li><li> <a href="/dbms-relational-algebra/">Dbms-Algebră Relațională</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Interogare SQL pentru a converti Datetime în Data</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Un portal de informatică pentru tocilari. Conține articole de informatică și programare bine scrise, bine gândite și bine explicate, chestionare și întrebări practice/programare competitivă/interviu pentru companie.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/sql-query-convert-datetime-date"> <i class="fa fa-external-link"></i> Citeşte Mai Mult</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Articole Interesante</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/binary-representation/">Binară-Reprezentare</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-chmod-777-all-subfolders-var-www">Cum să Chmod 777 toate subfolderele din /var/www</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/is-early-action-binding-1311194">Acțiunea timpurie este obligatorie?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-myspace">Ce este Myspace?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/complete-list-high-school-electives-131270">Lista completă a opțiunilor de liceu</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">Posturi Populare</h2>
<div class="content">
<ul class="list"> <li><a href="/latex-lists">liste de latex</a>
</li><li><a href="/alphabet-numbers">numere pentru alfabet</a>
</li><li><a href="/add-elements-array-java">java adauga la o matrice</a>
</li><li><a href="/c-strings">coarde în c</a>
</li><li><a href="/list-cities-usa">state unite cate orase</a>
</li><li><a href="/java-string-compareto">șir de caractere java compară</a>
</li><li><a href="/java-convert-string-int">conversia unui șir în întreg în java</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 Toate Drepturile Rezervate | <a href="//da.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Declinare A Răspunderii</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Despre Noi</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Politica De Confidențialitate</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>