text-decoration-style 속성
text-decoration-style 속성은
텍스트의 선 종류를 변경합니다: 단일 선, 이중 선,
점선, 파선, 물결선.
이 속성은
text-decoration-line 속성과
text-decoration-color 속성과
함께 사용해야 합니다.
이러한 속성들은
text-decoration 속성의 기능을 확장하며,
보다 고급스러운 대안입니다.
구문
선택자 {
text-decoration-line: solid | double | dotted | dashed | wavy;
}
값
| 값 | 설명 |
|---|---|
solid |
실선. |
double |
이중선. |
dotted |
점선. |
dashed |
파선. |
wavy |
물결선. |
기본값: solid.
예제 . wavy 값
이제 텍스트가 빨간색 물결선으로 밑줄이 표시됩니다:
<div id="elem">
Lorem ipsum dolor sit amet.
</div>
#elem {
text-decoration-style: wavy;
text-decoration-color: red;
text-decoration-line: underline;
}
:
예제 . dotted 값
이제 텍스트가 빨간색 점선으로 밑줄이 표시됩니다:
<div id="elem">
Lorem ipsum dolor sit amet.
</div>
#elem {
text-decoration-style: dotted;
text-decoration-color: red;
text-decoration-line: underline;
}
:
예제 . double 값
이제 텍스트가 빨간색 이중선으로 가로줄이 표시됩니다:
<div id="elem">
Lorem ipsum dolor sit amet.
</div>
#elem {
text-decoration-style: double;
text-decoration-color: red;
text-decoration-line: line-through;
}
: