CSS fonta robeža ir tehnika, ko izmanto, lai izveidotu a apmalei līdzīga kontūra ap HTML teksta rakstzīmēm. Šo paņēmienu izmanto, lai uzlabotu redzamību vai pievienotu tekstam dekoratīvu efektu. To var panākt, izmantojot rekvizītu text-stroke, kas ļauj pielāgot teksta izskatu, pievienojot tam apmali.
Kā lietot fonta robežu CSS
Ir divas metodes, kā HTML teksta elementiem lietot fontu apmales:
Satura rādītājs
Sīkāk izpētīsim šos CSS rekvizītus un sapratīsim, kā tie tiek izmantoti, lai HTML ievietotu teksta apmales.
Izmantojot teksta ēnu īpašumu
The Teksta ēnu īpašums CSS pievieno tekstam ēnu efektu, nodrošinot dziļumu un uzsvaru. Tam nepieciešami parametri horizontālām un vertikālām nobīdēm, izplūšanas rādiusam un krāsām, ļaujot dizaineriem izveidot dažādus teksta ēnu efektus, lai uzlabotu vizuālo pievilcību.
Sintakse:
text-shadow: h-shadow v-shadow blur-radius color;>
Īpašuma vērtības :
text-shadow rekvizīts pieņem daudz vērtību, dažas no tām ir minētas tālāk esošajā tabulā.
| Īpašuma vērtība | Apraksts |
|---|---|
h-shadow> | Iestata horizontālo ēnu ap tekstu. |
v-shadow> | Iestata vertikālo ēnu ap tekstu. |
blur-radius> | Iestata izplūšanas rādiusu ap teksta ēnu. |
color> | Iestata teksta ēnas krāsu. |
none> | Nenosaka neko ap tekstu (bez ēnas). |
initial> | Iestata teksta ēnu uz noklusējuma sākotnējo vērtību. |
inherit> | Manto rekvizītu vērtības no tā vecākelementa. |
Atgriešanas vērtība:
Tas atgriež fonta apmali/ēnu ap tekstu.
Fonta apmaļu piemēri
1. piemērs: Šajā piemērā tiek izmantots teksta ēnas rekvizīts, lai tekstam izveidotu ēnu.
gulēt jshtml
CSS teksta ēnas rekvizīta nosaukums><style>h1 { text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF; } style> head> <body> <h1>techcodeview.comh1> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Izvade:</strong> </b> <span> </span></p> <img src='//techcodeview.com/img/picked/01/css-font-border.webp' alt="teksta ēna CSS"><p dir='ltr'> <b> <strong>2. piemērs:</strong> </b> <span>Šajā piemērā tiek izmantots teksta ēnas rekvizīts, lai izveidotu tekstu ar apmalēm.</span></p>html<code class='hljs'> <pre class='hljs'><!DOCTYPE html> <html> <head> <title>CSS teksta ēnas rekvizīta nosaukums><!-- Style to use text-shadow property --> <style>.GFG { krāsa: balta; fonta izmērs: 50 pikseļi; teksta ēna: -1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000; } style> head> <body> <p>techcodeview.comp> body> html>>></tag> <p dir='ltr'> <b> <strong>Izvade:</strong> </b> </p> <img src='//techcodeview.com/img/picked/01/css-font-border-2.webp' alt="apmales teksts CSS"><h2 id='using-textstroke-property'> <b> <strong>Teksta vilkšanas rekvizīta izmantošana</strong> </b> </h2><p dir='ltr'><span>The</span> <span>Teksta gājiena īpašums</span> <span>tiek izmantots, lai tekstam pievienotu insultu. Šo rekvizītu var izmantot, lai mainītu teksta platumu un krāsu. Šis rekvizīts tiek atbalstīts, izmantojot prefiksu -webkit-.</span></p> <p dir='ltr'> <b> <strong>Sintakse:</strong> </b> </p> <tag data-text-3='-webkit-text-stroke: width color;></pre> </code><h3> <b> <strong>Piemērs</strong> </b> </h3><p dir='ltr'><span>Šajā piemērā tiek izmantots teksta gājiena rekvizīts, lai izveidotu tekstu ar apmalēm.</span></p>html<tag data-text-1='<!DOCTYPE html> <html> <head> <title>CSS teksta vilkšanas rekvizīta nosaukums><!-- Style to use text-stroke property --> <style>.GFG { krāsa: balta; fonta izmērs: 50 pikseļi; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: melns; } style> head> <body> <p>techcodeview.comp> body> html>>></tag> <p dir='ltr'> <b> <strong>Izvade:</strong> </b> <span> </span></p> <img src='//techcodeview.com/img/picked/01/css-font-border-3.webp' alt=""><p dir='ltr'> <b> <strong>Atbalstītā pārlūkprogramma:</strong> </b> </p> <ul><li value='1'> <span>Google Chrome</span> <span>1</span></li><li value='2'> <span>Mala</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 ir tīmekļa lapu pamats, to izmanto tīmekļa lapu izstrādei, veidojot vietnes un tīmekļa lietotnes. Varat apgūt CSS no paša sākuma, izpildot šo</span> <span>CSS apmācība</span> <span>un</span> <span>CSS piemēri</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="">Kategorija</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/installation-ubuntu/">Instalēšana Ubuntu</a> </li><li> <a href="/shortest-path/">Īsākais Ceļš</a> </li><li> <a href="/mysql/">Mysql</a> </li><li> <a href="/cpp-operator/">Cpp Operators</a> </li><li> <a href="/python-built-functions/">Python-Iebūvētās Funkcijas</a> </li><li> <a href="/adobe/">Adobe</a> </li><li> <a href="/ds-tutorial/">Ds Apmācība</a> </li><li> <a href="/dbms-relational-model/">Dbvs-Relāciju Modelis</a> </li><li> <a href="/java-drivermanager/">Java Driver Manager</a> </li><li> <a href="/socket-programming/">Socket-Programmēšana</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Pievienošana sarakstam Python vārdnīcā</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Datorzinātņu portāls dīķiem. Tajā ir labi uzrakstīti, pārdomāti un labi izskaidroti raksti par datorzinātnēm un programmēšanu, viktorīnas un prakses/konkurētspējīgas programmēšanas/uzņēmuma intervijas jautājumi.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/appending-into-list-python-dictionary"> <i class="fa fa-external-link"></i> Lasīt Vairāk</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Interesanti Raksti</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/pandas-dataframe-pivot_table">Pandas DataFrame.pivot_table()</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/benefits-using-figma">Figma izmantošanas priekšrocības UI/UX dizainam</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-viber-24294">Kas ir Viber?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/java-naming-convention">Java nosaukumu konvencija</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/10-best-honors-colleges-1311404">10 labākās apbalvojumu koledžas un programmas</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ārākas Posts</h2>
<div class="content">
<ul class="list"> <li><a href="/learn-javascript-tutorial">javascript</a>
</li><li><a href="/pseudocode-java">java pseidokods</a>
</li><li><a href="/latex-matrix">lateksa matrica</a>
</li><li><a href="/java-linkedlist-class">saišu saraksts java</a>
</li><li><a href="/java-string-contains">java apakšvirkne satur</a>
</li><li><a href="/how-does-computer-work">darbs pie datora</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 Visas Tiesības Aizsargātas | <a href="//sl.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Atruna</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Par Mums</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Privātuma Politika</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>