집 > 기사 > 웹 프론트엔드 > CSS의 테두리 속성 사용 요약

CSS의 테두리 속성 사용 요약

伊谢尔伦원래의: 2017-06-06 14:00:563967검색

CSS를 처음 접하는 친구들은 border 속성이 단순한 테두리 그리기라고 생각할 수도 있습니다. 실제로 테두리는 개체의 테두리 너비, 색상, 점선, 실선 및 기타 스타일을 제어합니다. 단일 테두리 또는 모든 테두리를 제어할 수 있습니다. 테두리 속성을 사용하면 더 많은 효과를 만들 수 있습니다. CSS에서는 테두리 구문을 사용하여 테두리의 너비, 스타일, 색상 등을 설정하는 등 테두리에 다양한 디자인을 변경할 수 있습니다. 또한 테두리를 숨길 수도 있습니다. 원칙적으로 CSS는 테두리에만 국한되지 않습니다. 디자인 p 블록이나 스팬의 테두리는 웹페이지 제목 테두리, 이미지 테두리(img 테두리) 등 다른 웹페이지 요소의 테두리에도 적용될 수 있습니다. 모든 주요 브라우저는 지원합니다. CSS 테두리 속성. 다음은 border 속성의 사용법을 자세히 설명합니다.

먼저 PHP 중국어 웹사이트

1. "HTML/CSS 빠른 시작"

2에서

css 테두리 스타일

과정을 알아보세요.极 학교의 CSS 및 CSS3 비디오 자습서 CSS 상자 모델 ) border-width: 백분율을 지원하지 않음, 키워드 지원, 얇음(1px), 중간(기본값, 3px, 기본값이 3px인 이유) border-style은 테두리가 3px 이상), 두꺼운(5px)

2) border-style: 다양한 값이 있는 경우에만 유효합니다. 다음은 다양한 값의 적용을 분석합니다. 삼각형과 사다리꼴을 구현할 수 있습니다. CSS의 테두리 속성 사용 요약 b.dashed: 점선, Chrome/Firefox에서 찾아보기 브라우저에서는 점선과 실선의 비율이 3:1(가는 선)이고, IE 브라우저에서는 비율이 2:1입니다. (촘촘함);

c.dotted: 점선, Chrome/Firefox 브라우저에서는 정사각형 도트, IE 브라우저에서는 둥근 도트입니다(둥근 도트를 사용하여 모서리를 둥글게 만들 수 있습니다). 선, 계산 규칙, 이중선의 너비는 항상 동일하고 그 사이의 간격은 +-1입니다. 예를 들어 3px =1(내부) + 1(중간 간격) + 1(외부), 세 가지를 실현할 수 있습니다. -바 패턴;

e.inset(내부 오목), outset(외부 볼록), ridge(홈): 오래된 스타일, 호환 가능 성능 저하, 사용 시나리오 없음

2. CSS 스타일

border-width 속성은 테두리의 너비를 설정합니다.

가능한 값: 픽셀

border-style 속성은 테두리의 스타일을 설정합니다.

가능한 값: 실선(직선), 점선(점선), 점선 (점선)

border-color 속성은 테두리 색상을 설정합니다. 가능한 값: red, #f00, #ff0000, rgb(255,0,0), transparent

border-left 속성은 왼쪽 테두리를 설정합니다.

border-right 속성 올바른 테두리 설정

border-top 속성은 위쪽 테두리 설정

border-bottom 속성은 아래쪽 테두리 설정

3 모르는 테두리 사용법

아이디어: 아래쪽 가장자리가 평행할 때 가로선의 너비와 높이를 직접 제어합니다. 가로선과 일치하지 않는 경우 원하는 삼각형 효과를 얻으려면 CSS3에서 종횡비를 사용하고 변환 속성을 결합해야 합니다. 효과(여기서는 아이디어에 대한 소개일 뿐 특정 구현이 아닙니다. 관련된 수학적 지식이 있는 경우 Baidu에서 직접 수행할 수 있습니다).

4. CSS의 테두리 속성을 사용하여 변형된 테두리를 만드는 방법 요약

border는 이름에서 알 수 있듯이 테두리를 의미하며 테두리 구문을 사용하여 다양한 디자인 변경을 적용할 수 있습니다. 테두리 디자인 등 테두리의 너비, 스타일, 색상 등을 설정하거나 테두리를 숨길 수 있습니다. 원칙적으로 CSS 테두리 디자인은 p 블록이나 스팬의 테두리에만 국한되지 않고 가능합니다. 웹 페이지 제목, 이미지 테두리(img 테두리) 등과 같은 다른 웹 페이지 요소의 테두리에 적용됩니다. 모든 주요 브라우저는 CSS 테두리 속성을 지원합니다.

5. 테두리 삼각형 그림자 및 다중 테두리 배치 및 해석

테두리는 상하좌우로 경계선-상단 | 경계선-하단 | right;

그래서 속성을 개별적으로 설정할 수도 있습니다. 설정, border-top-width | border-top-style |

단일 속성을 조합하여 작성할 수도 있습니다:

border-width: top , 오른쪽, 아래쪽, 왼쪽(시계 방향)

border-width: 위쪽, 왼쪽, 오른쪽 및 아래쪽

border-width: 위쪽, 아래쪽, 왼쪽 및 오른쪽;

border-style | border-color는 다음과 같이 설정할 수도 있습니다.

CSS: 테두리 속성

지식을 넓히세요. 많은 디자이너가 지금까지 이 장에 나열된 지식을 사용해 왔습니다. 더 확장할 수 있는 방법!

다중 모서리 요소에 다중 모서리를 적용할 때 참조할 수 있는 다양한 기술이 있습니다.

테두리 스타일 실선, 점선 및 점선은 가장 일반적으로 사용되는 테두리 스타일 속성 값이며 홈 및 능선을 포함하여 사용할 수 있는 다른 값이 여러 가지 있습니다.