HTML & CSS text-shadow 를 사용하여 글자 테두리선, 외곽선 넣기

HTML5 텍스트에 테두리 효과주기.  

웹개발을 하시면서 배경화면이랑 텍스트랑 색이 비슷할 경우가 있죠? 

그럴경우 글자색은 유지 하고 배경색과 차이를 두게 끔 하는 방법이 있는데요. 

바로 글자에 테두리선을 만드는 방법 입니다. 

 CSS 에서 직접적으로 테두리를 입히는 방법은 없고, 

 text-shadow 라는 그림자 효과를 위, 오른쪽, 아래, 왼쪽 모두 주어 사용하는 방법입니다.

 

<style>

h1 {
text-shadow: -1px 0 blue, 0 1px blue, 1px 0 blue, 0 -1px blue;

}
</style>

<h1>
 테두리선 만들기
</h1>

위 처럼 CSS 에 text-shadow 효과를 h1 태그에 적용 했을 때, h1 태그 안의 텍스트 들은 모두 파란색 외곽선(테두리)를 가지게 됩니다.

↓ 실행 화면

참 쉽죠?