CSS -webkit-text-stroke-color 속성 : 텍스트 테두리 외곽선 색상 설정

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

-webkit-text-stroke-color 속성은
텍스트 문자에 테두리 외곽선(획)의 색상을 설정하는 속성입니다.
속성의 사용 방법과 예제 등에 대해 알아봅니다.

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

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

형식 구문

형식 정의

-webkit-text-stroke-color 속성의 형식 정의
초깃값	`currentcolor` (현재 글자색)
적용 요소	모든 요소
상속	예
애니메이션	예

구문

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

-webkit-text-stroke-color: red;
-webkit-text-stroke-color: #00a0e9;
-webkit-text-stroke-color: currentcolor;
-webkit-text-stroke-color: rgba(0, 0, 0, 0.4);

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

예제

HTML

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