[CSS] 텍스트 외곽 선 처리해주는 "text-stroke"

 

위 이미지와 같은 텍스트를 외곽선을 css만으로도 표현이 가능하다.

 

방법1: -webkit-text-stroke 속성 사용.

<span class="text-stroke">12</span>

/* 외곽선을 표현하고 싶을 때 */
.text-stroke {
    -webkit-text-stroke: 1px #fff;
}

/* 내부 텍스트컬러가 비어있고 외곽선만있는 텍스트를 표현하고 싶을때 */
.text-stroke {
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px #fff;
}

다만 위의 방법은 웹킷 및 모질라 계열의 브라우저에서 사용이 가능하다.

그래도 ie가 사라진 현시점에 유용하게 사용 할 수 있을 것으로 보인다.

 

방법2: text-shadow 속성 사용

<span class="text-stroke">12</span>

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

text-shadow가 지원되는 브라우저라면 전체 사용이 가능한 속성이며 외형적으로 -webkit-text-stroke 비슷하게 만들 수 있다. 크로스 브라우징을 고려해야 할 때 사용하면 좋다.