CSS šrifto siena yra technika, naudojama kuriant a į kraštą panašus kontūras aplink HTML teksto simbolius. Ši technika naudojama norint pagerinti matomumą arba suteikti tekstui dekoratyvumo. Tai galima pasiekti naudojant teksto brūkšnio savybę, kuri leidžia tinkinti teksto išvaizdą, aplink jį pridedant kraštinę.
Kaip taikyti šrifto kraštinę CSS
Yra du būdai, kaip taikyti šrifto kraštines teksto elementams HTML:
Turinys
Išsamiai išnagrinėkime šias CSS ypatybes ir supraskime, kaip jos naudojamos teksto kraštinėms įterpti HTML.
Naudojant teksto šešėlio ypatybę
The Teksto šešėlio ypatybė CSS suteikia tekstui šešėlio efektą, suteikdamas gylio ir pabrėžimo. Tam reikalingi horizontalių ir vertikalių poslinkių, suliejimo spindulio ir spalvų parametrai, todėl dizaineriai gali sukurti įvairius teksto šešėlių efektus, kad pagerintų vizualinį patrauklumą.
Sintaksė:
text-shadow: h-shadow v-shadow blur-radius color;>
Turto vertės :
text-shadow ypatybė priima daug reikšmių, kai kurios iš jų nurodytos toliau esančioje lentelėje.
| Turto vertė | apibūdinimas |
|---|---|
h-shadow> | Nustato horizontalų šešėlį aplink tekstą. |
v-shadow> | Nustato vertikalų šešėlį aplink tekstą. |
blur-radius> | Nustato suliejimo spindulį aplink teksto šešėlį. |
color> | Nustato teksto šešėlio spalvą. |
none> | Nieko nenustato aplink tekstą (be šešėlio). |
initial> | Nustato teksto šešėlį į numatytąją pradinę reikšmę. |
inherit> | Paveldi nuosavybės vertes iš pirminio elemento. |
Grąžinimo vertė:
Tai grąžina šrifto kraštinę / šešėlį aplink tekstą.
Šrifto kraštinių pavyzdžiai
1 pavyzdys: Šiame pavyzdyje teksto šešėliui sukurti naudojama teksto šešėlio savybė.
krūvos rūšiavimo algoritmashtml
CSS teksto šešėlio nuosavybės pavadinimas><style>h1 { text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF; } style> head> <body> <h1>techcodeview.comh1> body> html>>></tag> <p dir='ltr'> <b> <strong>Išvestis:</strong> </b> <span> </span></p> <img src='//techcodeview.com/img/picked/01/css-font-border.webp' alt="teksto šešėlis CSS"><p dir='ltr'> <b> <strong>2 pavyzdys:</strong> </b> <span>Šiame pavyzdyje naudojama teksto šešėlio savybė, kad būtų sukurtas tekstas su apvadu.</span></p>html<tag data-text-1='<!DOCTYPE html> <html> <head> <title>CSS teksto šešėlio nuosavybės pavadinimas><!-- Style to use text-shadow property --> <style>.GFG { spalva: balta; šrifto dydis: 50 pikselių; teksto šešėlis: -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>Išvestis:</strong> </b> </p> <img src='//techcodeview.com/img/picked/01/css-font-border-2.webp' alt="CSS parašytas tekstas"><h2 id='using-textstroke-property'> <b> <strong>Naudojant teksto potėpio ypatybę</strong> </b> </h2><p dir='ltr'><span>The</span> <span>Teksto potėpio ypatybė</span> <span>naudojamas potėpiui į tekstą pridėti. Ši savybė gali būti naudojama norint pakeisti teksto plotį ir spalvą. Ši savybė palaikoma naudojant -webkit- priešdėlį.</span></p> <p dir='ltr'> <b> <strong>Sintaksė:</strong> </b> </p> <tag data-text-3='-webkit-text-stroke: width color;></pre> </code><h3> <b> <strong>Pavyzdys</strong> </b> </h3><p dir='ltr'><span>Šiame pavyzdyje teksto apvado kūrimui naudojama teksto brūkšnio savybė.</span></p>html<tag data-text-1='<!DOCTYPE html> <html> <head> <title>CSS teksto potėpio ypatybės pavadinimas><!-- Style to use text-stroke property --> <style>.GFG { spalva: balta; šrifto dydis: 50 pikselių; -Webkit-text-stroke-width: 1px; -Webkit-text-stroke-color: juoda; } style> head> <body> <p>techcodeview.comp> body> html>>></tag> <p dir='ltr'> <b> <strong>Išvestis:</strong> </b> <span> </span></p> <img src='//techcodeview.com/img/picked/01/css-font-border-3.webp' alt=""><p dir='ltr'> <b> <strong>Palaikoma naršyklė:</strong> </b> </p> <ul><li value='1'> <span>Google Chrome</span> <span>1</span></li><li value='2'> <span>Kraštas</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 yra tinklalapių pagrindas. Jis naudojamas kuriant tinklalapius, formuojant svetaines ir žiniatinklio programas. CSS galite išmokti nuo pat pradžių vadovaudamiesi šiuo nurodymu.</span> <span>CSS pamoka</span> <span>ir</span> <span>CSS pavyzdžiai</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="/free-games/">Nemokami Žaidimai</a> </li><li> <a href="/brain-teasers/">Galvosūkiai</a> </li><li> <a href="/javascript-object/">Javascript-Objektas</a> </li><li> <a href="/neet/">Neet</a> </li><li> <a href="/geometry/">Geometrija</a> </li><li> <a href="/postgresql-tutorial/">„Postgresql“ Pamoka</a> </li><li> <a href="/machine-learning/">Mašininis Mokymasis</a> </li><li> <a href="/java-object-class/">Java Objektų Klasė</a> </li><li> <a href="/sas-tutorial/">Sas Pamoka</a> </li><li> <a href="/python-pandas-dataframe-methods/">Python Pandas-Dataframe-Methods</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">Kiek kartų galite atlikti ACT?</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Kiek kartų turėtumėte paimti ACT? Skaitykite čia, kad sužinotumėte dažniausiai pasitaikančias pagrindines klaidas darant ACT ir kiek kartų reikia pakartotinai išbandyti.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/how-many-times-can-you-take-act-1311526"> <i class="fa fa-external-link"></i> Skaityti Daugiau</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Įdomios Straipsniai</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/10-ser-conjugation-charts-131774">10 Ser konjugacijos diagramų kiekvienam laikui ispanų kalba</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/c-programs/">C Programos</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/osi-model">OSI modelis</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/culture-gk/">Kultūra Gk</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/49-common-prepositions-you-need-know-131788">49 bendri prielinksniai, kuriuos reikia žinoti</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">Populiarios Temos</h2>
<div class="content">
<ul class="list"> <li><a href="/prime-number-program-java">Prime programa java</a>
</li><li><a href="/gimp-fonts">gimp šriftai</a>
</li><li><a href="/how-insert-watermark-word">įterpti vandens ženklą į žodį</a>
</li><li><a href="/multithreading-java">daugiagija java</a>
</li><li><a href="/how-remove-first-character-excel">excel pašalinti pirmąjį simbolį</a>
</li><li><a href="/lion-vs-tiger">skirtumas tarp liūto ir tigro</a>
</li><li><a href="/type-adobe-illustrator">viršutinis indeksas iliustratoriuje</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 Visos Teisės Saugomos | <a href="//ar.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Atsisakymas</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Apie Mus</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Privatumo 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>
<script defer src="https://static.cloudflareinsights.com/beacon.min.js/vcd15cbe7772f49c399c6a5babf22c1241717689176015" integrity="sha512-ZpsOmlRQV6y907TI0dKBHq9Md29nnaEIPlkf84rnaERnq6zvWvPUqr2ft8M1aS28oN72PdrCzSjY4U6VaAw1EQ==" data-cf-beacon='{"version":"2024.11.0","token":"bb7f486e3e3f4ebcacdbbef94c6ffb55","r":1,"server_timing":{"name":{"cfCacheStatus":true,"cfEdge":true,"cfExtPri":true,"cfL4":true,"cfOrigin":true,"cfSpeedBrain":true},"location_startswith":null}}' crossorigin="anonymous"></script>