-webkit-text-stroke-color
속성 사용법
-webkit-text-stroke-color
속성은
텍스트 문자에 테두리 외곽선(획)의 색상을 설정하는 속성입니다.
속성의 사용 방법과 예제 등에 대해 알아봅니다.
텍스트 테두리 외곽선의 색상 설정하는 이 속성 이외에도 두께을 설정하는 -webkit-text-stroke-width
속성이 있습니다.
그리고, 이 두 속성을 한 번에 지정하는 단축 표현인 -webkit-text-stroke
속성이 있습니다.
텍스트 테두리 색상
-webkit-text-stroke-color
속성의 형식은 다음과 같습니다.
구문
selector {
-webkit-text-stroke-color: /* value */
}
값
초깃값 | currentcolor (현재 글자색) |
---|---|
적용 요소 | 모든 요소 |
상속 | 예 |
애니메이션 | 예 |
-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;
예제
<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>
텍스트
브라우저 호환성
속성 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
-webkit-text-stroke-color
|
1 | 15 | 49 | 3 |
명세서
명세서 사양 | |
---|---|
-webkit-text-stroke-color
|
Compatibility Standard #the-webkit-text-stroke-color |