CSS 웹 페이지 테두리 코드

CSS 웹 페이지 테두리는 주로 테두리를 사용하여 만들어지므로 오늘은 CSS 테두리에 대한 지식을 익히겠습니다. 모두에게 도움이 되기를 바랍니다

CSS 테두리는 개체 테두리의 너비, 색상, 점선, 실선 및 기타 스타일 CSS 속성을 제어하는 ​​CSS 테두리입니다. 동시에 CSS 매뉴얼에 들어가 테두리 매뉴얼을 볼 수 있습니다.

DIV+CSS 테두리 테두리 지식 튜토리얼

Html 원본 테두리와 DIV+CSS 테두리 비교

Html table컨트롤 테두리:

border=" 1" bordercolor="# 000000"

설명: 표 테두리 너비를 1px로, CSS 색상을 검정색으로 제어하고 기본값은 단색 스타일 테두리입니다.

border 테두리 구문

네 개의 테두리

border-left는 왼쪽 테두리 스타일을 별도로 설정합니다. 일반적으로 오른쪽 테두리 스타일을 별도로 설정하려면

border-right를 사용합니다. ,

border-top을 사용하여 위쪽 테두리를 설정합니다. 일반적으로

border-bottom을 사용하여 아래쪽 테두리 스타일을 별도로 설정합니다. 일반적으로

border-bottom을 사용하여 아래쪽 테두리 스타일을 별도로 설정할 수 있습니다. CSS 밑줄 효과로 적용됩니다.

네 면 모두에 동일한 테두리가 있는 테두리의 약어

#div{border:1px solid #00F}

div 개체 상자에 1px 픽셀 파란색 실선 테두리를 설정합니다

3 세 가지 테두리 스타일

보통 우리는 할 수 있습니다. 테두리 너비(두께), 테두리 스타일, 테두리 색상을 설정하는 세 가지 속성과 매개변수입니다. 1), 테두리 색상:

border-color

:#0002), 테두리 두께(너비):

border-width

:1px

숫자 + 단위를 사용하여 테두리 두께 너비를 설정합니다(예: 1px). (테두리 두께 너비는 1픽셀), 테두리는 0보다 큰 양수여야 합니다. 그렇지 않으면 테두리 스타일 설정이 유효하지 않습니다. 3), 테두리 테두리 스타일:

border-style

: solid

테두리 스타일 값은 다음과 같습니다.

none: 테두리가 없습니다. 지정된 테두리 너비 값과 무관

hidden: 테두리를 숨깁니다. IE는

점선을 지원하지 않습니다. MAC 플랫폼의 IE4+와 WINDOWS 및 UNIX 플랫폼의 IE5.5+는 점선입니다. 그렇지 않으면 실선입니다(일반적으로 사용됨).

점선: MAC 플랫폼의 IE4+와 WINDOWS 및 UNIX 플랫폼의 IE5.5+는 점선입니다. 그렇지 않으면 실선(흔히 사용됨)

solid: 실선 테두리(흔히 사용됨)

double: 이중 테두리. 두 개의 단일 선과 그 간격의 합은 지정된 border-width 값과 같습니다.

groove: border-color 값을 기준으로 3D 홈을 그립니다.

ridge: border-color 값을 기준으로 다이아몬드 테두리를 그립니다.

inset: border-color 값을 기준으로 마름모 테두리 그리기 값 3D 오목 가장자리 그리기

outset: border-color 값에 따라 3D 볼록 가장자리 그리기

CSS는 왼쪽 테두리, 오른쪽 테두리, 위쪽 테두리를 설정합니다. , 하단 테두리를 개별적으로

CSS 스타일 설정 방법으로 상하좌우 테두리를 개별적으로 작성합니다

1.1px 검정색 점선 상단 테두리

border-top:1px dashed #000

2. 검정색 실선 하단 테두리

border-bottom:1px 실선 #000

3. 1px 검정색 점선 왼쪽 테두리

border-left:1px 점선 #000

4, 1px 검정색 실선 오른쪽 테두리

border-right: 1px solid #000

일반적으로 권장되는 테두리 스타일

우리는 일반적으로 주류 브라우저 호환 테두리 스타일을 사용합니다: ：

Solid Border: solid

Border:1px solid #000 개체의 1px(픽셀) 두께의 검은색 실선 테두리를 설정합니다.

점선 테두리: dashed

Border:1px dashed #000 개체의 1px(픽셀) 두꺼운 검은 점선 테두리를 설정합니다.

CSS 테두리 테두리 사용

개체 테두리 스타일을 설정하고 별도의 위쪽 테두리, 아래쪽 테두리, 왼쪽 테두리 및 오른쪽 테두리 스타일을 설정하여 미화와 아름다움을 구현합니다. 경계는 분할 및 레이아웃 계획의 역할을 합니다.

테두리 테두리 스타일 최적화 약식 그래픽 튜토리얼

css 테두리 적용 케이스 코드

설명: 케이스 효과를 관찰하기 위해 CSS 너비 200px, CSS 높이 1px, 빨간색 솔리드로 DIV 상자를 설정했습니다. border

CSS 코드:

#divcss5{height:100px;width:200px;border:1px solid #F00}

HTML 코드 해당 조각:

<div id="divcss5">我的高度为100px,宽度为200px</div>

우리는 DIV CSS를 사용하여 테두리 스타일을 설정합니다. 일반적으로 약어 expression

을 사용하여 개체 테두리 스타일을 설정합니다. 이는 코드를 절약하고 코드를 단순화합니다. 기능. 단일 테두리를 설정하든 4면 테두리를 설정하든 우리는 CSS 테두리 최적화의 약어인 CSS 테두리 코드를 축약하려고 합니다. 객체에 CSS 스타일을 설정하는 데 일반적으로 사용되는 속성 코드는 border:1px solid #000;입니다.

예를 들어 좌우 하단에 테두리가 있고 스타일은 검정색 1PX폭 실선 테두리인데 상단에는 테두리가 없습니다.

CSS 코드: border:1px solid #000; border-top:none;

border:1px solid #000; 과 border-top:none;의 순서는 바뀔 수 없습니다. CSS 읽기에는 위에서 아래로, 왼쪽에서 오른쪽으로 읽는 원칙이 있으므로 전체 테두리 스타일을 먼저 설정한 다음 위쪽 테두리를 "없음"으로 선언하는, 즉 여기서 요구하는 스타일을 구현하는 것은 의미가 없습니다. 사례. 이렇게 하면 하단, 왼쪽, 오른쪽을 별도로 설정할 필요가 없어져 일정량의 코드가 절약됩니다.

🎜관련 읽기: 🎜

css에서 한 줄 텍스트의 양쪽 끝을 정렬하는 예

CSS에서 오버플로에 대한 자세한 예

html의 하이퍼링크 태그

위 내용은 CSS 웹 페이지 테두리 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!