English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
요소의 (Border) 경계선은 채우기와 내용을 둘러싸고 있습니다.
CSS 경계선 속성은 다양한 경계선 스타일을 정의할 수 있습니다. 예를 들어, 실선, 복선, 점선 등.도可以是图像。다음 장에서는 다양한 속성을 설정하여 경계선 스타일을 정의하는 방법을 소개합니다.-style），색상（border-color）와 두께（border-width）。
border-width속성은 경계선 영역의 너비를 지정합니다. 이는 요소 경계선의 모든 네 면의 두께를 동시에 설정하는 단축 속성입니다.
p {
border-width: 중간 10px 두께 15px;
}테스트 봐‹/›주의:border-width 속성 값이 부족하거나 지정되지 않았을 때, border-width는 기본 값(중간)을 사용합니다.
이border-style속성은 경계선 스타일을 설정하는 속성입니다. 예를 들어: solid, dotted 등. 이는 요소 경계선의 모든 네 면의 라인 스타일을 설정하는 단축 속성입니다.
이 border-style 속성은 다음 중 하나의 값을 취할 수 있습니다: none, hidden, dashed, dotted, double, groove, inset, outset, ridge 및 solid。
none: 경계선 없음。
dotted: 점선 경계선 정의
dashed: 점선 경계선 정의
solid: 실선 경계선 정의
double: 두 개의 테두리를 정의합니다. 두 개의 테두리의 너비는 border-width 값이 같습니다
groove: 정의3D 절파 테두리. 효과는 테두리 색상 값에 따릅니다
ridge: 정의3D 언덕 테두리. 효과는 테두리 색상 값에 따릅니다
inset: 정의3D 삽입 테두리. 효과는 테두리 색상 값에 따릅니다
outset: 정의3D 시작 테두리. 효과는 테두리 색상 값에 따릅니다
p {
border-style: dotted;
}테스트 봐‹/›이border-color속성이 지정됩니다color계단의 테두리. 이는 요소의 모든 네 면의 테두리를 설정하는 단축 속성입니다.
p {
border-style: solid;
border-color: #ff0000;
}테스트 봐‹/›주의:border-color을 단독으로 사용하면 이 속성은 작동하지 않습니다. border를 사용하여-style 속성은 테두리를 먼저 설정합니다.
이border CSS 속성은 하나나 여러 개의 별도의 테두리 속성을 설정하는 스플래시 속성 border입니다-style, border-width와 border-color을 단일 규칙에서 사용.
p {
border: 5px solid #ff4500;
}테스트 봐‹/›border 셀렉터 속성을 설정할 때 단일 border 속성의 값을 무시하거나 지정하지 않으면(그렇다면) 기본 값이 사용됩니다(있는 경우).
주의:border-color요소의 테두리를 설정할 때, 속성 값이 누락되거나 속성 값이 지정되지 않았을 경우(예를 들어 border: 5px solid;를 사용하면 해당 요소의color속성은 border-color.
이 예제에서 테두리는 너비가5px의 검은색 실선:
p {
color: black;
border: 5px solid;
}테스트 봐‹/›하지만, border가 있는 경우-style 속성의 경우, 값을 생략하면 어떤 테두리도 표시되지 않습니다. 이는 이때 border-style 속성의 기본 값은 none입니다.
아래 예제에서는 테두리가 없을 것입니다:
p {
border: 5px #00ff00;
}테스트 봐‹/›