Стили рамки css – Недокументированные приемы CSS / Райффайзенбанк corporate blog / Habr

style — свойство css :: руководство cssdot.ru

Свойство border-style определяет стиль границы блока. С помощью этого свойства можно установить стиль для всех границ элемента (border-top-style, border-right-style, border-bottom-style, border-left-style). Стиль рамки, по умолчанию, не наследуется и считается невидимым. Стиль может принимать любое значение в соответствии со стандартом CSS 2.1 или CSS 3, либо значением inherit. В зависимости от количества заданых значений (от 1 до 4), устанавливаются цвета для разных сторон рамки:

  • Если указано единственное значение, то данная величина устанавливает стиль для всех сторон (border-top-style, border-right-style, border-bottom-style, border-left-style)
  • Если указано два значения, то первая величина устанавливает стиль для верхней и нижней стороны (border-top-style, border-bottom-style), а вторая — для левой и правой стороны (border-left-style, border-right-style)
  • Три значения, устанавливают, соответственно, стиль рамки для верхней (border-top-style), правой и левой (border-left-style, border-right-style), а также нижней (border-bottom-style) сторон.
  • Четыре значения последовательно применяются для всех сторон начиная с верхней по часовой стрелке — верхняя, правая, нижняя, левая границы.
Доступные стили:

Для стилей groove, ridge, inset, outset в спецификации не утвержден метод расчета цвета, поэтому в разных браузера, рамки с такими стилями могут немного визуально отличаться (см. примеры). Так же в спецификации не обсуждается размер точек, штрихов и промежутков между ними для стилей dotted и dashed, рекомендуется только выбирать такие размеры, чтобы углы рамки смотрелись симметрично, кроме этого в браузерах на движках Trident (Internet Explorer) и Gecko (Firefox) стиль dotted отображается кружками, а в браузерах на движках WebKit (Chrome,Safari) и Presto (Opera) квадратиками.

Специфические стили:

Данные стили доступны только в определенных версиях браузеров и не являются часть стандарта CSS.

Trident (Internet Explorer)
  • window-inset — выглядит аналогично inset, за тем исключением, что дополнительно рамка окружена неприрывной линией, нарисованной основным цветом.

Примеры использования

CSS 2.1, CSS3
Значение 1px 2px 3px 5px 15px
.elementBorderStyle {
    border-style: dotted;
}

dotted
пунктир

dotted
пунктир

dotted
пунктир

dotted
пунктир

dotted

пунктир

.elementBorderStyle {
    border-style: dashed;
}

dashed
штрих

dashed
штрих

dashed
штрих

dashed
штрих

dashed
штрих

.elementBorderStyle {
    border-style: solid;
}

solid
линия

solid
линия

solid
линия

solid

линия

solid
линия

.elementBorderStyle {
    border-style: double;
}

double
линия

double
линия

double
линия

double
линия

double
линия

.elementBorderStyle {
    border-style: groove;
}

groove
паз

groove
паз

groove

паз

groove
паз

groove
паз

.elementBorderStyle {
    border-style: ridge;
}

ridge
ребро

ridge
ребро

ridge
ребро

ridge
ребро

ridge
ребро

.elementBorderStyle {
    border-style: inset;
}

inset
вкладка

inset
вкладка

inset
вкладка

inset
вкладка

inset
вкладка

.elementBorderStyle {
    border-style: outset;
}

outset
накладка

outset
накладка

outset
накладка

outset
накладка

outset
накладка

Вариации в отображении стилей для рамок элементов в зависимости от браузеров
Internet Explorer
Firefox
Chrome, Safari (WebKit)
Opera (Presto)
Ваш браузер
3px 5px 15px

dotted

dotted

dotted

dashed

dashed

dashed

groove

groove

groove

ridge

ridge

ridge

inset

inset

inset

outset

outset

outset

 

Свойство border-style

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

Смотри также:

  • border-top-style — Стиль верхней линии рамки элемента
  • border-right-style — Стиль правой линии рамки элемента
  • border-bottom-style — Стиль нижней линии рамки элемента
  • border-left-style — Стиль левой линии рамки элемента
  • border — Свойства рамки элемента

Краткое описание

Стиль линии рамки элемента

Синтаксис:

[none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset] {1,4}

По умолчанию:

none

Применяется к:

всем элементам

Наследование:
не наследуется
Тип носителя:

визуальные

Объектная модель документа (DOM):

[элемент].style.borderStyle


Кроссбраузерная совместимость

Internet Explorer
Firefox
Chrome
Safari
Opera

CSS-рамка

CSS-рамка является неотъемлемым и очень важным визуальным компонентом как блоковых, так и инлайновых html-тегов. Рамка бывает 2-ух видов: border и outline. Каждая из них имеет свое стилистическое определение.

Согласно стилевому оформлению бордер характеризуется тремя величинами: толщиной, стилем и цветностью.

Вернуться к навигации

1. Стиль рамки border-style

Данное правило отвечает за стиль визуального отображения бордера некоторого html-элемента. Следует отметить, что, если не задать рассматриваемое правило, то граница не будет видна, поскольку в дефолтном состоянии оно равно none (переводится, как «нет»). Может быть задано для разных частей границы. Является не наследуемым правилом.

border-style
Значения:
noneУказание данного параметра приведет к выключению стилей бордера текущего элемента верстки. Является дефолтным значением.
hiddenПохоже на предыдущее. Но по смыслу означает визуальное скрытие свойства.
dotted

отображение границы, по периметру которой расположено множество точек.

dashed

Задав такой параметр, бордер примет очертание штриховой линии.

solid

На вид — это сплошная однотонная черта.

double

На вид — это две параллельные тонкие линии (двойная).

groove

В виде вогнутого жёлоба.

ridge

В виде выступающей лицом к пользователю линии.

inset

Слева и сверху — темный оттенок, а справа и снизу — светлый.

outset

Также, как предыдущее, но наоборот.

initialБудет установлено в дефолтное значение.
inheritЗадав так, текущий объект унаследует данное свойство у своего родителя.

Формат записи

p
{
	border-style: double;
}

Для установки нужного стилистического определения у частей границ, расположенных сверху, справа, снизу или слева, нужно прописать css-правила border-top-style, border-right-style, border-bottom-style, border-left-style (соответственно):

p
{
	border-left-style: solid;
}

Если для каждой из четырех частей бордера нужно присвоить каждой свой стиль, то следует прописать css-код так:

div
{
	border-style: solid double dotted dashed;
}

Вернуться к навигации

2. Цвет рамки border-color

Это цсс-правило дает возможность присвоить границе некоторого html-тэга нужный цвет c каждой из 4-х сторон: сверху, справа, снизу и слева. Есть возможность присвоить цвет какой-то конкретной части бордера — для этого применяются специальные подправила. Если данный параметр не установлен, то цветность границы будет равна цветности текста самого тэга. Является не наследуемым правилом.

border-color
Значения:
transparentПереводится, как «прозрачный» или «невидимый». То есть по сути граница есть, но она бесцветная. Является дефолтным значением.
цвет

Цвет бордера задается одним из кодов: HEX, RGB или RGBA. Например, у этого бордера такой: {border-color: #84cd1b;}

initialУстановив такой параметр, правило будет установлено в дефолтное значение.
inheritПри таком параметре рассматриваемое свойство у текущего html-блока наследуется от родителя.

Формат записи

div
{
	border-color: #84cd1b;
}

При необходимости управлять какой-то конкретной частью рамки хтмл-тэга (верхней, правой, нижней или левой), то для этого есть возможность указать правила (соответственно): border-top-color, border-right-color, border-bottom-color, border-left-color:

div
{
	border-top-color: #84cd1b;
}

Если возникла необходимость задать свой цвет для каждой из частей бордера, то нужно записать css-правило следующим образом (соблюдая очередность границ: сверху, справа, снизу и слева):

div
{
	border-color: #84cd1b #1E824C #ff8073 #f1c40f;
}

Вернуться к навигации

3. Ширина рамки border-width

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

border-width
Значения:
thin / medium / thickДанные акронимы являются закрепленными мерами измерения ширины рамки в браузерах: thin — тонкая, medium — средняя, thick — толстая. Дефолтным значением является — medium
ширина

Помимо встроенных акронимов существует возможность задания толщины бордера с помощью единиц измерения: пикселей (px), процентов, относительных единиц (em) и так далее. Например, у этого тега «p» толщина бордера такая: {border-width: 3px;}

initialБудет установлено в дефолтное значение.
inheritПри задании такого параметра будет происходить наследование правила от родителя.

Формат записи

p
{
	border-width: 6px;
}

Для установки нужной толщины у частей границы, расположенных сверху, справа, снизу или слева, нужно прописать css-правила: border-top-width, border-right-width, border-bottom-width, border-left-width:

p
{
	border-top-width: 6px;
}

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

p
{
	border-width: 6px 2px 1px 3px;
}

Вернуться к навигации

4. Рамка одной строкой

Помимо записи отдельных частей стилей бордера существует также возможность их записи в одну строчку, что позволит оптимизировать css-код. Однако, такое задание применяется сразу ко всем четырем сторонам границы. Также следует помнить про очередность записи: толщина (ширина), стиль границы и ее цвет.

div
{
	border: 3px solid #84cd1b;
}

Если один из параметров границы присвоен не будет, то он принимает дефолтное значение (смотрите таблицы значений выше).

По аналогии с записью стиля для конкретных частей границы их также можно описать одной строкой:

a
{
	border-bottom: 3px solid #84cd1b;
}

Вернуться к навигации

5. Внешний контур outline

Эта разновидность рамки отличается тем, что она не оказывает влияния на положение элемента и его размерные характеристики. Связано это с тем, что сам по себе этот контур имеет абсолютное позиционирование относительно блока, к которому применяется (то есть рамка лежит в пространстве и может накрывать собой другие рядом рядом расположенные блоки).

Чаще всего применяется для обозначения активности или выделения фокуса на hml-блоке: ссылке (<a>), кнопке формы (<button>, <input>). Следует отметить, что на аутлайн не оказывает влияния свойство скругления углов border-radius, то есть она в любом случае будет иметь девяностоградусные углы.

Как и бордер, характеризуется тремя величинами: стилем, цветом и толщиной.

Вернуться к навигации

5.1. Стиль внешнего контура outline-style

Аналогично пункту 1 (выше) задает оформление внешнего аутлайна некоторого блокового или инлайнового элемента. Также, как и бордер, является не наследуемым.

outline-style
Значения:
noneУстановка данного параметра приведет к выключению стилей границ (аутлайна) текущего html-блока. Является дефолтным значением.
hiddenПохоже на предыдущее. Но по смыслу означает визуальное скрытие свойства.
dotted

отображение внешней границы в виде точек.

dashed

Задав так, аутлайн будет представлять собой штриховую линию.

solid

В виде сплошной однотонной линии.

double

Аутлайн представляет из себя две параллельны тонкие линии.

groove

В виде вогнутого жёлоба.

ridge

В виде выступающей лицом к пользователю линии.

inset

Слева и сверху — темный оттенок, а справа и снизу — светлый.

outset

Также, как предыдущее, но наоборот.

initialБудет установлено в дефолтное значение.
inheritПри таком значении рассматриваемое свойство будет унаследовано от родителя.

Формат записи

p
{
	outline-style: double;
}

Вернуться к навигации

5.2. Цвет внешнего контура outline-color

Данное правило упрвляет цветностью внешней рамки. Работает вкупе с предыдущим правилом.  Является не наследуемым.

outline-color
Значения:
invertПереводится, как «инвертировать». Выделяет контур . Является дефолтным значением.
цвет

Цвет аутлайн задается одним из кодов: HEX, RGB или RGBA. Например, у этой рамки следующий: {outline-color: #84cd1b;}

initialУстановив такой параметр, правило будет установлено в дефолтное значение.
inheritПри таком параметре рассматриваемое свойство у текущего html-блока наследуется от родителя.

Формат записи

p
{
	outline-color: #84cd1b;
}

Вернуться к навигации

5.3. Толщина внешнего контура outline-width

Позволяет задать толщину контура в разных единицах измерения. Также является не наследуемым правилом.

outline-width
Значения:
thin / medium / thickДанные акронимы — это закрепленные меры измерения толщины рамки в браузерах: thin — утонченное начертание; medium — более крупное по сравнению с предыдущим, но меньше следующего; thick — толстая. Дефолтным значением является — medium
ширина

Помимо встроенных акронимов существует возможность указания толщины внешнего контура с помощью единиц измерения: пикселей (px), процентов, относительных единиц (em) и так далее. Например, у этого блока толщина контура следующая: {outline-width: 3px;}

initialБудет установлено в дефолтное значение.
inheritПри таком значении рассматриваемое свойство будет унаследовано от родителя.

Формат записи

p
{
	outline-width: 4px;
}

Аналогично бордеру есть возможность задания данного правила одной строчкой. Формат написания будет точно таким же, за исключением названия самого свойства.

По результатом изучения этого материала станет более полное представление о возможностях линий границы и какое влияние они оказывают на позиционирование блока элемента относительно других на странице документа. Данная глава является очень важным «кусочком пазла» в общей «мозаике» фронтенд-разработки (верстки) сайтов.

Понравилась статья? — Ставь лайк!

Урок 11: Рамкиrustutorial — HTML.net

Рамки имеют многообразное применение, например, как декоративный элемент или для отделения двух объектов. CSS предоставляет бесчисленное множество вариантов использования рамок.

Толщина рамки [border-width]

Толщина рамки определяется свойством border-width, которое может иметь значения thin, medium и thick, или числовое значение в пикселах. На рисунке показана эта система:

Цвет рамки [border-color]

Свойство border-color определяет цвет рамки. Значения — нормальные значения цвета, например: «#123456», «rgb(123,123,123)» или «yellow» .

Типы рамок [border-style]

Существуют различные типы рамок. Ниже показаны восемь типов рамки и их интерпретация в Internet Explorer 5.5. Все примеры показаны цветом «gold» и толщиной «thick», но могут, естественно, выводиться другим цветом и толщиной.

Значения none или hidden могут использоваться, если вы не хотите отображать рамку.

Примеры определения рамок

Три рассмотренных выше свойства можно объединить в каждом элементе и, соответственно, устанавливать разные рамки. Для иллюстрации взглянем на документ, где определены разные рамки для <h2>, <h3>, <ul> и <p>. Результат, может быть, не столь впечатляющ, но он демонстрирует некоторые возможности:


	h2 {
	border-width: thick;
	border-style: dotted;
	border-color: gold;
	}

	h3 {
	border-width: 20px;
	border-style: outset;
	border-color: red;
	}

	p {
	border-width: 1px;
	border-style: dashed;
	border-color: blue;
	}

	ul {
	border-width: thin;
	border-style: solid;
	border-color: orange;
	}
	
	

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


	h2 {
	border-top-width: thick;
	border-top-style: solid;
	border-top-color: red;

	border-bottom-width: thick;
	border-bottom-style: solid;
	border-bottom-color: blue;

	border-right-width: thick;
	border-right-style: solid;
	border-right-color: green;

	border-left-width: thick;
	border-left-style: solid;
	border-left-color: orange;
	}
	
	

Сокращённая запись [border]

Как и для многих других свойств, вы можете объединить несколько свойств в одно, используя слово border. Пример:


	p {
	border-width: 1px;
	border-style: solid;
	border-color: blue;
	}
	
	

можно объединить в:


	p {
	border: 1px solid blue;
	}
	
	

Резюме

В этом уроке вы познакомились с безграничными возможностями CSS при использовании рамок.

В следующем уроке мы рассмотрим, как определять размеры в боксовой модели — height и width.



<< Урок 10: Поля & заполнение

Урок 12: Высота и ширина >>

Создание простых рамок с использованием CSS

Каждому элементу HTML можно создать простую рамку с помощью CSS, используя один из десяти стилей: none (нет), hidden (спрятанная), solid (цельная), dashed (подчеркиваниями), dotted (точками), groove (углубленная), ridge (приподнятая), double (двойная), inset (внутренняя) и outset (внешняя). Также в спецификации CSS3 есть три стиля, которые не поддерживаются ни в одном браузере: wave (волна), dot-dash (точками и подчеркиваниями), и dot-dot-dash (точками, точками и подчеркиванием).

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

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

border: style thickness color;

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

Обратите внимание, двойной стиль рамки особенно чувствителен к толщине, распределяя заданное число пикселей между внешней и внутренней линиями и промежутком между ними. Углубленный и приподнятый стиль подобным образом чувствительны к цвету, используя производные заданного цвета для создания оттенков для внутренних и внешних линий. Из-за этого использование чистых цветов, таких как белый, черный и некоторые другие не рекомендуется, так как в этих случаях у браузера не получится создать красивый  визуальный эффект. Внутренний и внешний стили рамки ограничены подобным образом и выглядят фальшиво, если заданы очень широкими.

Рамку можно задать каждой стороне элемента отдельно, используя свойства рамки слева, рамки снизу и т. д., или используя сокращенную запись, в которой последовательно указывать значения для верхней, правой, нижней и левой сторон рамки, т. е., по часовой стрелке начиная с верха. Также можно использовать отдельные очень детальные свойства: цвет рамки справа, ширина рамки слева и т. д.

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

img#polaroid {
        border: 25px solid #e8e8d3;
        border-bottom-width: 50px;
}

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

Автор урока Dudley Storey

Смотрите также:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *