HTML5 및 CSS3 프로그래밍에 테두리를 추가하는 방법 - 더미

CSS3를 사용하여 HTML5 요소 주위에 테두리를 그릴 수 있습니다. 테두리 크기, 스타일 및 색상에 자유가 있습니다. 테두리 속성을 정의하는 두 가지 방법은 개별 테두리 특성 사용 및 바로 가기 사용입니다. 테두리는 실제로 레이아웃을 변경하지 않지만, 특히 레이아웃이 더 복잡한 경우에는 시각적으로 분리하여 추가 할 수 있습니다.

테두리 속성 사용 방법

여기에 간단한 테두리가 표제 주위에 그려져있는 페이지가 있습니다.

borderProps의 코드입니다. html 페이지는 CSS에서 테두리의 기본 원리를 보여줍니다:

borderProps. html h1 {border-color: red; border-width:. 25em; border-style: double;}

이것은 테두리가 있습니다.

각 요소는 테두리를 정의 할 수 있습니다. 테두리에는 세 가지 특성이 필요합니다.

• 너비 : 테두리의 너비. 이것은 모든 CSS 단위로 측정 할 수 있지만 테두리 폭은 일반적으로 픽셀 또는 em 단위로 표시됩니다. ( 기억: em 는 현재 폰트에서 대략 대문자 "M"의 너비 임) color

• : 국경. 색상은 CSS의 다른 색상과 마찬가지로 색상 이름이나 16 진수 값으로 정의 할 수 있습니다.

  style

• : CSS는 여러 가지 테두리 스타일을 지원합니다. 이 예는 이중 경계를 보여줍니다. 이것은 요소 주위에 두 개의가는 선이있는 테두리를 그립니다. 테두리를 올바르게 표시하려면 세 가지 속성을 모두 정의해야합니다. 모든 브라우저에서 작동하려면 기본값에 의존 할 수 없습니다.

테두리 스타일을 정의하는 방법

CSS에는 선택할 수있는 미리 정의 된 테두리 스타일 목록이 있습니다. 다음은 모든 기본 테두리 스타일이 표시된 페이지입니다.

모든 테두리에 대해 다음 스타일 중 하나를 선택할 수 있습니다.

단색:

• 요소 주위에 단일 실선. Double:

• 두 줄 사이에 간격을 두어 요소 주위. 테두리 너비는 두 선과 틈의 결합 된 너비입니다. 그루브:

• 음영을 사용하여 페이지에서 에칭 된 홈을 시뮬레이션합니다. 릿지:

• 음영을 사용하여 페이지에 그려지는 릿지를 시뮬레이션합니다. 삽입:

• 음영을 사용하여 누른 버튼을 시뮬레이션합니다. 시작:

• 음영을 사용하여 페이지에서 튀어 나와있는 버튼을 시뮬레이션합니다. 대시: 요소 주위에 점선이 표시됩니다.

• 점선: 요소 주위에 점선이 표시됩니다.

• 테두리 바로 가기 사용 방법 각 테두리에 대해 세 가지 CSS 속성을 정의하는 것은 약간 지루합니다. 다행히 CSS에는 테두리를 훨씬 쉽게 정의 할 수있는 편리한 테두리 바로 가기가 있습니다.

출력과의 차이는 알 수 없지만 borderShortcut의 코드는 알 수 없습니다. html은 매우 간단합니다:

borderShortcut. html {border: red 5px solid;}

이 페이지는 테두리 바로 가기를 사용합니다.

테두리 속성을 설명하는 순서는 중요하지 않습니다. 색상, 크기 및 테두리 스타일 만 지정하면됩니다.

부분 테두리 작성 방법

원하는 경우 경계의 각면을보다 정밀하게 제어 할 수 있습니다. 각 하위 테두리에 대한 특수화 된 테두리 바로 가기가 많이 있습니다.

이 페이지는 단락의 위, 아래 및 측면에 다른 테두리뿐만 아니라 표제의 아래쪽에 테두리 스타일을 적용합니다.

하위 보더의 코드 목록에서 볼 수 있듯이 부분 테두리는 매우 쉽게 만들 수 있습니다. html h1 {border-bottom: 5px black double}} {border-left: 3px 검은 점선; border-right: 3px 검은 점선; border-top: 3px 검은 점선; border-bottom: 3px black groove;}

이 머리글에는 아래쪽 테두리가 있습니다.

단락에는 여러 개의 테두리가 정의되어 있습니다.

단락에는 여러 개의 테두리가 정의되어 있습니다.
경계 스타일: border-top, border-bottom, border-left, border-right. 이러한 각 스타일은 테두리 바로 가기처럼 작동하지만 테두리의 한면에만 작용합니다.
각면에 특정 테두리 속성도 있습니다 (예: 아래쪽 테두리 너비는 아래쪽 테두리의 너비를 조정합니다). 그러나 바로 가기 버전이 훨씬 쉽기 때문에 거의 사용되지 않습니다.