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 class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.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="">범주</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/ejs-templating-language/">Ejs-템플릿 언어</a> </li><li> <a href="/design-pattern/">디자인 패턴</a> </li><li> <a href="/euler-circuit/">오일러 회로</a> </li><li> <a href="/excel-formulas/">엑셀 수식</a> </li><li> <a href="/gmail-questions/">지메일 질문</a> </li><li> <a href="/data-visualization/">데이터 시각화</a> </li><li> <a href="/microprocessor/">마이크로프로세서</a> </li><li> <a href="/java-files/">Java 파일</a> </li><li> <a href="/html-attributes/">Html 속성</a> </li><li> <a href="/physics-class-9-cat/">물리-9급</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="//spiritscaution.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>
</div>
</div>
</div>
<div class="section-inner">
<h2 class="heading">구현이 포함된 LRU 캐시에 대한 완전한 튜토리얼</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="/complete-tutorial-lru-cache-with-implementations"> <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="/install-yum-ubuntu">냠 우분투 설치</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/act-exact-start-time-131768">ACT 정확한 시작 시간 및 종료 시간</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/list-disney-princesses">디즈니 프린세스 목록</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/python-list-copy-method">Python 목록 copy() 메서드</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-install-mysql">MySQL을 설치하는 방법</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="/javascript-onload">자바스크립트 온로드 스크립트</a>
</li><li><a href="/java-localdate-class">현지 날짜</a>
</li><li><a href="/java-convert-string-int">문자열 정수</a>
</li><li><a href="/how-compare-two-objects-java">자바의 객체 평등</a>
</li><li><a href="/java-string-format">문자열 포맷터</a>
</li><li><a href="/sql-server-pivot">SQL 서버 피벗</a>
</li><li><a href="/java-instanceof">자바 인스턴스</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="//uk.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>
<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>