CSS 테두리를 사용하는 방법

CSS 테두리의 테두리 속성을 사용하는 방법, 테두리의 속성은 무엇인지, 개체 테두리의 너비, 색상, 점선, 실선 및 기타 스타일을 제어하는 ​​방법에 대해 자세히 소개하겠습니다. 기사

CSS 테두리는 CSS 테두리 - 테두리 스타일 색상, 테두리 스타일, 테두리 너비 구문 구조 및 응용 사례 튜토리얼

CSS 테두리 기본

CSS 테두리는 CSS 테두리는 컨트롤 개체의 테두리 가장자리 너비, 색상, 점선, 실선 및 기타 스타일 CSS 속성

Html tableControl border:

border="1" bordercolor="#000000"

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

4개의 테두리

border-left는 왼쪽 테두리를 별도로 설정합니다.

border-right는 오른쪽 테두리를 별도로 설정합니다. 일반적으로 위쪽 테두리 스타일은

border-

bottom

을 사용하여 아래쪽 테두리 스타일을 설정하는 경우가 있습니다. CSS 밑줄 효과. 4면에 동일한 테두리가 있는 테두리의 약어

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

div5 개체 상자 1px 픽셀 파란색 실선 테두리 설정

세 가지 스타일의 테두리

보통 너비를 설정할 수 있습니다. (테두리의 두께), 테두리 스타일 및 테두리 색상입니다.

테두리 색상:

border-color

:#000테두리 두께(너비):

border-width

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

테두리 테두리 스타일:

border-style

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

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.1px 검은색 실선 아래쪽 테두리

border-bottom:1px solid #000

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

border-left:1px dashed #000

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

border-right:1px solid #000

일반적인 권장 사항 테두리 스타일

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

실선 테두리: 실선

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

점선 테두리: dashed

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

CSS 테두리 사용

개체 테두리 스타일을 설정하고 위쪽 테두리, 아래쪽 테두리, 왼쪽 테두리, 오른쪽 테두리 스타일을 별도로 설정하여 미려함을 구현합니다. 테두리는 분할 및 레이아웃 계획에 중요한 역할을 합니다.

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

css 테두리 적용 사례 코드

설명: 사례 효과를 관찰하기 위해 CSS 너비 200px, CSS 높이 1px, 빨간색 실선 테두리로 DIV 상자를 설정합니다

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

HTML 코드 해당 스니펫:

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

css 테두리 요약

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

expression

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

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

CSS 코드:

border:1px solid #000; border-top:none;

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

CSS 테두리를 사용하는 방법은 매우 다양합니다. 필요한 친구는 저장할 수 있습니다. 이 사이트의 다른 업데이트에도 계속 관심을 가져주세요.

관련 읽기:

CSS에서 텍스트를 굵게 표시하는 방법

CSS의 여백 속성을 설정하는 방법

DIV+CSS를 사용하는 방법

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