Obroba pisave CSS je tehnika, ki se uporablja za ustvarjanje a robom podoben obris okoli besedilnih znakov HTML. Ta tehnika se uporablja za izboljšanje vidnosti ali dodajanje dekorativnega učinka besedilu. To je mogoče doseči z lastnostjo text-stroke, ki omogoča prilagajanje videza besedila z dodajanjem obrobe okoli njega.
Kako uporabiti obrobo pisave v CSS
Obstajata dva načina za uporabo obrob pisave za besedilne elemente v HTML:
Kazalo
Podrobno preučimo te lastnosti CSS in razumemo, kako se uporabljajo za obrobe besedila v HTML.
Uporaba lastnosti text-shadow
The Lastnost Text-Shadow v CSS besedilu doda učinek sence, ki zagotavlja globino in poudarek. Zajema parametre za vodoravne in navpične odmike, radij zamegljenosti in barvo, kar oblikovalcem omogoča ustvarjanje različnih učinkov sence besedila za izboljšano vizualno privlačnost.
Sintaksa:
text-shadow: h-shadow v-shadow blur-radius color;>
Vrednosti nepremičnin :
Lastnost text-shadow sprejema veliko vrednosti, nekatere od njih so omenjene v spodnji tabeli.
| Vrednost nepremičnine | Opis |
|---|---|
h-shadow> | Nastavi vodoravno senco okoli besedila. |
v-shadow> | Nastavi navpično senco okoli besedila. |
blur-radius> | Nastavi polmer zameglitve okoli sence besedila. |
color> | Nastavi barvo sence besedila. |
none> | Ne nastavi ničesar okoli besedila (brez sence). |
initial> | Nastavi senco besedila na privzeto začetno vrednost. |
inherit> | Podeduje vrednosti lastnosti od nadrejenega elementa. |
Povratna vrednost:
Okrog besedila vrne obrobo pisave/senco.
Primeri obrobe pisave
Primer 1: Ta primer uporablja lastnost text-shadow za ustvarjanje sence besedila.
celoštevilska primerjava z javohtml
CSS text-shadow property title><style>h1 { senca besedila: 0 0 3px #FF0000, 0 0 5px #0000FF; } slog> glava> <body> <h1>techcodeview.comh1> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Izhod:</strong> </b> <span> </span></p> <img src='//techcodeview.com/img/picked/01/css-font-border.webp' alt="senca besedila CSS"><p dir='ltr'> <b> <strong>Primer 2:</strong> </b> <span>Ta primer uporablja lastnost text-shadow za ustvarjanje obrobljenega besedila.</span></p>html<code class='hljs'> <pre class='hljs'><!DOCTYPE html> <html> <head> <title>CSS text-shadow property title><!-- Style to use text-shadow property --> <style>.GFG { barva: bela; velikost pisave: 50px; senca besedila: -1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000; } slog> glava> <body> <p>techcodeview.comp> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Izhod:</strong> </b> </p> <img src='//techcodeview.com/img/picked/01/css-font-border-2.webp' alt="obrobljeno besedilo CSS"><h2 id='using-textstroke-property'> <b> <strong>Uporaba lastnosti poteze besedila</strong> </b> </h2><p dir='ltr'><span>The</span> <span>Lastnost poteze besedila</span> <span>se uporablja za dodajanje poteze besedilu. To lastnost lahko uporabite za spreminjanje širine in barve besedila. Ta lastnost je podprta z uporabo predpone -webkit-.</span></p> <p dir='ltr'> <b> <strong>Sintaksa:</strong> </b> </p> <pre class='hljs'>-webkit-text-stroke: width color;></pre><h3> <b> <strong>Primer</strong> </b> </h3><p dir='ltr'><span>Ta primer uporablja lastnost text-stroke za ustvarjanje obrobljenega besedila.</span></p>html<code class='hljs'> <pre class='hljs'><!DOCTYPE html> <html> <head> <title>Lastnost poteze besedila CSS title><!-- Style to use text-stroke property --> <style>.GFG { barva: bela; velikost pisave: 50px; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: črna; } slog> glava> <body> <p>techcodeview.comp> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Izhod:</strong> </b> <span> </span></p> <img src='//techcodeview.com/img/picked/01/css-font-border-3.webp' alt=""><p dir='ltr'> <b> <strong>Podprti brskalnik:</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 je temelj spletnih strani, uporablja se za razvoj spletnih strani z oblikovanjem spletnih mest in spletnih aplikacij. CSS se lahko naučite od začetka, tako da sledite tem</span> <span>Vadnica za CSS</span> <span>in</span> <span>Primeri CSS</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="/embedded-systems/">Vgrajeni Sistemi</a> </li><li> <a href="/r-tutorial/">R Vadnica</a> </li><li> <a href="/rxjs-tutorial/">Vadnica Rxjs</a> </li><li> <a href="/process-synchronization/">Sinhronizacija Procesa</a> </li><li> <a href="/sql-clauses-operators/">Operatorji Klavzul Sql</a> </li><li> <a href="/microprocessor/">Mikroprocesor</a> </li><li> <a href="/dsa-blogs/">Dsa-Blogi</a> </li><li> <a href="/c-manipulator/">Manipulator C++</a> </li><li> <a href="/other/">Drugo</a> </li><li> <a href="/cpp-array/">Niz Cpp</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">Avtentikacija vs. Pooblastilo | Razlika med avtentikacijo in avtorizacijo</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Avtentikacija vs. Pooblastilo | Razlika med avtentikacijo in avtorizacijo ter Sea Breeze s seznamom največjih razlik in primeri v realnem času, vključno s slikami, psom, mačko, bruto, neto, javo, bazo podatkov, znanostjo, splošno, angleščino itd.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/authentication-vs-authorization-difference-between-authentication"> <i class="fa fa-external-link"></i> Preberi Več</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Zanimivi Članki</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/how-many-litres-is-1-kg">Koliko litrov je 1 kg?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/defaultdict-python">Defaultdict v Pythonu</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/14-college-interview-questions-you-must-prepare-1311308">14 vprašanj za razgovor na univerzi, na katera se morate pripraviti</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/cosine-similarity">Kosinus podobnosti</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/explainer-what-is-snapchat-24262">Pojasnilo: Kaj je Snapchat?</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">Priljubljene Objave</h2>
<div class="content">
<ul class="list"> <li><a href="/full-adder">popolna tabela resnic seštevalnika</a>
</li><li><a href="/java-string-compare">primerjaj z nizi v Javi</a>
</li><li><a href="/how-sort-arraylist-java">arraylist razvrščen</a>
</li><li><a href="/java-gridlayout">mrežna postavitev</a>
</li><li><a href="/java-throw-exception">izjema vrzi javo</a>
</li><li><a href="/what-is-full-form-mit">v polni obliki</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 Vse Pravice Pridržane | <a href="//de.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Zavrnitev Odgovornosti</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">O Podjetju</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Politika Zasebnosti</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>