CSS 점선 테두리. 프레임과 경계. 개별 당사자의 경계

Speech-bubble ( /* 기타 스타일 */ display: table; ) .speech-bubble p ( display: table-cell; 수직 정렬: middle; )

우리는 삼각형에만 국한되지 않습니다. CSS는 렌더링이 가능합니다 다른 모양-심지어 하트와 생물학적 위험 표시.

생물학적 위험(너비: 0; 높이: 0; 테두리: 60px 단색; 테두리 반경: 50%; 테두리 상단 색상: 검정; 테두리 하단 색상: 검정; 테두리 왼쪽 색상: 노란색; 테두리 오른쪽- 색상: 노란색)

결론

블라드 메르제비치

와 함께 CSS를 사용하여여러 가지 방법으로 요소에 테두리를 추가할 수 있습니다. 물론 기본적으로 테두리 속성은 가장 보편적인 속성으로 사용되며 윤곽선 및 놀랍게도 box-shadow 주요 작업은 그림자를 만드는 것입니다. 다음으로 이러한 방법과 그 차이점을 고려해 보겠습니다.

개요 속성

프레임 생성을 위한 가장 간단한 속성입니다. border 와 동일한 매개변수를 갖지만 일부 세부 사항에서는 크게 다릅니다.

• 윤곽선은 요소 주위에 표시됩니다(테두리 내부).
• 윤곽선은 요소의 크기에 영향을 주지 않습니다(테두리는 요소의 너비와 높이에 추가됩니다).
• 윤곽선은 전체 요소 주위에만 설정할 수 있으며 요소 위에는 설정할 수 없습니다. 개별 당사자아(테두리는 어느 쪽으로든 사용할 수 있고 한 번에 모두 사용할 수 있습니다);
• 윤곽선은 반올림 반경의 영향을 받지 않습니다. 속성으로 지정됨 border-radius(테두리에 영향을 줌).

문제가 발생합니다. 나열된 차이점에도 불구하고 그 역할이 국경을 통해 완전히 인수되는 경우 개요가 필요한 경우는 무엇입니까? 상황은 많지 않지만 발생합니다.

• 복잡한 다색 프레임 생성;
• 요소 위로 마우스를 가져갈 때 요소에 프레임을 추가합니다.
• 포커스를 받을 때 브라우저가 일부 요소에 자동으로 추가하는 테두리를 숨깁니다.
• 윤곽선의 경우 윤곽선 오프셋 속성을 사용하여 요소 가장자리에서 프레임까지의 거리를 설정하여 을 만들 수 있습니다.

다양한 색상의 프레임

예제 1에서 볼 수 있듯이 외곽선은 테두리를 대체하지 않으며 쉽게 함께 존재할 수 있다는 점을 이해해야 합니다.

예 1: 프레임 생성

이 예에서는 요소 주위에 검은색 프레임이 추가되고 흰색 테두리로 배경과 구분됩니다(그림 1).

쌀. 1. 요소 주위의 프레임

사용 시 프레임: 호버

테두리를 통해 프레임을 추가하면 요소의 너비가 증가하는데, 이는 테두리와 :hover 가상 클래스를 결합할 때 상당히 눈에 띕니다. 이것을 "승리"하는 방법에는 두 가지가 있습니다. 가장 간단한 방법은 border 를 border 로 바꾸는 것입니다. 아시다시피 이는 요소의 크기에 영향을 주지 않습니다(예제 2).

예 2: 마우스오버 시 프레임

모서리를 둥글게 해도 영향을 주지 않기 때문에 외곽선이 항상 적합한 것은 아닙니다. 여기에는 두 번째 방법이 적합합니다. 보이지 않는 프레임이나 배경색과 일치하는 프레임을 추가한 다음 마우스를 가져갈 때 해당 매개변수를 변경합니다(예 3). 그러면 프레임이 처음에 이미 존재하므로 요소의 변위가 발생하지 않습니다. 그러나 우리는 요소의 너비가 너비, 왼쪽 테두리 및 오른쪽 테두리 값의 합이라는 것을 항상 기억합니다. 상황은 키와 비슷합니다.

예 3: 마우스오버 시 프레임

양식 필드 주위의 테두리

일부 브라우저(Chrome, Safari, 최신 버전 Opera) 포커스를 받으면 양식 필드 주위에 작은 아이콘이 표시됩니다. 컬러 프레임(그림 2). 이를 제거하려면 예제 4와 같이 스타일의 개요 속성에 none 값을 추가하기만 하면 됩니다.

쌀. 2. 여백을 중심으로 프레임을 만듭니다.

실시예 4. 프레임 제거

상자 그림자를 통한 프레임

box-shadow 속성은 요소 주위에 그림자를 추가하기 위한 것이지만 border 또는outline 을 사용하여 만들 수 없는 테두리를 만드는 데에도 사용할 수 있습니다. 이는 그림자의 수가 무제한일 수 있고 매개변수가 쉼표로 구분되어 나열된다는 사실 덕분입니다.

프레임을 얻으려면 처음 세 매개변수를 0으로 설정해야 합니다. 이 매개변수는 그림자의 위치와 흐림을 담당합니다. 네 번째 매개변수는 이 경우테두리의 두께를 담당하고 다섯 번째는 테두리의 색상을 설정합니다. 두 번째 프레임의 경우 네 번째 매개변수는 두 프레임 두께의 합과 같습니다.

예제 4에서는 단일 box-shadow 속성을 사용하여 두 개의 프레임과 하나의 테두리를 오른쪽에 추가하는 방법을 보여줍니다.

예 4: 상자 그림자 사용

결과 이 예그림에 표시됩니다. 삼.

쌀. 3. box-shadow 속성으로 생성된 프레임

이전에 몇 가지 강의에서 웹 페이지 블록의 도식적 표현을 살펴봤고 요소의 테두리를 설정하는 데 사용할 수 있는 CSS 속성 border 에 대해서도 간략하게 설명했습니다. 이번에는 예시를 통해 이 속성을 좀 더 자세히 살펴보겠습니다.

테두리는 여백과 패딩 사이에 위치합니다. 즉 마진은 뒤에국경. 테두리는 네 면 모두(프레임에 블록을 둘러싸는 것처럼) 또는 한 면, 두 면 또는 세 면에 설정할 수 있습니다. CSS를 사용하면 테두리의 두께, 색상 및 스타일을 제어할 수 있습니다. 이것을 더 자세히 연구해 봅시다.

Border-width: 테두리 너비

border-width 속성은 테두리의 너비를 설정합니다. 대부분 이 크기는 픽셀로 표시됩니다. 네 개의 테두리 모두에 대해 동일하거나 다른 너비를 설정할 수 있습니다. 예를 들면 다음과 같습니다.

/* 테두리 4개 모두 너비가 2px입니다. */ border-width: 2px; /* 위쪽 및 아래쪽 테두리의 너비는 2px이고 왼쪽 및 오른쪽의 너비는 4px입니다. */ border-width: 2px 4px; /* 위쪽 테두리 - 2px, 왼쪽 및 오른쪽 - 6px, 아래쪽 - 3px: */ border-width: 2px 6px 3px; /* 위쪽 테두리 - 2px, 오른쪽 - 3px, 아래쪽 - 4px, 왼쪽 - 5px: */ border-width: 2px 3px 4px 5px;

또한 테두리 너비를 나타내는 키워드가 있습니다.

• 얇은 - 테두리 너비 2px;
• 중간 - 테두리 너비 4px;
• 두꺼운 - 테두리 너비가 6px입니다.

테두리 색상: 테두리 색상

border-color 속성은 테두리 색상을 지정합니다. 색상은 모든 CSS 형식으로 지정할 수 있습니다. 키워드, 16진수 또는 RGB - 무엇이 더 편리한지에 따라 다릅니다. 이전 속성과 유사하게 모든 테두리에 대해 하나의 색상을 설정하거나 각 테두리에 대해 서로 다른 색상을 선택할 수 있습니다.

테두리 색상: #FFFF00;

설정할 수도 있습니다. 투명한 색상, 글쓰기:

테두리 색상: 투명;

테두리 스타일: 테두리 스타일

테두리 스타일 속성 덕분에 일반 테두리를 점선, 이중 또는 3차원 테두리로 바꿀 수 있습니다. 다른 의미. 이렇게 하려면 다음 키워드를 사용하세요.

• 실선 - 실선 테두리;
• 점선 - 점의 경계;
• 점선 - 점선 테두리;
• 이중 - 이중 테두리;
• 그루브 - 체적 노치 경계;
• 능선 - 두꺼운 가장자리가 있는 방대한 테두리(본질적으로 이전 스타일의 반전)입니다.
• 시작 - 돌출된 테두리;
• inset - 들여쓰기된 테두리(본질적으로 이전 스타일의 반전)입니다.

border-width 및 border-color 속성과 마찬가지로 각 블록 테두리의 스타일을 다르게 지정할 수 있습니다. 하한점선, 오른쪽과 왼쪽 - 이중. 여기서 모든 것은 상상력에만 달려 있습니다.

테두리 스타일: 이중 점선;

메모: V 다른 브라우저 모습경계가 조금씩 다를 수 있습니다.

일반적인 CSS 속성 테두리: 3 in 1

테두리 스타일을 지정하기 위해 위의 세 가지 속성을 모두 차례로 사용할 필요는 없습니다. 일반적인 범용 속성 테두리 CSS에 대해 아는 것만으로도 충분하며, 이를 통해 스타일을 훨씬 빠르게 작성하고 공간을 절약할 수 있습니다. 이렇게 하려면 세 가지 속성 모두의 값을 무작위 순서로 기록하세요.

테두리: 2px 점선 #FF0000;

개별 당사자의 경계

CSS의 추가 테두리 속성을 사용하면 각 블록 테두리의 스타일을 개별적으로 지정할 수 있습니다. 다음 속성이 이에 도움이 될 것입니다:

• border-top - 위쪽 테두리 스타일.
• border-right - 오른쪽 테두리용.
• border-bottom - 아래쪽 테두리용.
• border-left - 왼쪽 테두리용입니다.

결과

이제 블록 테두리를 만드는 방법을 알았으므로 만드는 연습을 할 수 있습니다. 너무 많은 줄을 넣지 않고도 스타일을 간결하게 설명할 수 있는 방법은 많습니다. CSS 파일. 여기서 중요한 역할은 계단식 스타일 시트의 원리에 대한 지식입니다. 예를 살펴보겠습니다.

다음을 위한 프레임을 만들고 싶다고 가정해 보겠습니다. div 블록 3개의 단색 회색 테두리와 아래쪽 테두리에 녹색 점선이 있습니다. 이 스타일을 다음과 같이 작성할 수 있습니다.

Div ( 테두리 오른쪽: 8px 이중 #FF0000; 테두리 왼쪽: 8px 이중 #FF0000; 테두리 하단: 8px 이중 #FF0000; 테두리 상단: 4px 점선 #FDD201; )

그런데 포스팅이 너무 깁니다. 이 모든 내용은 간략하게 작성할 수 있습니다.

Div ( 테두리: 8px 이중 #FF0000; 테두리 상단: 4px 점선 #FDD201; )

위에서 언급했듯이 여기서는 CSS의 계단식 속성을 활용하겠습니다. 먼저 프레임의 네 면 모두에 대한 스타일을 작성한 다음 아래쪽 테두리에 대해 별도로 스타일을 지정하여 이전 스타일을 부분적으로 덮어씁니다. 이 일련의 행을 따르는 것이 매우 중요합니다.

미니 작업

200x200픽셀 크기의 div에 대한 테두리를 만들어 보십시오. 프레임 스타일은 다음과 같아야 합니다.

• 상단 및 하단 테두리를 단색으로 만듭니다. 단단한, 동일한 색상을 선택하고 너비를 5픽셀로 지정합니다.
• 왼쪽 테두리 만들기 파선, 너비 3픽셀, 이전 색상과 다른 색상을 선택하세요.
• 오른쪽 테두리를 이중으로 만듭니다. 더블, 너비 7픽셀, 이전 두 픽셀과 색상이 다릅니다.

최종적으로 귀하의 작업은 다음과 같아야 합니다(선택한 색상 제외).

작업 결과(Chrome에서 보기)

이전 기사에서 우리는 논의했습니다. CSS 적용페이지 요소의 border() 속성입니다. 그리고 그림을 사용하여 테두리를 그리는 방법을 알려 주기로 약속했습니다. 이것이 오늘 우리가 이야기할 내용입니다.

이미지를 사용하여 테두리를 만들기 위해 CSS 속성 border-image를 사용합니다.

테두리의 두께는 속성에 의해 설정되며, border:0을 지정하면 테두리가 표시되지 않습니다. 다른 테두리 값을 사용하면 이미지가 항상 우선합니다. 배경 속성을 통해 지정된 배경은 프레임 아래에 표시됩니다.

코드 구문

재산 기록의 예를 살펴보겠습니다.

url (images/bg-image.png) — 배경 이미지의 주소입니다.

30 - 이미지 부분의 크기를 픽셀 단위로 나타내는 1개, 2개, 3개 또는 4개의 값이 있을 수 있으며 이를 통해 사진 분할 영역을 정의합니다. 단위 자체는 기록되지 않고 숫자만 기록됩니다(10px가 아닌 10). 그림에서 빨간색 선은 프레임을 생성하는 데 필요한 영역을 강조 표시합니다.

공백으로 구분된 1개, 2개, 3개 또는 4개의 값을 사용할 수 있습니다. 효과는 값의 수에 따라 다르며 표에 나와 있습니다.

round round — 두 개의 매개변수(각각 가로 및 세로 테두리용) 세 가지 값 중 하나를 사용할 수 있습니다. 결과는 사진에서 볼 수 있습니다.

뻗기— 요소 크기에 맞게 테두리 그리기를 늘립니다. 이것이 기본값입니다.
반복하다— 테두리 패턴을 반복합니다.
둥근— 요소 측면에 정수 개의 이미지가 있도록 그리기를 반복하고 크기를 조정합니다.

브라우저 호환성

불행하게도 모든 브라우저 버전이 border-image 속성을 지원하는 것은 아닙니다. 더 나은 호환성을 위해 모든 브라우저에 대해 속성을 등록하는 것이 좋습니다.

샘플 코드:

오토메이션

웹에는 코드 작성에 도움이 되는 도구가 있습니다. border-image 속성을 위한 매우 편리한 생성자가 있습니다. 거기에 테두리 이미지를 업로드하기만 하면 됩니다(그런데 인터넷에서 많은 이미지를 찾을 수 있습니다). 슬라이더를 사용하여 그림을 영역으로 나누고 테두리 두께와 반복 매개변수를 설정합니다.

게다가 즉시, 온라인 모드결과를 확인하세요(결국 무슨 일이 일어나는지).

원하는 결과를 얻었을 때, 생성된 코드를 복사하여 페이지 코드(css 파일)에 붙여넣기만 하면 됩니다.

매우 간단하고 편리합니다.

결론

이것으로 CSS의 테두리 속성에 대한 논의를 마칩니다. 나는 당신에게 작별 인사를하지 않습니다. 가까운 장래에 우리는 레이아웃 교육을 계속할 것입니다. 업데이트를 구독하고...그리고...만나세요!