CSS text-decoration-style 속성

정의와 사용법

text-decoration-style 속성은 텍스트 장식의 유형(실선, 파도선, 점선, 실선, 두 개의 선)을 설정합니다.

힌트:또한 참조: text-decoration 속성이는 이 세 속성의 줄임말 속성입니다:

  • text-decoration-line
  • text-decoration-style
  • text-decoration-color

다른 것도 참조:

CSS 강의:CSS 텍스트

HTML DOM 참조 매뉴얼:textDecorationStyle 속성

예제

다른 종류의 text-decoration 스타일을 설정합니다:

div.a {
  text-decoration-line: underline;
  text-decoration-style: solid;
}
div.b {
  text-decoration-line: underline;
  text-decoration-style: wavy;
}
div.c {
  text-decoration-line: underline;
  text-decoration-style: double;
}
div.d {
  text-decoration-line: overline underline;
  text-decoration-style: wavy;
}

본인이 직접 시도해 보세요

CSS 문법

text-decoration-style: solid|double|dotted|dashed|wavy|initial|inherit;

속성 값

값 설명
solid 기본 값. 선은 단일 선으로 표시됩니다.
double 선은 두 개의 선으로 표시됩니다.
dotted 선은 점선으로 표시됩니다.
dashed 선은 실선으로 표시됩니다.
wavy 선은 파도선으로 표시됩니다.
initial 이 속성을 기본 값으로 설정합니다. 참조: initial。
inherit 부모 요소에서 이 속성을 thừa kế합니다. 참조: inherit。

기술 세부 사항

기본 값: solid
thừa kế: 아니요
애니메이션 제작: 지원하지 않습니다. 참조:애니메이션 관련 속성。
버전: CSS3
JavaScript 문법: object.style.textDecorationStyle="wavy"

브라우저 지원

표에 나타난 숫자는 이 속성을 완전히 지원하는 최초 브라우저 버전을 나타냅니다.

moz-을 포함한 숫자는 프리픽스를 사용하는 최초 버전을 의미합니다.

Chrome IE / Edge Firefox Safari Opera
57.0 79.0 36.0
6.0 -moz-		 12.1 44.0