CSS로 외곽 테두리 효과

가장 쉬운 방법

-webkit-text-stroke:3px black;

text-stroke 속성을 이용해 테두리를 입힌다.

그러나, 외곽 테두리가 아니라 글자를 먹고 들어가는 inner 테두리가 만들어진다.

 

text-shadow를 이용한 외곽 테두리

 text-shadow:-3px -3px 0 #000,0 -3px 0 #000,3px -3px 0 #000,3px 0 0 #000,3px 3px 0 #000,0 3px 0 #000,-3px 3px 0 #000,-3px 0 0 #000;

text-shadow를 쓰는 편법(?)을 이용해 외곽 테두리를 만들 수 있다.

 

상, 하, 좌, 우, 좌상, 우상, 좌하, 우하 위치에 shadow를 추가하면 된다.

 

영문의 경우 이정도로도 충분히 깔끔한 테두리가 만들어지지만, 한글의 경우 아래와 같이 모서리 깨짐 현상이 발생한다.

 

한글  깨짐 현상 보정

text-shadow: calc(3px * 1) 0 0 #000,
calc(3px * 0.9239) calc(3px * 0.3827) 0 #000,
calc(3px * 0.7071) calc(3px * 0.7071) 0 #000,
calc(3px * 0.3827) calc(3px * 0.9239) 0 #000,
0 calc(3px * 1) 0 #000,
calc(3px * -0.3827) calc(3px * 0.9239) 0 #000,
calc(3px * -0.7071) calc(3px * 0.7071) 0 #000,
calc(3px * -0.9239) calc(3px * 0.3827) 0 #000,
calc(3px * -1) 0 0 #000,
calc(3px * -0.9239) calc(3px * -0.3827) 0 #000,
calc(3px * -0.7071) calc(3px * -0.7071) 0 #000,
calc(3px * -0.3827) calc(3px * -0.9239) 0 #000,
0 calc(3px * -1) 0 #000,
calc(3px * 0.3827) calc(3px * -0.9239) 0 #000,
calc(3px * 0.7071) calc(3px * -0.7071) 0 #000,
calc(3px * 0.9239) calc(3px * -0.3827) 0 #000;

더 많은 각도에 shadow를 추가함으로써 깨짐 현상을 해결할 수 있다.

 

 

 

참고 자료 https://dev.to/codingdudecom/everything-about-stroke-text-in-css-561i