CSS 글꼴 테두리 생성하는데 사용되는 기술이다. 테두리 같은 윤곽선 HTML 텍스트 문자 주변. 이 기술은 텍스트의 가시성을 높이거나 장식적인 효과를 추가하는 데 사용됩니다. 이는 텍스트 주위에 테두리를 추가하여 텍스트 모양을 사용자 정의할 수 있는 text-Stroke 속성을 사용하여 수행할 수 있습니다.
CSS에서 글꼴 테두리를 적용하는 방법
HTML의 텍스트 요소에 글꼴 테두리를 적용하는 방법에는 두 가지가 있습니다.
내용의 테이블
이러한 CSS 속성을 자세히 연구하고 HTML에 텍스트 테두리를 배치하는 데 어떻게 사용되는지 이해해 보겠습니다.
텍스트 그림자 속성 사용
그만큼 텍스트-그림자 속성 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 속성을 사용하여 텍스트에 그림자를 만듭니다.
HTML CSS 텍스트 그림자 속성 제목><style>h1 { 텍스트 그림자: 0 0 3px #FF0000, 0 0 5px #0000FF; } 스타일> 머리> <body> <h1>techcodeview.comh1> 본문> 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 텍스트 그림자 속성 제목><!-- Style to use text-shadow property --> <style>.GFG { 색상: 흰색; 글꼴 크기: 50px; 텍스트 그림자: -1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000; } 스타일> 머리> <body> <p>techcodeview.comp> 본문> html>></pre> </code> <p dir='ltr'> <b> <strong>산출:</strong> </b> </p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/java-string-format">문자열.형식 자바</a>
</blockquote> <img src='//techcodeview.com/img/picked/01/css-font-border-2.webp' alt="테두리가 있는 텍스트 CSS"><h2 id='using-textstroke-property'> <b> <strong>텍스트 획 속성 사용</strong> </b> </h2><p dir='ltr'><span>그만큼</span> <span>텍스트 스트로크 속성</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>이 예에서는 텍스트 획 속성을 사용하여 테두리가 있는 텍스트를 만듭니다.</span></p>HTML<code class='hljs'> <pre class='hljs'><!DOCTYPE html> <html> <head> <title>CSS 텍스트 획 속성 제목><!-- Style to use text-stroke property --> <style>.GFG { 색상: 흰색; 글꼴 크기: 50px; -웹킷-텍스트-획-너비: 1px; -웹킷-텍스트-획-색상: 검정색; } 스타일> 머리> <body> <p>techcodeview.comp> 본문> 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>파이어폭스</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="/heap/">더미</a> </li><li> <a href="/node-js-tutorial/">Node.js 튜토리얼</a> </li><li> <a href="/classroom-resources/">교실 자료</a> </li><li> <a href="/python-numpy-mathematical-function/">Python Numpy-수학 함수</a> </li><li> <a href="/exception-handling/">예외 처리</a> </li><li> <a href="/excel-functions/">Excel 기능</a> </li><li> <a href="/java-overloading/">Java 오버로딩</a> </li><li> <a href="/python-regex-programs/">Python Regex 프로그램</a> </li><li> <a href="/microservices-tutorial/">마이크로서비스 튜토리얼</a> </li><li> <a href="/linux-commands/">리눅스 명령</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Java의 디자인 패턴</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> 핵심 Java 디자인, 패턴, 디자인, 창작 디자인, 추상 팩토리 패턴, 싱글톤 디자인 패턴, 어댑터, 방문자 패턴, 템플릿 패턴, 명령 패턴, 상태 패턴, Java 등을 갖춘 Java의 디자인 패턴</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/design-patterns-java"> <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="/explained-what-is-houseparty-24250">설명: 하우스파티란 무엇인가요?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/list-cities-new-york">뉴욕의 도시 목록</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-recover-deleted-snapchat-messages">삭제된 Snapchat 메시지를 복구하는 방법?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/java-string-trim">자바 문자열 다듬기()</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/linear-regression-machine-learning">기계 학습의 선형 회귀</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="/what-is-15-100">100.00개 중 15개</a>
</li><li><a href="/how-check-null-java">자바 널 체크</a>
</li><li><a href="/how-split-string-java-with-delimiter">자바 구분 기호</a>
</li><li><a href="/java-throw-exception">자바 예외 처리를 던져라</a>
</li><li><a href="/prims-algorithm">얇은 알고리즘</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="//ja.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>