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="//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="/sql-server/">Sql-Strežnik</a> </li><li> <a href="/html-xml/">Html In Xml</a> </li><li> <a href="/geometry/">Geometrija</a> </li><li> <a href="/java-reflection/">Java Reflection</a> </li><li> <a href="/data-visualization/">Vizualizacija Podatkov</a> </li><li> <a href="/technical-scripter-2020-cat/">Tehnični Skripter 2020</a> </li><li> <a href="/excel-formulas/">Excelove Formule</a> </li><li> <a href="/python-gui/">Python-Gui</a> </li><li> <a href="/tensorflow-tutorial/">Vadnica Tensorflow</a> </li><li> <a href="/pc-tips/">Pc Nasveti</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">Kaj je Stack?</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Kaj je sklad v podatkovni strukturi? z uvodom, asimptotično analizo, nizom, kazalcem, strukturo, enojno povezanim seznamom, dvojno povezanim seznamom, krožnim povezanim seznamom, binarnim iskanjem, linearnim iskanjem, razvrščanjem, razvrščanjem vedra, razvrščanjem glavnika, razvrščanjem po lupini, razvrščanjem kopice, razvrščanjem z združitvijo, razvrščanjem izbire, Razvrščanje s štetjem, sklad, Qene, krožni Quene, graf, drevo, drevo B, drevo B+, drevo Avl itd.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/what-is-stack"> <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="/c-functions/">C-Funkcije</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/kylie-jenner">Kylie Jenner</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/vector-push_back">vector::push_back() in vector::pop_back() v C++ STL</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/ooad-object-oriented-analysis/">Ooad - Objektno Usmerjena Analiza In Načrtovanje</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-check-data-type-java">Kako preveriti vrsto podatkov v Javi?</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="/java-string-replaceall">niz nadomesti vse jave</a>
</li><li><a href="/java-switch-statement">preklopni stavek java</a>
</li><li><a href="/linux-file-system">datotečni sistem v linuxu</a>
</li><li><a href="/java-convert-int-string">int niz java</a>
</li><li><a href="/agents-artificial-intelligence">umetna inteligenca in inteligentni agenti</a>
</li><li><a href="/java-convert-string-int">pretvorba iz niza v int v Javi</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="//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>