English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
border-style CSS 속성은 단일 테두리 스타일 속성을 설정하는 것입니다.border-top-style，border-right-style，border-bottom-style와border-left-style의 요약 속성.
다음 표는 이 속성의 사용 설명과 버전 기록, 그리고 JavaScript 스크립트에서 이 속성의 사용 문법을 설명합니다.
| 기본 값: | none |
|---|---|
| 적용 대상: | 모든 요소 |
| 상속: | 없음 |
| 애니메이션 가능: | 아니요.참조: 애니메이션 속성。 |
| 버전: | CSS 1，2，3 |
| JavaScript 문법: | object object.style.borderStyle="dotted double" |
이 속성의 문법은 다음과 같습니다:
border-style: [ none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ] 1 to 4 values | initial | inherit
이 약자 기호는 하나, 두 개, 세 개 또는 네 개의 공백으로 구분된 값을 사용할 수 있습니다.
지정된 경우한 가지 값이 경우 모든 네 개의 테두리에 적용됩니다.
지정된 경우두 가지 값이 경우 첫 번째 값은 상단과 하단 테두리에, 두 번째 값은 우측과 좌측 테두리에 적용됩니다.
지정된 경우세 가지 값이 경우 첫 번째 값은 상단 테두리에, 두 번째 값은 좌우 테두리에, 세 번째 값은 하단 테두리에 적용됩니다.
지정된 경우چه 네 가지 값이 경우 각 값은 상, 우, 하, 좌 순서로 테두리에 적용됩니다.
아래 예제는 border 사용 방법을 설명합니다.-style 속성.
p {
border-style: double;
border-width: 5px;
}테스트를 보려면‹/›아래 표는 이 속성의 값을 설명합니다。
| 값 | 설명 |
|---|---|
| none | 경계선을 표시하지 않습니다。 |
| hidden | 와 동일하지만, 테이블 셀은접히는 경계선두 셀이 공유하는 경계선을 표시합니다. hidden 값은 경계선을 그리지 않도록 보장하며, 다른 모든 경계선 스타일보다 hidden 우선순위를 가집니다。 |
| dotted | 경계선을 시리즈의 점으로 표시합니다。 |
| dashed | 경계선을 시리즈의 짧은 선단으로 표시합니다. |
| solid | 경계선을 단일 선으로 표시합니다。 |
| double | 경계선을 두 개의 평행한 선으로 표시하고, 그들 사이에 간격을 두면, 두 줄의 총 길이와 그들 사이의 간격은 항상 같습니다.border-width의 값을 나타냅니다。 |
| groove | 경계선을 캔버스에 새겨진 것처럼 표시합니다. 그것은3D의 인상, 보통 경계선 색상보다 밝은 색상을 사용하여 그림자를 만들어줍니다.border-color더 밝고 더 어두운 두 가지 색상을 사용하여 그림자를 만들어줍니다. |
| ridge | 효과와 반대되는 경계선 groove를 표시합니다. 또한,3D의 인상, 경계선이 밑그림에서 나오는 것처럼 보입니다。 |
| inset | 경계선을 표시하여 요소의 프레임이 캔버스에 부착된 것처럼 보입니다. 그것은3D, 이는 보통 경계선 색상보다 밝은 두 가지 색상을 사용하여 그림자를 만들어줍니다.border-color약간 밝고 어두운 두 가지 색상으로 그림자를 만들어줍니다。 |
| outset | 효과와 반대되는 경계선 inset을 표시합니다. 또한,3D의 인상, 경계선이 밑그림에서 나오는 것처럼 보입니다。 |
| inherit | 지정된 경우, 부모 요소의 border를 사용하는 관련 요소-top-style의 속성 값。 |
border-style 속성의 브라우저 상호 운영성, 아래 표의 숫자는 이 속성을 지원하는 브라우저의 최소 버전 번호를 나타냅니다; 모든 주요 브라우저는 이 속성을 지원합니다。
브라우저 지원–
|
경고: Internet Explorer 7및 이전 버전에서 hidden 값이 지원되지 않습니다. IE8지원하지만,<!DOCTYPE>。IE9및 이후 버전에서 hidden 값을 지원합니다。IE
SEE TUTORIAL:CSS Border，CSS3 Border。
관련 속성:border，border-width，border-color，border-top-style，border-right-style，border-bottom-style，border-left-style。