[CSS] 글자에 테두리 효과 주기

 

 

 

1.  webkit-text-stroke

 

글자에 테두리 효과를 주기 위해 간단하게 webkit-text-stroke 속성을 이용하는 방법이 있습니다.

그러나 해당 속성은 IE 브라우저에서 지원하지 않습니다.

 

.text { -webkit-text-stroke: 1px #000; text-stroke: 1px #000; }

 

테두리

 

 

 

2.  text-shadow

 

위 방법이 IE 브라우저에서는 지원되지 않으므로, 크로스 브라우징을 위해 text-shadow 속성을 이용하여 테두리 효과를 줄 수도 있습니다.

 

.text { text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }

 

테두리