CSS 테두리 측면
CSS 테두리 - 개별면
이전 페이지의 예에서 각 면에 대해 다른 테두리를 지정할 수 있음을 확인했습니다.
CSS에는 각 테두리(위, 오른쪽, 아래, 왼쪽)를 지정하는 속성도 있습니다.
예시
p
{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
결과:
Different Border Styles
위의 예는 다음과 같은 결과를 제공합니다.
예시
p {
border-style: dotted solid;
}
작동 방식은 다음과 같습니다.
border-style
속성에 4개의 값이 있는 경우 :
- 테두리 스타일: 점선 실선 이중 대시;
- 상단 테두리가 점선
- 오른쪽 테두리는 실선입니다.
- 하단 테두리는 이중
- 왼쪽 테두리가 점선
border-style
속성에 세 가지 값이 있는 경우 :
- 테두리 스타일: 점선 솔리드 이중;
- 상단 테두리가 점선
- 오른쪽과 왼쪽 테두리가 솔리드
- 하단 테두리는 이중
border-style
속성에 두 개의 값이 있는 경우 :
- 테두리 스타일: 점선 실선;
- 상단 및 하단 테두리가 점으로 표시됩니다.
- 오른쪽과 왼쪽 테두리가 솔리드
border-style
속성에 하나 의 값이 있는 경우 :
- 테두리 스타일: 점선;
- 네 개의 테두리가 모두 점으로 표시됩니다.
예시
/* Four values */
p {
border-style: dotted solid double dashed;
}
/* Three
values */
p {
border-style: dotted solid double;
}
/* Two values */
p {
border-style: dotted solid;
}
/* One value */
p {
border-style: dotted;
}
border-style
속성은 위의 예에서 사용되었습니다 . border-width
그러나 및 에서도 작동합니다
border-color
.