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 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="">Kategorija</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/socket-programming/">Socket-Programmēšana</a> </li><li> <a href="/knapsack/">Mugursoma</a> </li><li> <a href="/cpp-pointer/">Cpp Rādītājs</a> </li><li> <a href="/classroom-resources/">Klases Resursi</a> </li><li> <a href="/sas-tutorial/">Sas Apmācība</a> </li><li> <a href="/ssc-general-awareness/">Ssc Vispārējā Izpratne</a> </li><li> <a href="/commerce-types/">Tirdzniecības Veidi</a> </li><li> <a href="/shortest-path/">Īsākais Ceļš</a> </li><li> <a href="/autocad-tutorial/">Autocad Apmācība</a> </li><li> <a href="/geometric/">Ģeometriski</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">10+ labākās vietnes, kurās var lejupielādēt bezmaksas PDF mācību grāmatas [2024]</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Iegūstiet 10+ labāko vietņu sarakstu, lai lejupielādētu bezmaksas PDF mācību grāmatas vairākās valodās un jebkurā domēnā. Varat arī atlasīt grāmatas, pamatojoties uz kategorijām.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/10-best-websites-download-free-pdf-textbooks"> <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="/discrete-mathematics/">Diskrētā Matemātika</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/hierarchical-clustering-machine-learning">Hierarhiskā klasterizācija mašīnmācībā</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/is-blue-whale-challenge-hoax-24264">Vai zilā vaļa izaicinājums ir mānīšana?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/explained-what-is-younow-24278">Paskaidrots: kas ir YouNow?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/python-list-sort-method">Python List sort() metode</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="/er-diagram-dbms">ir modeļu piemēri</a>
</li><li><a href="/bash-else-if">citādi ja bash</a>
</li><li><a href="/java-string">stīgu metodes java</a>
</li><li><a href="/what-is-monitor">kas ir monitors</a>
</li><li><a href="/sanjay-dutt">Sandžejs Duts un</a>
</li><li><a href="/npm-clear-cache">npm tīru kešatmiņu</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="//ro.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>
<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>