CSS -webkit-text-stroke 속성 – 텍스트 테두리 외곽선 스타일하기

`-webkit-text-stroke` 속성 사용법

-webkit-text-stroke 속성은
텍스트 문자에 테두리 외곽선(획)을 스타일하는 속성입니다.
속성의 사용 방법과 주의할 점, 예제 등에 대해 알아봅니다.

이 속성은 텍스트 문자 테두리 외곽선의 두께(굵기)를 설정하는 -webkit-text-stroke-width 속성과 텍스트 문자 테두리 외곽선의 색상을 설정하는 -webkit-text-stroke-color 속성을 한 번에 지정하는 단축 표현(Shorthand property) 속성입니다.

-webkit-text-stroke 속성의 형식은 다음과 같습니다.

구문

CSS

selector {
    -webkit-text-stroke: <'-webkit-text-stroke-width'> || <'-webkit-text-stroke-color'>;
    /*
        이 값은
        -webkit-text-stroke-width,
        -webkit-text-stroke-color 속성의 값입니다.
        지정하는 속성 값의 순서는 상관없습니다.
        지정하지 않은(생략한) 속성의 값은 초깃값이 적용됩니다.
    */
}

값

-webkit-text-stroke 속성의 값
초깃값	각 단축 속성별로: `-webkit-text-stroke-width`: `0` `-webkit-text-stroke-color`: `currentcolor`(현재 글자색)
적용 요소	모든 요소
상속	예
애니메이션	`-webkit-text-stroke-color` 값만 적용됨

CSS -webkit-text-stroke 속성 값 예시

/* width | color */
-webkit-text-stroke: 3px magento;
-webkit-text-stroke: thin magento;
-webkit-text-stroke: medium magento;
-webkit-text-stroke: thick magento;

/* color | width */
-webkit-text-stroke: magento 3px;
-webkit-text-stroke: rgba(0, 0, 0, 0.6) 3px;

/* width: % 단위 적용 불가 */
-webkit-text-stroke: 5% magento;

/* 글로벌 값 */
-webkit-text-stroke: inherit;
-webkit-text-stroke: initial;
-webkit-text-stroke: revert;
-webkit-text-stroke: revert-layer;
-webkit-text-stroke: unset;

주의할 점

애니메이션은 -webkit-text-stroke-color 값만 적용됩니다. -webkit-text-stroke-width 값에는 적용되지 않습니다.
-webkit-text-stroke-width 값의 단위로 퍼센트(%) 단위를 사용할 수 없습니다.

활용 예제

-webkit-text-stroke 속성을 활용한 텍스트 문자의 스타일을 몇 가지 예로 살펴보겠습니다.

테두리 외곽선만 있는 텍스트 문자

HTML

<style>
    .text {
        font-size: 70px;
        font-weight: 900;
        -webkit-text-fill-color: transparent;
        -webkit-text-stroke: 1px red;
    }
</style>
<p class="text">텍스트</p>

위 예제에서 사용한 -webkit-text-fill-color 속성은 텍스트 문자를 채우는 색상을 지정합니다. 이 속성은 글자색을 지정하는 color을 대신합니다.

테두리 외곽선만 있는 텍스트 문자에 `box-shadow` 추가하기

HTML

<style>
    .text {
        font-size: 70px;
        font-weight: 900;
        color: #fff;
        -webkit-text-stroke: 1px red;
        text-shadow: 1px 4px red;
    }
</style>
<p class="text">텍스트</p>

CSS text-shadow 속성

그라디언트 테두리 외곽선이 있는 텍스트 문자

HTML

<style>
    .text {
        font-size: 70px;
        font-weight: 900;
        color: #fff;
        -webkit-text-stroke: 5px transparent;
        -webkit-background-clip: text;
        background-clip: text;
        background-image: linear-gradient(to bottom, red, blue);
    }
</style>
<p class="text">텍스트</p>