CSS -webkit-text-stroke-width 속성 : 텍스트 테두리 외곽선 두께(굵기) 설정

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

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

텍스트 테두리 외곽선의 두께를 설정하는 이 속성 이외에도 색상을 설정하는 -webkit-text-stroke-color 속성이 있습니다. 그리고, 이 두 속성을 한 번에 지정하는 단축 표현인 -webkit-text-stroke 속성이 있습니다.

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

구문

값

-webkit-text-stroke-width 속성의 값
초깃값	`0`
적용 요소	모든 요소
상속	예
애니메이션	아니오

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

/* 키워드 값 */
-webkit-text-stroke-width: thin;
-webkit-text-stroke-width: medium;
-webkit-text-stroke-width: thick;

/* 길이 값 */
-webkit-text-stroke-width: 4px;
-webkit-text-stroke-width: 0.15em;
-webkit-text-stroke-width: 3mm;
-webkit-text-stroke-width: 6pt;

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

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

주의할 점

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

예제

HTML

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