Ramka CSS Element to jedna lub więcej linii otaczających zawartość elementu i jego dopełnienie . Granica jest ustalana za pomocą krótkiej granicy właściwości. Styl ramki jest ustawiany za pomocą trzech właściwości: styl, Kolor oraz szerokość.

Dekorowanie obramowań i obramowań elementów HTML za pomocą właściwości CSS

1. Styl obramowania

Domyślnie obramowania są zawsze rysowane na górze tła elementu, a tło rozciąga się do zewnętrznej krawędzi elementu. Styl ramki determinuje jej wyświetlanie, bez tego właściwości ramki nie będą w ogóle widoczne. Dla elementu można ustawić obramowanie dla wszystkich stron jednocześnie, używając właściwości border-style lub dla każdej strony osobno, używając właściwości kwalifikujących border-top-style i tak dalej. Nie dziedziczone.

styl obramowania (styl obramowania u góry, styl obramowania z prawej strony, styl obramowania u dołu, styl obramowania z lewej)
Wartości:
Żaden	Wartość domyślna oznacza brak ramki. Usuwa również granicę elementu z grupy elementów o wartości tego zestawu właściwości.
ukryty	Odpowiednik brak .
kropkowany	kropkowany
przerywany	przerywany
solidny	solidny
podwójnie	podwójnie
rowek	rowek
grzbiet	grzbiet
wstawka	wstawka
początek	początek
{1,4}	Wymień cztery różne style dla obramowań elementu naraz, tylko dla właściwości border-style: (styl obramowania: ciągła kropkowana brak kropkowana;)
Inicjał
dziedziczyć

Składnia

P (border-style: solid;) p (border-top-style: solid;)

2. Kolor obramowania kolor obramowania

Właściwość ustawia kolor ramek ze wszystkich stron jednocześnie. Możesz użyć właściwości doprecyzowania, aby ustawić niestandardowy kolor obramowania każdej strony elementu. Jeśli nie określono koloru obramowania, będzie on taki sam jak kolor tekstu elementu. Jeśli element nie zawiera tekstu, kolor obramowania będzie taki sam jak kolor tekstu elementu nadrzędnego. Nie dziedziczone.

kolor ramki (kolor górnego obramowania, kolor prawy obramowania, kolor dolny obramowania, kolor lewy obramowania)
Wartości:
przezroczysty	Ustawia przezroczysty kolor ramki. W takim przypadku szerokość ramy pozostaje. Może służyć do zmiany koloru obramowania po najechaniu myszą na element, aby uniknąć przesuwania elementu.
Kolor	Kolor ramki jest ustawiany za pomocą wartości właściwości. (kolor-obramowania: #cacd58;)
{1,4}	Wymień cztery różne kolory dla obramowań elementu w tym samym czasie, tylko dla właściwości border-color: (kolor obramowania: #cacd58 #5faf8a #b9cea5 #aab238;)
Inicjał	Ustawia wartość właściwości na jej wartość domyślną.
dziedziczyć	Dziedziczy wartość właściwości z elementu nadrzędnego.

Składnia

P (kolor obramowania: #cacd58;)

3. Szerokość obramowania

Szerokość ramki jest określana za pomocą jednostek długości lub słów kluczowych. Jeśli właściwość border-style jest ustawiona na none, a obramowanie elementu jest ustawione na pewną szerokość, to w tym przypadku szerokość obramowania jest ustawiona na zero. Nie dziedziczone.

Składnia

P (szerokość obramowania: 2px;)

4. Ustawienie ramy z jedną właściwością

Właściwość border umożliwia łączenie następujących właściwości: border-width , border-style , border-color , na przykład:

Div (szerokość: 100px; wysokość: 100px; obramowanie: 2px jednolity szary; )

W takim przypadku określone właściwości zostaną zastosowane do wszystkich granic elementu jednocześnie. Jeśli jakakolwiek wartość nie zostanie określona, ​​jej miejsce zajmie wartość domyślna.

5. Ustawienie ramki dla jednej granicy elementu

W przypadku, gdy trzeba ustawić inny styl obramowania elementu, możesz użyć krótkiej notacji dla odpowiedniej obramowania.
Wymienione poniżej właściwości łączą następujące właściwości w jedną deklarację: border-width , border-style i border-color . Lista właściwości jest określona w podanej kolejności, przy czym jedną lub dwie wartości można pominąć, w takim przypadku ich wartości przyjmą wartości domyślne.

Styl górnej granicy jest ustawiany za pomocą właściwości border-top , dolna krawędź to border-bottom , lewa krawędź to border-left , a prawa krawędź to border-right .

Składnia

P (obramowanie-góra: 2px jednolity szary;)

6. Zarys konspektu

Właściwość ustawia zewnętrzną granicę wokół elementów (tj. poza normalną granicą). Głównym celem tej właściwości jest wyróżnienie elementu. W przeciwieństwie do właściwości border, zastosowanie tej właściwości nie wpływa na rozmiar ani położenie elementu, ponieważ kontur jest wyświetlany na górze pola elementu, co z kolei może prowadzić do nakładania się marże element i obszary sąsiednie.

Również obrys zewnętrzny, w przeciwieństwie do granicy elementu, otacza element ze wszystkich stron, całkowicie go obramowując.

Zewnętrzny kontur jest zawsze prostokątny i nie podąża za obramowaniem prostokąta, który jest ustawiony na border-radius .

Właściwość konturu pozwala łączyć następujące właściwości: kolor konturu , styl konturu , szerokość konturu . Jeśli jakakolwiek wartość nie zostanie określona, ​​jej miejsce zajmie wartość domyślna.

Div (szerokość: 100px; wysokość: 100px; kontur: #cacd58 solid 2px; )

6.1. Styl konturu w stylu konspektu

Wygląd linii obrysu zewnętrznego ustala się w taki sam sposób, jak styl ramy elementu. Nie dziedziczone.

Składnia

P (styl konturowy: kalenica;)

6.2. Kolor konturu kolor konturu

Kolor konturu zewnętrznego można ustawić tylko wtedy, gdy ustawiony jest styl konturu. Nie dziedziczone.

Składnia

P ( styl konturu: grzbiet; kolor konturu: srebrny; )

6.3. Zewnętrzna szerokość konturu szerokość konturu

Grubość linii obrysu zewnętrznego ustala się tak samo jak grubość ramy elementu. Nie dziedziczone.

Składnia

P ( styl konturu: kropkowany; szerokość konturu: 5 pikseli; )

Nieruchomość obramowanie css dostosowuje się do tworzenia obramowania obiektu, a mianowicie do grubości ramy, jej koloru i stylu. Ta właściwość jest szeroko stosowana w HTML. Możesz stworzyć różne efekty dla lepszego postrzegania treści na stronie. Na przykład zaprojektuj pasek boczny, nagłówek witryny, menu itp.

1. Składnia obramowania CSS

granica : szerokość-obramowania styl-obramowania kolor-obramowania | dziedziczyć;

• border-width - szerokość granicy. Możesz ustawić go w pikselach (px) lub użyć standardowych wartości cienkich, średnich, grubych (różnią się tylko szerokością piksela)
• border-style — styl renderowanej ramki. Może przyjmować następujące wartości
  • brak lub ukryty - anuluje granicę
  • kropkowana - kropkowana ramka
  • przerywana - ramka na deskę rozdzielczą
  • ciągła - prosta linia (najczęściej używana)
  • podwójna - podwójna rama
  • rowek - ryflowana granica 3D
  • kalenica , wstawka , początek - różne efekty ramek 3D
  • dziedzicz - stosowana jest wartość elementu rodzica
• border-color - kolor obramowania. Można ustawić za pomocą konkretna nazwa kolory lub in Format RGB(patrz nazwy kolorów html dla witryny)

Notatka

Wartości we właściwości CSS border można ustawić w dowolnej kolejności. Najczęściej stosowaną sekwencją jest „kolor w stylu grubości”.

2. Przykłady z różnymi obramowaniami CSS

2.1. Przykład. Różne style obramowania w stylu obramowania

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 свойством border. Узнаете ли вы что-то новое, чего не знали раньше о css border? Что же, не только узнаете, но и увидите несколько новых вещей, которых вы никогда не знали прежде!

Не только CSS3 можно использовать для закругления уголков, но и чистый CSS код подойдет для создания сложных форм. Раньше вы могли использовать background-image, для создания впечатления закругленных уголков. Благодаря новым техникам использования border, мы можем сделать это на чистом css коде.

Основы использования css border

Наверняка, вы уже ознакомлены со стандартным использованием border свойства:

Border: 1px solid black;

Код выше, выведет рамку в 1px, которая будет черного цвета. Легко и просто. Также можно немного расширить синтаксис:

Border-width: thick; border-style: solid; border-color: black;

Как дополнение, можно использовать специфические значения свойства border-width, три ключевых слова: thin, medium, thick.

Но использование расширенного синтаксиса не всегда практично. Давайте рассмотрим пример, когда нужно изменить цвет рамки блока, при наведении мыши. В таком случае использование сокращенного синтаксиса гораздо проще:

Box { border: 1px solid red; } .box:hover { border: 1px solid green; }

Более элегантно и проще можно сделать следующим образом:

Box { border: 1px solid red; } .box:hover { border-color: green; }

Как видите, расширенная техника также полезна, когда мы меняем только некоторые свойства: width, style, color и другие.

Border-Radius

Border- radius - это «золотое» свойство CSS3 - первое, наиболее распространенное свойство, которое стало практичным и полезным. Исключая IE8 и версии ниже, все браузеры отображают закругленные уголки с помощью этого.

Хотя, необходимо использовать специальные префиксы для Webkit и Mozilla, чтобы стилизация была корректной.

Webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;

В сегодняшнее время, мы можем убрать специальные префиксы, и использовать стандартную форму border-radius.

Еще одна привилегия в том, что мы можем использовать специальные значения для каждой из сторон блока:

Border-top-left-radius: 20px; border-top-right-radius: 0; border-bottom-right-radius: 30px; border-bottom-left-radius: 0;

В коде выше, устанавливая border-top-right-radius и border-bottom-left-radius на «нуль», можно добиться удивительных форм. Хотя элемент может наследовать некоторые свойства, которые нужно будет обнулить.

Наподобие как margin и padding, мы можем сжать синтаксис:

/* top left, top right, bottom right, bottom left */ border-radius: 20px 0 30px 0;

Как пример, применения свойства border-radius, покажу вам «лимон», который часто используют дизайнеры при верстке сайтов:

Lemon { width: 200px; height: 200px; background: #F5F240; border: 1px solid #F0D900; border-radius: 10px 150px 30px 150px; }

Идем далее основ

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

Сложные структуры css border

Существует множество техник для создания дизайна с применением сложных структур border. Для примера, разберем следующие…

Border-Style

Мы всегда используем наиболее известные свойства solid, dashed и dotted. Но существует парочка иных свойств border-style: groove и ridge.

Border: 20px groove #e3e3e3;

Или в расширенном синтаксисе:

Border-color: #e3e3e3; border-width: 20px; border-style: groove;

Хотя эти свойства и полезны, но они не являются основой создания сложных рамок.

Outline

Наиболее популярная техника создания двойной рамки - использование свойства outline.

Box { border: 5px solid #292929; outline: 5px solid #e3e3e3; }

Этот способ работает отлично, хотя, он нас ограничивает только двумя рамками. Иногда бывает нужно создать градиентный border, который состоит из многих слоев… как тогда?

Псевдоэлементы

Когда техники outline не достаточно, альтернативным средством является использование псевдо элементов:before и:after. С помощью которых можно добавить дополнительные рамки к элементу:

Box { width: 200px; height: 200px; background: #e3e3e3; position: relative; border: 10px solid green; } /* Create two boxes with the same width of the container */ .box:after, .box:before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .box:after { border: 5px solid red; outline: 5px solid yellow; } .box:before { border: 10px solid blue; }

На вид не очень элегантно, но по крайней мере, это работает. Немного проблемно разобраться с последовательность цветов в рамках… но понять можно.

Box-Shadow

Интересным «детским способом» создания подобного эффекта, является использование CSS3 свойства box-shadow:

Box { border: 5px solid red; box-shadow: 0 0 0 5px green, 0 0 0 10px yellow, 0 0 0 15px orange; }

В этом случае мы были умнее, использовали специально предназначенное свойство box-shadow. Изменяя параметры x, y, blur на «нуль», мы можем использовать разные цвета для создания множества рамок.

Но есть проблемка, в старых браузерах, которые не понимают свойства box-shadow, будет видна только одна красная рамка в 5px.

«Помните! Дизайн сайта должен выглядеть кроссбраузерно, то есть одинаково во всех браузерах. Включая старые версии.»

Изменяем углы

В дополнение к используемому простому значению border-radius, мы можем указать два отдельных - разделяя их через / мы укажем горизонтальный и вертикальный радиус.

Для примера:

Border-radius: 50px / 100px; /* horizontal radius, vertical radius */

… это равносильно:

Border-top-left-radius: 50px 100px; border-top-right-radius: 50px 100px; border-bottom-right-radius: 50px 100px; border-bottom-left-radius: 50px 100px;

Эта техника подходит, для создания уникальных форм блоков. Для примера, вот создание эффекта завернутой бумаги:

Box { width: 200px; height: 200px; background: #666; border-top-left-radius: 15em 1em; border-bottom-right-radius: 15em 1em; }

CSS формы, с использованием border

Эта техника показывает, как можно создавать css формы, при этом использовать элементы с нулевыми размерами высоты и ширины. Удивлены? Давайте посмотрим на примере…

Для следующих нескольких примеров, мы будем использовать следующую разметку:

…и следующий базовый стиль:

Box { width: 200px; height: 200px; background: black; }

Наиболее частый пример использования CSS форм - создание обтекающей стрелки. Секрет этой стрелки кроется в создании border с разными цветами для каждой из сторон. Потом, ставим атрибуты width и height на 0.

Назначим к div блоку класс arrow:

Arrow { width: 0; height: 0; border-top: 100px solid red; border-right: 100px solid green; border-bottom: 100px solid blue; border-left: 100px solid yellow; }

Что бы продемонстрировать, сначала мы используем расширенный синтаксис. Далее мы можем убрать лишний код, используя сокращенный синтаксис:

Arrow { width: 0; height: 0; border: 100px solid; border-color: red green blue yellow; }

Интересно, правда? Теперь мы установим прозрачные цвета на все стороны, кроме голубой стороны.

Arrow { width: 0; height: 0; border: 100px solid; border-bottom-color: blue; }

Отлично получилось! Но это противоречит семантической верстке , создавать.arrow div, только для того, чтобы добавить стрелочку на страницу. Для этой цели, мы можем использовать псевдоэлементы, что мы сейчас и сделаем.

Создаем Speech Bubble

Для создания Speech Bubble («Речевой хмарки»), нам понадобиться небольшой кусочек чистого CSS кода и один div блок.

Speech-bubble { position: relative; background-color: #292929; width: 200px; height: 150px; line-height: 150px; /* vertically center */ color: white; text-align: center; }

Speech-bubble:after { content: ""; }

На этом этапе, мы создадим стрелочку, которую делали прежде, добавим к элементу и остается только позиционировать:

Speech-bubble:after { content: ""; position: absolute; width: 0; height: 0; border: 10px solid; border-color: red green blue yellow; }

Если мы хотим, чтобы стрелочка была направлена вниз, нам придется установить все border прозрачными, кроме верхнего.

Speech-bubble:after { content: ""; position: absolute; width: 0; height: 0; border: 10px solid; border-top-color: red; }

Когда мы создаем эту CSS форму, мы не можем конкретно указать размер стрелочки. Вместо этого мы можем установить свойство border-width, которое будет назначать размер для стрелочки. Также мы установим позицию стрелочки внизу посредине. Соответственно для этого используем значения top и left.

Speech-bubble:after { content: ""; position: absolute; width: 0; height: 0; border: 15px solid; border-top-color: red; top: 100%; left: 50%; }

Кроме этого, нам остается придать цвет, такой же как у блока. Помните, при позиционировании, нужно учитывать размер других border, которые невидимы (15px). Также придадим блоку закругления по углам.

Speech-bubble { /* … other styles */ border-radius: 10px; } .speech-bubble:after { content: ""; position: absolute; width: 0; height: 0; border: 15px solid; border-top-color: #292929; top: 100%; left: 50%; margin-left: -15px; /* adjust for border width */ }

Не плохо, а? Используя несколько css классов и хитрости border, можно создать такую штуку.

/* Speech Bubbles Usage: примените класс.speech-bubble и.speech-bubble-НАПРАВЛЕНИЕ, как показано ниже

*/ .speech-bubble { position: relative; background-color: #292929; width: 200px; height: 150px; line-height: 150px; /* vertically center */ color: white; text-align: center; border-radius: 10px; font-family: sans-serif; } .speech-bubble:after { content: ""; position: absolute; width: 0; height: 0; border: 15px solid; } /* Position the Arrow */ .speech-bubble-top:after { border-bottom-color: #292929; left: 50%; bottom: 100%; margin-left: -15px; } .speech-bubble-right:after { border-left-color: #292929; left: 100%; top: 50%; margin-top: -15px; } .speech-bubble-bottom:after { border-top-color: #292929; top: 100%; left: 50%; margin-left: -15px; } .speech-bubble-left:after { border-right-color: #292929; top: 50%; right: 100%; margin-top: -15px; }

Бонус! Вертикальное центрирование внутри блока

Для одной строки текста, можно использовать line-height. Но если у вас две или больше строк текста… Наилучшим решением будет установить display свойство на table, и поместить весь текст в параграф. Вот как это выглядит на html разметке: