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="//spiritscaution.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="/ai-ml-ds-with-python/">Ai-Ml-Ds Ar Python</a> </li><li> <a href="/computer-gk/">Dators Gk</a> </li><li> <a href="/numbers/">Skaitļi</a> </li><li> <a href="/python-dsa/">Python-Dsa</a> </li><li> <a href="/python-numpy-io/">Python Numpy-Io</a> </li><li> <a href="/algo-geek-2021-cat/">Kaut Kas — Geiks 2021</a> </li><li> <a href="/misc/">Nesadalījums</a> </li><li> <a href="/java-exceptions/">Java Izņēmumi</a> </li><li> <a href="/algorithms-greedy-algorithms/">Algoritmi - Mantkārīgi Algoritmi</a> </li><li> <a href="/java-abstract-class/">Java Abstraktā Klase Un Interfeiss</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="//spiritscaution.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>
</div>
</div>
</div>
<div class="section-inner">
<h2 class="heading">Atšķirība starp ievietošanas kārtošanu un atlases kārtošanu</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="/difference-between-insertion-sort"> <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="/what-is-class-rank-what-is-good-rank-131490">Kas ir klases rangs? Kas ir labs rangs?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/handshaking-theory-discrete-mathematics">Rokasspiediena teorija diskrētajā matemātikā</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/cucumber-testing/">Gurķu Pārbaude</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/python-pandas-series">Python | Pandas Series.str.contains()</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/parse-date-from-string-python">Parsēt datumu no virknes python</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="/masons-gain-formula">'masona formula'</a>
</li><li><a href="/convert-java-object-json">json no java objekta</a>
</li><li><a href="/npm-clear-cache">notīrīt kešatmiņu npm</a>
</li><li><a href="/postorder-traversal">binārā koka šķērsošana pēc kārtas</a>
</li><li><a href="/what-is-0-0625-fraction">0,0625 kā daļu</a>
</li><li><a href="/b-tree">b+ koks</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="//hr.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>