Границя шрифту CSS це техніка, яка використовується для створення a контур, схожий на кордон навколо текстових символів HTML. Цей прийом використовується для покращення видимості або додання декоративного ефекту тексту. Цього можна досягти за допомогою властивості text-stroke, яка дозволяє налаштовувати зовнішній вигляд тексту, додаючи рамку навколо нього.
Як застосувати рамку шрифту в CSS
Існує два способи застосування меж шрифту до текстових елементів у HTML:
Зміст
Давайте детально вивчимо ці властивості CSS і зрозуміємо, як вони використовуються для розміщення рамок тексту в HTML.
Використання властивості text-shadow
The Властивість Text-Shadow у CSS додає ефект тіні до тексту, надаючи глибину та акцент. Він приймає параметри для горизонтального та вертикального зміщення, радіуса розмиття та кольору, що дозволяє дизайнерам створювати різні ефекти тіні тексту для покращення візуальної привабливості.
Синтаксис:
text-shadow: h-shadow v-shadow blur-radius color;>
Вартість власності :
Властивість text-shadow приймає багато значень, деякі з них згадано в таблиці нижче.
| Вартість власності | опис |
|---|---|
h-shadow> | Встановлює горизонтальну тінь навколо тексту. |
v-shadow> | Встановлює вертикальну тінь навколо тексту. |
blur-radius> | Встановлює радіус розмиття навколо тіні тексту. |
color> | Встановлює колір тіні тексту. |
none> | Не задає нічого навколо тексту (без тіні). |
initial> | Встановлює початкове значення тіні тексту за замовчуванням. |
inherit> | Успадковує значення властивостей від батьківського елемента. |
Повернене значення:
Він повертає рамку/тінь шрифту навколо тексту.
Приклади рамки шрифту
Приклад 1: У цьому прикладі використовується властивість text-shadow для створення тіні до тексту.
випадкове число c кодhtml
CSS text-shadow property title><style>h1 { text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF; } стиль> голова> <body> <h1>techcodeview.comh1> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Вихід:</strong> </b> <span> </span></p> <img src='//techcodeview.com/img/picked/01/css-font-border.webp' alt="текстова тінь CSS"><p dir='ltr'> <b> <strong>приклад 2:</strong> </b> <span>У цьому прикладі використовується властивість text-shadow для створення тексту з рамкою.</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 { колір: білий; розмір шрифту: 50px; text-shadow: -1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000; } стиль> голова> <body> <p>techcodeview.comp> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Вихід:</strong> </b> </p> <img src='//techcodeview.com/img/picked/01/css-font-border-2.webp' alt="облямований текст CSS"><h2 id='using-textstroke-property'> <b> <strong>Використання властивості text-stroke</strong> </b> </h2><p dir='ltr'><span>The</span> <span>Властивість Text-Stroke</span> <span>використовується для додавання обведення до тексту. Цю властивість можна використовувати для зміни ширини та кольору тексту. Ця властивість підтримується за допомогою префікса -webkit-.</span></p> <p dir='ltr'> <b> <strong>Синтаксис:</strong> </b> </p> <pre class='hljs'>-webkit-text-stroke: width color;></pre><h3> <b> <strong>приклад</strong> </b> </h3><p dir='ltr'><span>У цьому прикладі для створення тексту з рамкою використовується властивість text-stroke.</span></p>html<code class='hljs'> <pre class='hljs'><!DOCTYPE html> <html> <head> <title>CSS text-stroke property title><!-- Style to use text-stroke property --> <style>.GFG { колір: білий; розмір шрифту: 50px; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: чорний; } стиль> голова> <body> <p>techcodeview.comp> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Вихід:</strong> </b> <span> </span></p> <img src='//techcodeview.com/img/picked/01/css-font-border-3.webp' alt=""><p dir='ltr'> <b> <strong>Підтримуваний браузер:</strong> </b> </p> <ul><li value='1'> <span>Гугл хром</span> <span>1</span></li><li value='2'> <span>Край</span> <span> </span> <span>12</span></li><li value='3'> <span>Firefox</span> <span>1</span></li><li value='4'> <span>Опера</span> <span>3.5</span></li><li value='5'> <span>Сафарі</span> <span>1</span></li></ul><p dir='ltr'><span>CSS є основою веб-сторінок, використовується для розробки веб-сторінок шляхом оформлення веб-сайтів і веб-програм. Ви можете вивчити CSS з нуля, дотримуючись цього</span> <span>Підручник CSS</span> <span>і</span> <span>Приклади 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="">Категорія</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/geometric-lines/">Геометричні Лінії</a> </li><li> <a href="/maths/">Математика</a> </li><li> <a href="/data-structures-hash/">Структури Даних-Хеш</a> </li><li> <a href="/jfreechart-tutorial/">Підручник Jfreechart</a> </li><li> <a href="/java-character-class/">Клас Символів Java</a> </li><li> <a href="/net-framework/">.Net Framework</a> </li><li> <a href="/microprocessor/">Мікропроцесор</a> </li><li> <a href="/r-tutorial/">R Підручник</a> </li><li> <a href="/cash-app-queries/">Cash App - Запити</a> </li><li> <a href="/java-double/">Java-Double</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Як створити календар у Google Таблицях</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Портал інформатики для фанатів. Він містить добре написані, добре продумані та добре пояснені статті з інформатики та програмування, тести та запитання для практики/змагання з програмування/співбесіди в компанії.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/how-make-calendar-google-sheets"> <i class="fa fa-external-link"></i> Читати Далі</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Цікаві Статті</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/print-first-n-numbers-with-exactly-two-set-bits">Виведіть перші n чисел із рівно двома розрядами</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/camel-case-java">Camel case на Яві</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/henry-cavill-brothers-all-about-piers">Брати Генрі Кавілл (Все про Пірса, Нікі, Саймона та Чарлі)</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-eop-your-guide-educational-opportunity-programs-1311278">Що таке EOP? Ваш путівник з освітніх програм</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/top-10-interesting-facts-about-thomas-edison">10 найцікавіших фактів про Томаса Едісона та деякі цікаві факти</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">Популярні Пости</h2>
<div class="content">
<ul class="list"> <li><a href="/tcp-vs-udp">tcp проти udp</a>
</li><li><a href="/mylivecricket-alternatives">альтернатива mylivecricket</a>
</li><li><a href="/partial-dependency-dbms">часткова залежність</a>
</li><li><a href="/freddie-mercury">Фредді Мерк'юрі</a>
</li><li><a href="/java-convert-char-int">char до внутр</a>
</li><li><a href="/java-arrays">array.з java</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 Всі Права Захищені | <a href="//hu.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Відмова Від Відповідальності</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Про Нас</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Політика Конфіденційності</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>