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><!--//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="/commerce-difference-between/">Trgovina - Razlika Med</a> </li><li> <a href="/java-servlet/">Java-Servlet</a> </li><li> <a href="/chemical-formulas/">Kemijske Formule</a> </li><li> <a href="/mobile-phone-review/">Pregled Mobilnega Telefona</a> </li><li> <a href="/c-projects/">Projekti C++</a> </li><li> <a href="/cell-signaling/">Celična Signalizacija</a> </li><li> <a href="/neural-network/">Zivcno Omrezje</a> </li><li> <a href="/memory-management/">Upravljanje Pomnilnika</a> </li><li> <a href="/shell-scripting/">Skriptna Lupina</a> </li><li> <a href="/java-string-programs/">Java-String-Programs</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Shema baze podatkov</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Shema baze podatkov z blogom, kaj je quora, kaj je yandex, kontaktna stran, iskalnik duckduckgo, dnevnik iskalnika, facebook, google chrome, firefox itd.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/database-schema"> <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-check-delete-incognito-history-google-chrome">Kako preveriti in izbrisati zgodovino brez beleženja zgodovine v brskalniku Google Chrome?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-21-degrees-celsius-fahrenheit">Kaj je 21 stopinj Celzija v Fahrenheitu?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/best-analysis-money-1311560">Najboljša analiza: Denar in materializem v Velikem Gatsbyju</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/database">Baza podatkov</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/60-easy-oxymoron-examples-analysis-131154">60 preprostih primerov oksimorona + analiza</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="/mysql-update-join">pridruži se posodobitvi mysql</a>
</li><li><a href="/java-convert-date-string">oblikovati datum v niz</a>
</li><li><a href="/multiplexer">dva proti ena multiplekser</a>
</li><li><a href="/what-is-1-1000">1 od 1000</a>
</li><li><a href="/java-math-random-method">java naključna matematika naključna</a>
</li><li><a href="/difference-between-like">razlika med ljubeznijo in všečnostjo</a>
</li><li><a href="/rename-folder-linux">preimenuj imenik linux</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="//sk.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>
</body>
</html>