점선 프레임을 얻으려면 속성을 사용해야 합니다. CSS를 사용한 이중 테두리. CSS 테두리 너비 구문

블라드 메르제비치

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

개요 속성

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

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

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

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

다양한 색상의 프레임

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

예 1: 프레임 생성

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

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

사용 시 프레임: 호버

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

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

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

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

양식 필드 주위의 테두리

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

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

실시예 4. 프레임 제거

상자 그림자를 통한 프레임

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

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

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

예 4: 상자 그림자 사용

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

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

재산 CSS 테두리개체의 테두리, 즉 프레임의 두께, 색상 및 스타일을 만드는 데 사용됩니다. 이 속성은 HTML에서 널리 사용됩니다. 페이지의 콘텐츠를 더 잘 인식하기 위해 다양한 효과를 만들 수 있습니다. 예를 들어 사이드바, 웹사이트 헤더, 메뉴 등을 디자인합니다.

1. CSS 테두리 구문

국경 : 테두리 너비 테두리 스타일 테두리 색상 | 상속하다;

• border-width - 테두리 두께. 픽셀(px) 단위로 설정하거나 얇음, 중간, 두꺼움의 표준 값을 사용할 수 있습니다(픽셀 단위의 너비만 다릅니다).
• border-style - 표시된 테두리의 스타일입니다. 가져가도 돼 다음 값
  • 없음 또는 숨김 - 테두리를 취소합니다.
  • 점선 - 점선 프레임
  • 점선 - 대시로 만든 프레임
  • 실선 - 단순한 선(가장 자주 사용됨)
  • 더블 - 더블 프레임
  • 홈 - 홈이 있는 3D 테두리
  • 능선, 삽입, 시작 - 다양한 3D 프레임 효과
  • 상속 - 값이 적용됩니다 상위 요소
• border-color - 테두리 색상입니다. 다음을 사용하여 설정할 수 있습니다. 구체적인 이름색상 또는 RGB 형식(사이트의 HTML 색상 이름 참조)

메모

CSS 테두리 속성의 값은 순서에 관계없이 설정할 수 있습니다. 가장 일반적으로 사용되는 순서는 "두께 스타일 색상"입니다.

2. CSS 테두리가 다른 예

2.1. 예. 다양한 테두리 디자인 스타일

border-style: dashed

border-style: dashed

border-style: solid

border-style: double

border-style: groove

border-style: ridge

border-style: inset

border-style: outset

Четыре разных рамки

border-style: dotted

border-style: dashed

border-style: solid

border-style: double

border-style: groove

border-style: ridge

border-style: inset

border-style: outset

Четыре разных рамки

2.2. Пример. Изменения цвета рамки при наведении курсора мыши

Этот пример очень простой, но интересный. Он показывает, как можно использовать псевдокласс :hover и рамку CSS border для создания простых эффектов (например, для меню).

При наведении курсора мыши на блок цвет рамки изменится

Вот как это выглядит на странице:

2.3. Пример. Как сделать прозрачную рамку border

Рамку можно сделать прозрачной. Этот эффект редко, но иногда может быть очень полезен для веб-дизайнеров. Для задания прозрачности надо воспользоваться заданием цвета в виде RGBA (R, G, B, P) , где последним параметром задается прозрачность (вещественное число от 0.0 до 1.0)

Вот как это выглядит на странице:

3. Толщина границы: свойство border-width

Задает толщину линии. Ранее мы задавали ее в едином описании border.

Синтаксис CSS border-width

border-width : thin | medium | thick | значение ;

• thin - тонкая толщина линии
• medium - средняя толщина линии
• thick - толстая толщина линии

Ниже приведены несколько примеров. Самым необычным будет - это разная толщина границы у каждой стороны.

border-width: thin

border-width: medium

border-width: thick

Разная толщина у границ

Вот как это выглядит на странице:

border-width: thin

border-width: medium

border-width: thick

Разная толщина у границ

4. Как сделать рамку border только с одного края (границы)

У свойства CSS border есть производные свойства для задания односторонних границ у элемента:

• border-top - для задания рамки сверху (верхняя граница)
• border-bottom - для задания рамки снизу (нижняя граница)
• border-right - для задания рамки справа (правая граница)
• border-left - для задания рамки слева (левая граница)

Эти границы можно совмещать, т.е. прописать для каждого направления свою рамку. Синтаксис точно такой же как и у border.

Также есть свойства

• border-top-color - задание цвета верхний границы
• border-top-style - задание стиля верхней границы
• border-top-width - задание толщины верхней границы
• и т.д. для каждого направления

На мой взгляд проще писать все в строчку, чем плодить лишний текст в стилях. Например, следующие свойства будут одинаковыми

/* Описание двух одинаковых стилей: */

4.1. Пример. Красивая рамка для выделения цитат

Пример рамки для цитаты

Вот как это выглядит на странице:

Пример рамки для цитаты

Примечание
Можно задать отдельную границу для каждой из сторон.

5. Как сделать несколько границ border у элемента html

Иногда требуется сделать несколько границ. Приведем пример

5.1. Первый вариант с несколькими границами

Вот как это выглядит на странице:

Есть второй способ через наложение теней.

5.2. Наложение теней для создания нескольких границ

Вот как это выглядит на странице:

6. Скругление углов у границ (border-radius)

Для создания красивых рамок используют свойство CSS border-radius (доступно только в CSS3). С помощью него можно делать скругления углов, что создает совсем другой вид. Например

7. Вдавленная линия CSS

Вдавленные линии эффектно могут смотреться на темном фоне, что подходит далеко не каждому сайту.

---

Вот как это выглядит на странице:

Для обращения к border из JavaScript нужно писать следующую конструкцию:

document.getElementById("elementID").style.border ="VALUE "

Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье вы узнали, как оформлять текст в CSS. В данной статье я бы хотел рассказать, что такое рамки в CSS и как их использовать. Правила, отвечающие за рамку состоят из трех элементов: толщина рамки, стиль и цвет. Давайте создадим файл index.html со следующим содержимым:

На этой же странице зададим стили для блока с id = tester (внутри заголовка страницы добавим следующие строки):

border-width 속성은 테두리 너비를 담당하고, border-style 속성은 테두리 스타일을 담당하며, border-color 속성은 테두리 색상을 담당합니다. 첫 번째와 세 번째 속성을 사용하면 모든 것이 명확해집니다. border-style 속성이 취할 수 있는 모든 값은 아래 그림에 나와 있습니다.

이제 브라우저에서 페이지를 열면 블록 주위에 1px 너비의 단색 빨간색 프레임이 나타나는 것을 볼 수 있습니다.

CSS의 긴 프레임 항목을 보여드렸습니다( 이 항목매우 번거롭고 일반적으로 아무도 사용하지 않습니다). 모든 지침은 한 줄에 포함될 수 있습니다. 우리의 경우에는 다음과 같습니다:

테두리: 1px 단색 빨간색;

저것들. 먼저 프레임의 두께를 지정한 다음 프레임 스타일과 색상을 나타냅니다.

아마도 프레임이 네 면 모두에 나타나는 것을 눈치챘을 것입니다. 프레임은 각 측면에 별도로 설정할 수 있습니다( 구체적인 예분명할 것입니다):

테두리 상단: 2px 단색 빨간색; 테두리 하단: 3px 점선 녹색; 테두리 왼쪽: 6px 노란색 점선; 테두리 오른쪽: 5px double #fe54e5;

보시다시피 4면이 모두 다양한 프레임. 일부 면에 프레임을 지정하지 않으면 해당 면에는 프레임이 없습니다.

프레임은 어디에서나 절대적으로 사용됩니다. 프레임을 사용하지 않는 웹사이트 디자인을 찾는 것은 거의 어렵습니다. 메뉴 항목은 border-right 또는 border-left 속성으로 지정되는 수직선으로 구분되는 경우가 많습니다. 당신은 또한 할 수 있습니다 흥미로운 효과링크에서. 이 주제에 대한 숙제:

페이지를 생성하고 해당 페이지에 2개의 링크를 배치해야 합니다. 이 링크의 스타일: 실선, 마우스를 올리면 이 줄점선이 되어야 합니다.

각 요소의 위치를 ​​더 잘 이해하기 위해 페이지 레이아웃을 구성할 때 요소에 대한 프레임을 사용하는 것도 매우 좋습니다. 에 의해 적어도, 내가 입력하는 것이 훨씬 더 명확하고 명확합니다.

이 챕터에서는:

박스 모델은 브라우저가 모든 태그를 다음과 같이 처리하는 요소를 표시하는 방식입니다. 작은 블록, 이들에게 있어 모든 태그는 텍스트, 이미지, 기타 태그 등의 콘텐츠가 포함된 컨테이너입니다.

• 여유(여백) - 한 요소를 다른 요소와 구분하는 빈 공간(여백)입니다. 들여쓰기의 가장 간단한 예는 서로 이어지는 단락 사이의 공백입니다. 여백 영역은 투명하며 자체 색상이나 기타 디자인 효과를 가질 수 없습니다.
• 국경(요소 테두리) - 요소 측면의 테두리입니다. 프레임은 요소의 모든 측면 또는 한쪽에 설치할 수 있습니다. 프레임을 사용하면 요소를 아름답게 장식하거나 현재 요소의 내용을 페이지의 다른 요소와 시각적으로 구분할 수 있습니다.
• 심(패딩) - 요소의 내용과 테두리 사이의 빈 공간입니다. 패딩 영역은 투명하며 자체 색상이나 기타 디자인 효과를 가질 수 없습니다.
• 대부분의 요소에는 모든 것을 포함하는 콘텐츠 영역이 있습니다. 콘텐츠요소(텍스트, 삽입된 이미지 또는 기타 요소).

액자

테두리는 스타일을 지정하는 요소 주위에 나타나는 간단한 선입니다. 그러나 모든 측면에서 요소를 둘러싸는 프레임을 사용할 필요는 전혀 없습니다. 요소의 필수 측면에서만 추가할 수 있습니다. 예를 들어 블록 요소의 하단에만 테두리를 추가하면 요소와 동일한 효과가 나타납니다.

---

(수평선), 구분 기호 역할을 합니다.

각 프레임에는 CSS를 사용하여 제어할 수 있는 세 가지 속성(너비, 스타일 및 색상)이 있으며 이를 설정하고 변경하는 데 사용할 수 있는 속성을 살펴보겠습니다.

세 가지 속성을 모두 지정하는 대신 테두리 속성 중 하나만 지정할 수 있습니다. 이를 통해 테두리의 너비, 스타일 및 색상을 동시에 지정할 수 있습니다.

첫 번째 단락.

두 번째 단락.

세 번째 단락.

요소의 각 측면에서 개별적으로 프레임을 제어하려면 다음 속성을 사용합니다.

• 테두리 상단 - 상단 프레임
• 테두리-왼쪽-왼쪽 프레임
• 테두리 오른쪽 - 오른쪽 프레임
• border-bottom - 하단 프레임

이러한 속성은 스타일을 지정하는 요소의 한쪽 테두리만 제어할 수 있다는 점을 제외하면 테두리 속성과 정확히 동일하게 작동합니다.

외부 및 내부 여백

들여 쓰기- 요소의 내용과 테두리 사이의 빈 공간(설치된 경우) 요소의 네 면 모두에 패딩 너비를 추가하고 제어하려면 padding 속성을 사용합니다.

여백은 요소를 다른 요소 또는 브라우저 창 가장자리와 구분하는 빈 공간입니다. 요소의 네 면 모두에 여백 너비를 추가하고 제어하려면 margin 속성을 사용하세요.

패딩 및 여백 속성은 1~4개의 값을 가질 수 있습니다.

값이 위에서부터 시계 방향으로 설정되는 경우 :

속성 값을 하나만 지정하면 모든 면의 들여쓰기 너비가 동일해집니다.

첫눈에 눈에 보이는 효과이러한 속성을 사용하는 경우 동일해 보이면 시각적 차이를 확인하기 위해 예를 들어 요소에 테두리를 설정하거나 배경:

일반 단락.

들여쓰기와 프레임의 경우 각 측면의 들여쓰기 크기를 개별적으로 제어할 수 있는 속성이 있습니다. 패딩은 padding-top , padding-right , padding-bottom 및 padding-left 속성에 의해 제어됩니다. 외부 여백은 margin-top , margin-right , margin-bottom 및 margin-left 속성에 의해 제어됩니다.

참고: 값 패딩 속성및 여백은 하위 요소에 상속되지 않으므로 필요한 각 요소에 대해 별도로 여백 너비를 지정해야 합니다.

요소 너비 및 높이

기본값 블록 요소자동 너비가 사용됩니다. 이는 요소가 원래 크기만큼 정확하게 늘어남을 의미합니다. 자유 공간. 블록 요소의 기본 높이는 자동으로 설정됩니다. 브라우저는 모든 콘텐츠가 표시되도록 콘텐츠 영역을 수직으로 늘립니다. 요소의 콘텐츠 영역에 대한 맞춤 크기를 설정하려면 다음을 사용할 수 있습니다. 너비 속성그리고 키.

일부 문서를 살펴보겠습니다. 그 위에 HTML 요소가 형성됩니다(브라우저 화면에 표시됨). 태그를 기반으로 구성됩니다. 태그를 배치하면 해당 태그는 html 파서(모든 브라우저에서 사용 가능)에 의해 처리되고 html 요소가 생성됩니다. 그리고 이러한 요소의 모양은 CSS에 의해 결정됩니다.

모든 HTML 요소에는 패딩 영역, 테두리, 심그리고 요소 내용. 그들은 무엇을 위해 필요합니까?

• 이 요소와 다른 요소의 경계 사이의 상호 작용을 규제하려면 여백이 필요합니다.
• 패딩은 프레임에서 특정 요소의 콘텐츠까지의 거리입니다.
• 요소 자체의 콘텐츠입니다. 여기서는 분명합니다. 중첩된 요소가 있는 경우 해당 요소는 이 영역에 위치합니다.
• 프레임(테두리). 요소의 경계를 설명합니다. 도식적으로 4개 영역은 다음과 같이 나타낼 수 있습니다.

각 요소는 일부 영역 내에 있음을 이해해야 합니다. 내부에 있는 요소에 대한 이 영역을 컨테이너라고 합니다. 저것들. 컨테이너는 상위 요소의 콘텐츠 영역입니다. 이 영역은 내부 요소를 구축하기 위한 공간을 결정합니다. 즉, 내부 요소가 이 영역의 크기에 맞게 조정됩니다.

여백

이는 요소가 컨테이너의 테두리 및 테두리와 상호 작용하는 경우입니다. 인접 요소(코드에서 옆에 있는 항목) 기본 규칙:

• margin-top: auto|magnitude|% - 상단 여백.
• margin-right: 자동|크기|% - 오른쪽 여백.
• margin-bottom: 자동|크기|% - 아래쪽 여백.
• margin-left: 자동|크기|% - 왼쪽 여백.
• 여백: 여백-상단 여백-오른쪽 여백-하단 여백-왼쪽 – 조립식 규칙.

"auto" 값은 브라우저가 이러한 값을 독립적으로 구문 분석한다는 의미입니다. 들여쓰기 크기는 em, ex, px 값으로 지정할 수 있습니다. 백분율(%)은 컨테이너 너비(상위 요소의 콘텐츠 영역)에서 계산됩니다. 음수 값을 지정하면 상위 컨테이너 내부 요소의 테두리가 서로 충돌합니다.

"마진" 규칙은 복합 규칙입니다. 여기에는 4개의 마진 값이 모두 표시됩니다(위쪽부터 시계 방향). 예:

여백: 10px 20px 20px 30px; 여백: 10px 20px 30px; - 왼쪽에서 오른쪽으로의 여백은 동일합니다: 10px 20px; - 상하 및 좌우 여백은 동일합니다: 10px; - 들여쓰기는 모두 동일합니다.

심

여기에는 음수 값이 있을 수 없습니다. 요소의 프레임 밖으로 콘텐츠를 이동할 수 없습니다. 백분율은 컨테이너 너비를 기준으로 계산됩니다.

• 패딩 상단: 값|%.
• 패딩 오른쪽: 값|%.
• 패딩 하단: 값|%.
• 패딩 왼쪽: 값|%.
• 패딩: 패딩-상부 패딩-오른쪽 패딩-하부 패딩-왼쪽 - 조립식 규칙입니다. “마진”과 유사합니다.

CSS의 테두리

모든 프레임에는 다음과 같은 특징이 있습니다.

• 두께 - 테두리 너비: 값(얇음|중간|두꺼움). 기본값은 중간입니다.
• 색상 - 테두리 색상: 색상. 기본값은 이 요소의 글꼴 색상입니다.
• 유형 - 테두리 스타일: 없음|점선|점선|실선|이중|홈|능선|삽입|시작. 유형: 프레임 없음 | 점 | 점선 | 고체 | 더블 | 구호 모방.

프레임워크 자체의 규칙:

• 테두리 상단-(너비|색상|스타일).
• 테두리 오른쪽-(너비|색상|스타일).
• 테두리-하단-(너비|색상|스타일).
• 테두리-왼쪽-(너비|색상|스타일).
• 테두리: 테두리 너비 테두리 스타일 테두리 색상. 팀 규칙.