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), 테두리 색상:

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

:1px

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

: 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>

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

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

html의 하이퍼링크 태그

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