wwwoldi.ru

About Me

Dashy

Hello word I am dashy Guy

Разное

Css граница блока: создаем границы для элементов — учебник CSS

alexxlab
No Comments

Содержание

Границы | htmlbook.ru



Границы | htmlbook.ru

Устанавливает набор цветов для нижней границы элемента в Firefox.

Устанавливает набор цветов для левой границы элемента в Firefox.

Устанавливает набор цветов для правой границы элемента в Firefox.

Устанавливает набор цветов для верхней границы элемента в Firefox.

Позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента.

Позволяет одновременно установить толщину, стиль и цвет границы внизу элемента.

Устанавливает цвет границы внизу элемента.

Устанавливает стиль границы внизу элемента.

Устанавливает толщину границы внизу элемента.

Устанавливает цвет границы на разных сторонах элемента.

Используется для отображения рисованной рамки вокруг элемента.

Позволяет одновременно установить толщину, стиль и цвет левой границы элемента.

Задает цвет границы слева от элемента.

Устанавливает стиль границы слева от элемента.

Устанавливает толщину границы слева от элемента.

Позволяет одновременно установить толщину, стиль и цвет правой границы элемента.

Задает цвет границы справа от элемента.

Устанавливает стиль границы справа от элемента.

Устанавливает толщину границы справа от элемента.

Устанавливает стиль границы вокруг элемента.

Позволяет одновременно установить толщину, стиль и цвет границы сверху элемента.

Задает цвет границы сверху элемента.

Устанавливает стиль границы сверху элемента.

Устанавливает толщину границы сверху элемента.

Задает толщину границы одновременно на всех сторонах элемента или индивидуально для каждой стороны.

Универсальное свойство, одновременно устанавливающее цвет, стиль и толщину внешней границы на всех четырех сторонах элемента.

Задает цвет внешней границы элемента.

Устанавливает расстояние между рамкой, созданной с помощью свойства outline, и краем или границей элемента добавленной через border.

Задает стиль внешней границы элемента.

Задает толщину внешней границы элемента.

О сайте

Помощь

Копирование материалов

Борьба с ошибками

Технологии

Поисковый плагин

Основные разделы

Статьи

Блог

Практикум

Цифровые книги

Форум

HTML

Самоучитель HTML

XHTML

Справочник по HTML

HTML5

CSS

Самоучитель CSS

Справочник по CSS

Рецепты CSS

CSS3

Сайт

Вёрстка

Макеты

Веб-сервер

htmlbook.ru использует Друпал хостинг it-patrol

© 2002–2020 Влад Мержевич, по всем вопросам пишите по адресу [email protected]

Подпишитесь на материалы сайта по RSS

CSS-рамка

CSS-рамка элемента представляет собой одну или несколько линий, окружающих содержимое элемента и его поля padding. Рамка задаётся с помощью краткого свойства border. Стиль рамки задается с помощью трех свойств: стиль, цвет и ширина.

Оформление рамок HTML-элементов с помощью CSS-свойств

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

По умолчанию рамки всегда отрисовываются поверх фона элемента, фон распространяется до внешнего края элемента. Стиль рамки определяет ее отображение, без этого свойства рамки не будут видны вообще. Для элемента можно задавать рамку для всех сторон одновременно с помощью свойства border-style или для каждой стороны отдельно с помощью уточняющих свойств border-top-style и т.д. Не наследуется.

border-style
(border-top-style, border-right-style, border-bottom-style, border-left-style)
Значения:
noneЗначение по умолчанию, означает отсутствие рамки. Также убирает рамку элемента из группы элементов с установленным значением данного свойства.
hiddenЭквивалентно none.
dotted
dotted
dashed
dashed
solid
solid
double
double
groove
groove
ridge
ridge
inset
inset
outset
outset
{1,4}
Одновременное перечисление четырех разных стилей для рамок элемента, только для свойства border-style:
{border-style: solid dotted none dotted;}
initialУстанавливает значение свойства в значение по умолчанию.
inheritНаследует значение свойства от родительского элемента.

Синтаксис

p {border-style: solid;}
p {border-top-style: solid;}

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

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

border-color
(border-top-color, border-right-color, border-bottom-color, border-left-color)
Значения:
transparentУстанавливает прозрачный цвет для рамки. При этом ширина рамки остается. Можно использовать для смены цвета рамки при наведении курсора мыши на элемент, чтобы избежать смещение элемента.
цветЦвет рамок задается при помощи значений свойства color.

{border-color: #cacd58;}
{1,4}
Одновременное перечисление четырех разных цветов для рамок элемента, только для свойства border-color:
{border-color: #cacd58 #5faf8a #b9cea5 #aab238;}
initialУстанавливает значение свойства в значение по умолчанию.
inheritНаследует значение свойства от родительского элемента.

Синтаксис

p {border-color: #cacd58;}

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

Ширина рамки задается с помощью единиц измерения длины или ключевых слов. Если для свойства border-style задано значение none, и для рамки элемента установлена какая-то ширина, то в данном случае ширина рамки приравнивается к нулю. Не наследуется.

border-width
(border-top-width, border-right-width, border-bottom-width, border-left-width)
Значения:
thin / medium / thickКлючевые слова, устанавливают ширину рамки относительно друг друга. Первое значение уже, чем второе, второе — тоньше третьего. Значение по умолчанию — medium
width (px, em)
{border-width: 5px;}
{1,4}
Возможность одновременного задания четырех разных ширин для рамок элемента, только для свойства border-width:
{border-width: 5px 10px 15px 3px;}
initialУстанавливает значение свойства в значение по умолчанию.
inheritНаследует значение свойства от родительского элемента.

Синтаксис

p {border-width: 2px;}

4. Задание рамки одним свойством

Свойство border позволяет объединить в себе следующие свойства: border-width, border-style, border-color, например:

div {
width: 100px; 
height: 100px; 
border: 2px solid grey;
}

При этом заданные свойства будут применяться ко всем границам элемента одновременно. Если какое-то из значений не указано, его место займет значение по умолчанию.

5. Задание рамки для одной границы элемента

В случае, когда необходимо задать разный стиль границ элемента, можно воспользоваться краткой записью для соответствующей границы.
Перечисленные ниже свойства объединяют в одно объявление следующие свойства: border-width, border-style и border-color. Перечень свойств указывается в заданном порядке, при этом одно или два значения могут быть пропущены, в этом случае их значения примут значения по умолчанию.

Стиль верхней границы задается с помощью свойства border-top, нижней — border-bottom, левой — border-left, правой — border-right.

Синтаксис

p {border-top: 2px solid grey;}

CSS: border — границы элементов в CSS.

Для управления границей элемента применяется универсальное свойство border. Это свойство позволяет установить в одном объявлении толщину, стиль и цвет границы элемента.

Свойство border: краткая информация
Значение по умолчаниюЗависит от элемента
ПрименяетсяК любым элементам
НаследуетсяНет
Ссылка на спецификациюhttp://www.w3.org/TR/CSS21/box.html#propdef-border

Эти три свойства (толщину, стиль и цвет границы) можно установить в одном объявлении. Вот пример:

<!DOCTYPE html>
<html>
<head>
<title>Границы в CSS</title>
<style>
div {
	background-color: #BDD8F9;
	width:  400px;
	height: 100px;
	border: 3px solid red; /* задаём границу */
	margin: 0 auto;
	text-align: center
}
</style>
</head>
<body>

<div>Блок div  с рамкой 3px красного цвета.</div>

</body>
</html>

Можно указать стиль границы только на одной стороны элемента. Для этого применяют свойства border-top (верхняя граница), border-right (правая граница), border-bottom (нижняя граница), border-left (левая граница).

<!DOCTYPE html>
<html>
<head>
<title>Границы в CSS</title>
<style>
div {
	background-color: #BDD8F9;
	width:  400px;
	height: 100px;
	margin: 0 auto;
	text-align: center;
	border-top: 3px dotted black;
	border-right: 5px solid red;
	border-bottom: 10px dashed green;
	border-left: 12px solid yellow;
}
</style>
</head>
<body>

<div>Блок div с разными границами.</div>

</body>
</html>

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

Подумайте, как при помощи CSS можно создать такую фигуру:

Значения границы — толщину, стиль и цвет — можно задать отдельно используя специальные свойства.

  • border-style — стиль границы.
  • border-width — ширина границы.
  • border-color — цвет границы.

Рассмотрим каждое из значений по отдельности.

Свойство border-style. Стиль границы.

Свойство border-style устанавливает стиль рамки. В CSS, в отличии HTML, граница элемента может быть не только сплошной. Допустимы следующие значения для стиля границы:

  1. none — граница отсутствует (по умолчанию).
  2. solid — сплошная граница.
  3. double — двойная граница.
  4. dashed — пунктирная граница.
  5. dotted — граница из ряда точек.
  6. ridge — граница «гребень».
  7. groove — граница «бороздка».
  8. inset — вдавленная граница.
  9. outset — выдавленная граница.

Примеры того, как они выглядят.

граница отсутствует (none)

сплошная граница (solid)

двойная граница (double)

граница из ряда точек (dotted)

пунктирная граница (dashed)

граница «бороздка» (groove)

граница «гребень» (ridge)

вдавленная граница (inset)

выдавленная граница (outset)

Кстати, если для рамки ridge задать цвет границы чёрный, то получится вот такой результат.

Блок div с рамкой чёрного цвета и стиля ridge.

Рамка выглядит как solid, но это потому что стиль ridge создаётся добавлением чёрного эффекта тени, а чёрный эффект на чёрной рамке не виден.

При помощи свойства border-style стиль границы может быть задан не только для всех сторон блока. Есть возможность задавать несколько значений одному свойству border-style, в зависимости от числа значений стиль границы будет присвоен разному числу сторон блока. Можно задать одно, два, три и четыре значения. Давайте рассмотрим примеры для каждого случая.

Одно значение (solid) — стиль границы установлен для всех сторон блока.

Два значения (solid double) — первое значение установило стиль для верхней и нижней сторон, второе для боковой.

Три значения (solid double dotted) — первое значение для верхней стороны, второе для боковых, стретье для нижней.

Четыре значения (solid double dotted dashed) — каждое значение для одной стороны по часовой стрелке начиная с верхней.

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

Для установки толщины границы элемента используется свойство border-width. Толщину границы можно задать в любых абсолютных единицах измерения, например в пикселах.

Как и для свойства border-style, для свойства также можно задавать от одного до четырёх значений. Рассмотрим примеры для каждого случая.

Одно значение (2px) — толщина границы установлен для всех сторон блока.

Два значения (1px 5px) — первое значение установило толщину для верхней и нижней сторон, второе для боковой.

Три значения (1px 3px 5px) — первое значение для верхней стороны, второе для боковых, стретье для нижней.

Четыре значения (1px 3px 5px 7px) — каждое значение для одной стороны по часовой стрелке начиная с верхней.

Код примера:

<!DOCTYPE html>
<html>
<head>
<title>Толщина границы в CSS</title>
<style>
div {
	width:  400px;
	margin: 0 auto;
	text-align: center;
	font-family: Tahoma;
	font-size: 10pt;
	padding: 10px;
	border-style: solid;
}
</style>
</head>
<body>

<div>Одно значение (2px) - толщина границы установлен для всех сторон блока.</div>
<br>
<div>Два значения (1px 5px) - первое значение установило толщину для верхней и нижней сторон, второе для боковой.</div>
<br>
<div>Три значения (1px 3px 5px) - первое значение для верхней стороны, второе для боковых, стретье для нижней.</div>
<br>
<div>Четыре значения (1px 3px 5px 7px) - каждое значение для одной стороны по часовой стрелке начиная с верхней.</div>

</body>
</html>

Также для свойства border-width существуют значения в виде ключевых слов. Всего их три:

  • thin — тонкая граница;
  • medium — средняя толщина;
  • thick — толстая граница;

Толщина границы: thin.

Толщина границы: medium.

Толщина границы: thick.

Свойство border-color. Цвет границы.

Для управления цветом границы используется средство border-color. Цвета для этого свойства можно задать используя любой способ, описанный в статье «Цвета в CSS», а именно:

  • Шестнадцатеричная запись (#ff00aa) цвета.
  • Формат RGB — rgb(255,12,110). Формат RGBA для CSS3.
  • Форматы HSL и HSLA для CSS3.
  • Название цвета, например black (чёрный). Полный список названий цветов приведён в таблице названий цветов CSS.

Свойство border-color также может иметь от одного до четырёх значений и обрабатывает их аналогично предыдущим свойствам.

Одно значение (red).

Два значения (red black).

Три значения (red black yellow).

Четыре значения (red black yellow blue).

Теперь вернёмся к задаче, озвученной выше, и нарисуем фигуру:

Вот код, который рисует такую фигуру, только побольше размером:

<!DOCTYPE html>
<html>
<head>
<title>Толщина границы в CSS</title>
<style>
div {
	width:  0px;
	hight:  0px;
	margin: 0 auto;
	padding: 0px;
	border-style: solid;
	border-width: 200px;
	border-color: yellow blue red black;
}
</style>
</head>
<body>

<div></div>

</body>
</html>

Установка значений для сторон отдельно

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

  • border-top (верхняя граница)
  • border-right (правая граница)
  • border-bottom (нижняя граница)
  • border-left (левая граница)

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

Параметры верхней границы (border-top).

  • border-top-color — задаёт цвет верхней границы элемента.
  • border-top-width — задаёт толщину верхней границы элемента.
  • border-top-style — задаёт стиль верхней границы элемента.

Параметры правой границы (border-right).

  • border-right-color — задаёт цвет правой границы элемента.
  • border-right-width — задаёт толщину правой границы элемента.
  • border-right-style — задаёт стиль правой границы элемента.

Параметры нижней границы (border-bottom).

  • border-bottom-color — задаёт цвет нижней границы элемента.
  • border-bottom-width — задаёт толщину нижней границы элемента.
  • border-bottom-style — задаёт стиль нижней границы элемента.

Параметры левой границы (border-left).

  • border-left-color — задаёт цвет левой границы элемента.
  • border-left-width — задаёт толщину левой границы элемента.
  • border-left-style — задаёт стиль левой границы элемента.

Пример использования этих свойств:

<!DOCTYPE html>
<html>
<head>
<title>Толщина границы в CSS</title>
<style>
div {
	width: 400px;
	padding: 12px;
	border-width: 3px;
	border-style: solid;
	border-top-color: red;
	border-right-width: 10px;
	border-bottom-style: double;
	border-left-color: blue
}
</style>
</head>
<body>

<div>В этом примере блоку div сначала заданы границы толщиной 3px и стилем solid для всех сторон. Затем:
<ul>
	<li>переопределён цвет верхней границы при помощи свойства border-top-color в красный,</li>
	<li>при помощи свойства border-right-width установлена толщина правой границы 10px,</li>
	<li>при помощи свойства border-bottom-style стиль нижней границы переопределён как double,</li>
	<li>при помощи свойства border-left-color левой границе установлен синий цвет.</li>
</ul>
</div>

</body>
</html>

Свойство border-radius. Округление углов границы.

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

Значениями могут быть любые числа, используемые в CSS.

Свойство border-radius: 15px.

Если рамка блока не задана, то скругление происходит с фоном. Вот пример закругления блока без рамки, но с фоновым цветом:

Свойство border-radius: 15px.

Существуют свойства для скругленя каждого отдельно угла элемента. В этом примере использованы они все:

border-top-left-radius: 15px;
border-top-right-radius: 0;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 0;

Свойство border-radius: 15px.

Хотя этот код можно записать одним объявлением: border-radius: 15px 0 15px 0. Дело в том, что для свойства border-radius можно задавать от одного до четырёх значений. В таблице ниже приведены правила, которые определяют такие объявления.

Табл. Свойство border-radius
Число значенийРезультат
1Радиус указывается для всех углов блока.
2Первое значение задает радиус верхнего левого и нижнего правого угла, второе значение — верхнего правого и нижнего левого угла.
3Первое значение задает радиус для верхнего левого угла, второе — устанавливает радиус верхнего правого и нижнего левого углов одновременно, а третье — для нижнего правого уголка.
4По очереди устанавливает радиус для верхнего левого, верхнего правого, нижнего правого и нижнего левого углов.

Внимательно изучив эту таблицу можно понять, что самая короткая запись нужного стиля будет такой: border-radius: 15px 0. Всего два значения.

Немного практики

Рисуем лимон средствами CSS.

Вот код такого блока:

margin: 0 auto; /* Размещаем блок по центру */
width: 200px; height: 200px;
background: #F5F240;
border: 1px solid #F0D900;
border-radius: 10px 150px 30px 150px;

Мы уже рисовали фигуру:

Теперь оставим от неё треугольник:

Код треугольника такой:

margin: 0 auto; /* Размещаем блок по центру */
padding: 0px;
width: 0px; height: 0;
border: 30px solid white;
border-bottom-color: red;

border | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+8.0+1.0+3.5+1.0+1.0+1.0+1.0+

Краткая информация

Значение по умолчаниюЗависит от использования
НаследуетсяНет
ПрименяетсяКо всем элементам
Ссылка на спецификациюhttp://www.w3.org/TR/CSS21/box.html#propdef-border

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

Универсальное свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг
элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер
сам определит, какое из них соответствует нужному свойству. Для установки границы
только на определенных сторонах элемента, воспользуйтесь свойствами border-top,
border-bottom, border-left,
border-right.

Синтаксис

border: [border-width || border-style || border-color] | inherit

Значения

Значение border-width определяет толщину границы.
Для управления ее видом предоставляется несколько значений border-style.
Их названия и результат действия представлен на рис. 1.

Рис.1. Стили рамок

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

inherit наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border</title>
  <style>
   .brd {
    border: 4px double black; /* Параметры границы */
    background: #fc3; /* Цвет фона */
    padding: 10px; /* Поля вокруг текста */
   }
  </style>
 </head> 
 <body>
  <div>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy 
    nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis 
    enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis 
    nisl ut aliquip ex ea commodo consequat.
   </div>
 </body>
</html>

В данном примере вокруг слоя добавляется двойная граница. Результат показан на рис. 2.

Рис. 2. Применение свойства border

Объектная модель

[window.]document.getElementById(«elementID»).style.border

Браузеры

Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed.

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge, inset или outset.

border — граница блока | CSS справочник

Поддержка браузерами


12.0+4.0+1.0+1.0+3.5+1.0+

Описание

CSS свойство border позволяет одновременно установить ширину, стиль и цвет для границы блока. Граница блока — обычная линия/рамка, которая окружает блок со всех сторон. Стоит учитывать, что при добавлении рамки она будет влиять на общий размер блока.

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

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

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







Значение по умолчанию:не определено
Применяется:ко всем элементам
Анимируется:да, смотрите каждое свойство, входящее в состав краткого метода, отдельно
Наследуется:нет
Версия:CSS1
Синтаксис JavaScript:object.style.border=»3px solid blue»

Синтаксис

border: border-width border-style border-color|inherit;

Значения свойства






ЗначениеОписание
border-widthУказывает ширину для рамки с помощью любой допустимой единицы измерения CSS (кроме процентов).
border-styleУказывает стиль для рамки, который определяется одним из ключевых слов: solid, dotted, dashed, double, groove, ridge, inset, outset, hidden и none. Значения hidden и none являются взаимозаменяемыми, они указывают, что рамка отсутствует.
border-colorЗадает цвет для рамки одним из следующих способов: имя цвета, шестнадцатеричное значение или RGB, выбрать подходящий цвет или значение можно с помощью таблицы цветов.
inheritУказывает, что значение наследуется от родительского элемента.

Пример


<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Пример</title>
  <style type="text/css">
    p { border: 5px solid red; }
  </style>
</head>

<body>
  <p>Здесь содержится какой-то текст.</p>
</body>
</html>


Результат данного примера в окне браузера:

Css нижняя граница блока — Вэб-шпаргалка для интернет предпринимателей!

Для управления границей элемента применяется универсальное свойство border . Это свойство позволяет установить в одном объявлении толщину, стиль и цвет границы элемента.

Свойство border: краткая информация

Значение по умолчаниюЗависит от элемента
ПрименяетсяК любым элементам
НаследуетсяНет
Ссылка на спецификациюhttp://www.w3.org/TR/CSS21/box.html#propdef-border

Эти три свойства (толщину, стиль и цвет границы) можно установить в одном объявлении. Вот пример:

Можно указать стиль границы только на одной стороны элемента. Для этого применяют свойства border-top (верхняя граница), border-right (правая граница), border-bottom (нижняя граница), border-left (левая граница).

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

Подумайте, как при помощи CSS можно создать такую фигуру:

Значения границы — толщину, стиль и цвет — можно задать отдельно используя специальные свойства.

  • border-style — стиль границы.
  • border-width — ширина границы.
  • border-color — цвет границы.

Рассмотрим каждое из значений по отдельности.

Свойство border-style. Стиль границы.

Свойство border-style устанавливает стиль рамки. В CSS, в отличии HTML, граница элемента может быть не только сплошной. Допустимы следующие значения для стиля границы:

  1. none — граница отсутствует (по умолчанию).
  2. solid — сплошная граница.
  3. double — двойная граница.
  4. dashed — пунктирная граница.
  5. dotted — граница из ряда точек.
  6. ridge — граница «гребень».
  7. groove — граница «бороздка».
  8. inset — вдавленная граница.
  9. outset — выдавленная граница.

Примеры того, как они выглядят.

Кстати, если для рамки ridge задать цвет границы чёрный, то получится вот такой результат.

Рамка выглядит как solid , но это потому что стиль ridge создаётся добавлением чёрного эффекта тени, а чёрный эффект на чёрной рамке не виден.

При помощи свойства border-style стиль границы может быть задан не только для всех сторон блока. Есть возможность задавать несколько значений одному свойству border-style , в зависимости от числа значений стиль границы будет присвоен разному числу сторон блока. Можно задать одно, два, три и четыре значения. Давайте рассмотрим примеры для каждого случая.

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

Для установки толщины границы элемента используется свойство border-width . Толщину границы можно задать в любых абсолютных единицах измерения, например в пикселах.

Как и для свойства border-style , для свойства также можно задавать от одного до четырёх значений. Рассмотрим примеры для каждого случая.

Также для свойства border-width существуют значения в виде ключевых слов. Всего их три:

  • thin — тонкая граница;
  • medium — средняя толщина;
  • thick — толстая граница;

Свойство border-color. Цвет границы.

Для управления цветом границы используется средство border-color . Цвета для этого свойства можно задать используя любой способ, описанный в статье «Цвета в CSS», а именно:

  • Шестнадцатеричная запись ( #ff00aa ) цвета.
  • Формат RGB — rgb(255,12,110) . Формат RGBA для CSS3.
  • Форматы HSL и HSLA для CSS3.
  • Название цвета, например black (чёрный). Полный список названий цветов приведён в таблице названий цветов CSS.

Свойство border-color также может иметь от одного до четырёх значений и обрабатывает их аналогично предыдущим свойствам.

Теперь вернёмся к задаче, озвученной выше, и нарисуем фигуру:

Вот код, который рисует такую фигуру, только побольше размером:

Установка значений для сторон отдельно

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

  • border-top (верхняя граница)
  • border-right (правая граница)
  • border-bottom (нижняя граница)
  • border-left (левая граница)

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

Параметры верхней границы ( border-top ).

  • border-top-color — задаёт цвет верхней границы элемента.
  • border-top-width — задаёт толщину верхней границы элемента.
  • border-top-style — задаёт стиль верхней границы элемента.

Параметры правой границы ( border-right ).

  • border-right-color — задаёт цвет правой границы элемента.
  • border-right-width — задаёт толщину правой границы элемента.
  • border-right-style — задаёт стиль правой границы элемента.

Параметры нижней границы ( border-bottom ).

  • border-bottom-color — задаёт цвет нижней границы элемента.
  • border-bottom-width — задаёт толщину нижней границы элемента.
  • border-bottom-style — задаёт стиль нижней границы элемента.

Параметры левой границы ( border-left ).

  • border-left-color — задаёт цвет левой границы элемента.
  • border-left-width — задаёт толщину левой границы элемента.
  • border-left-style — задаёт стиль левой границы элемента.

Пример использования этих свойств:

Свойство border-radius. Округление углов границы.

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

Значениями могут быть любые числа, используемые в CSS.

Если рамка блока не задана, то скругление происходит с фоном. Вот пример закругления блока без рамки, но с фоновым цветом:

Существуют свойства для скругленя каждого отдельно угла элемента. В этом примере использованы они все:

Хотя этот код можно записать одним объявлением: border-radius : 15px 0 15px 0 . Дело в том, что для свойства border-radius можно задавать от одного до четырёх значений. В таблице ниже приведены правила, которые определяют такие объявления.

Табл. Свойство border-radius

Число значенийРезультат
1Радиус указывается для всех углов блока.
2Первое значение задает радиус верхнего левого и нижнего правого угла, второе значение — верхнего правого и нижнего левого угла.
3Первое значение задает радиус для верхнего левого угла, второе — устанавливает радиус верхнего правого и нижнего левого углов одновременно, а третье — для нижнего правого уголка.
4По очереди устанавливает радиус для верхнего левого, верхнего правого, нижнего правого и нижнего левого углов.

Внимательно изучив эту таблицу можно понять, что самая короткая запись нужного стиля будет такой: border-radius : 15px 0 . Всего два значения.

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

Что представляет из себя граница элемента? Граница это обычная линия, которая располагается между внутренним (padding) и внешним (margin) отступом вокруг содержимого элемента.

Рис. 82 Границы элемента в CSS.

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

Для придания особого вида границ элемента в CSS используются следующие универсальные свойства:

CSS свойство border-color устанавливает цвет для всех границ в одном объявлении. Это свойство может иметь от одного до четырех значений.

Для запоминания порядка расстановки цветов, ширины и стиля границы в одном объявлении, можно использовать английское слово TRouBLe (где: T — top, R — right, B — bottom, L — left). По такому же принципу задаются отступы в ранее рассмотренных свойствах padding (внутренние отступы) и margin (внешние отступы).

Определить цвет границы вы можете в любой системе задания цвета (HEX, RGB, RGBA, HSL, HSLA, «предопределённые цвета»). Если вы пропустили тему «Цветовое оформление в CSS», то вы можете вернуться для её изучения.

Для простоты и понимания принципа указания цвета границ рассмотрим пример с использованием предопределённых цветов:

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

Результат нашего примера:

Рис. 83 Пример указания цвета границ элемента.

Как вы могли заметить, в данном примере мы также использовали универсальные свойства, которые отвечают за ширину (border-width) и стиль границы (border-style).

Свойство border-width устанавливает ширину для всех границ в одном объявлении. Это свойство может иметь от одного до четырех значений. За исключением процентных значений вы можете использовать любые единицы измерения CSS, либо ключевые слова:

  • thin (тонкая линия).
  • medium (средняя линия) – это значение по умолчанию.
  • thick (толстая линия).

    • Давайте рассмотрим следующий пример:

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

    Результат нашего примера:

    Рис. 84 Пример установки ширины границ.

    Мы уже не раз с Вами сталкивались с применением стиля границы (border-style) элементов, но при этом все время использовали сплошную границу (значение solid ), давайте рассмотрим все возможные значения, которые допускается использовать:

    ЗначениеОписание
    none
    Указывает на отсутствие границы. Это значение по умолчанию.hiddenУказывает на отсутствие границы как и значение none , но имеет более высокий приоритет.
    Например, если в таблице для первой ячейки задано значение none , а для второй (соседней) задана видимая граница, то граница между ячейками отображается. Если для первой ячейки таблицы задано значение hidden , а для второй (соседней) задана видимая граница, то граница между ячейками не будут отображаться.dottedТочечная граница.dashedПунктирная граница.solidСплошная граница.doubleДвойная граница.grooveОтображает границы с 3d эффектом (противоположно значению ridge ).ridgeОтображает границы с 3d эффектом (противоположно значению groove ).insetОтображает границы с 3d эффектом (противоположно значению outset ).
    При применении к ячейке таблицы с border-collapse : «collapse» — это значение ведет себя как groove .outsetОтображает границы с 3d эффектом (противоположно значению inset ).
    При применении к ячейке таблицы с border-collapse : «collapse» — это значение ведет себя как ridge .

    Давайте рассмотрим пример использования:

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

    Результат нашего примера:

    Рис. 85 Пример указания стиля границ элемента.

    Универсальное свойство border

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

    Рис. 86 Универсальное свойство border.

    CSS свойство border позволяет установить все свойства границ в одном объявлении. На вышеуказанном изображении мы задаем сплошную границу шириной 10 пикселей черного цвета. Разрешается использовать объявление, в котором одно из значений отсутствует. Если вы опускаете какое-то значение, то значение получает значение по умолчанию:

    ЗначениеОписание
    border-widthЗадает ширину границы. По умолчанию — «medium» .
    border-styleЗадает стиль границы. По умолчанию — «none».
    border-colorЗадает цвет границы. По умолчанию — цвет элемента.

    Давайте рассмотрим следующий пример:

    В данном примере для первого блока мы указали сплошную границу шириной 4px оранжевого цвета, а для второго пунктирную границу шириной 0.2em красного цвета:

    Результат нашего примера:

    Рис. 87 Пример использования свойства border.

    Обращаю Ваше внимание, что если вы используете пунктирную или точечную границы для элемента, то будьте готовы к тому, что браузеры размещают линию границ поверх цвета заднего фона, то есть это значит, что цвет фона будет виден в промежутках между точками, либо пунктира — это значение по умолчанию для всех элементов. В скором времени в статье учебника «Работа с фоном элемента в CSS» мы более подробно рассмотрим с Вами работу с задним фоном элемента, и научимся определять область элемента для которой будет задаваться задний фон, что при необходимости позволит нам избежать подобной ситуации.

    Использование свойств для одиночных границ

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

    • border-top (устанавливает все свойства верхней границы в одном объявлении).
    • border-right (устанавливает все свойства правой границы в одном объявлении).
    • border-bottom (устанавливает все свойства нижней границы в одном объявлении).
    • border-left (устанавливает все свойства левой границы в одном объявлении).

    Эти свойства работают аналогично свойству border, разница заключается лишь в том, что используя свойство border-* вы стилизуете выбранную сторону, а не все стороны сразу. Разрешается использовать объявление, в котором одно из значений отсутствует. Если вы опускаете какое-то значение, то значение получает значение по умолчанию. Принцип работы свойства изображен ниже:

    Рис. 88. Пример работы универсального свойства border-top.

    В данном примере мы задаем сплошную границу шириной 10 пикселей черного цвета для верхней границы.

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

    • border-top-width (устанавливает ширину верхней границы).
    • border-top-style (устанавливает стиль верхней границы).
    • border-top-color (устанавливает цвет верхней границы).
    • border-right-width (устанавливает ширину правой границы).
    • border-right-style (устанавливает стиль правой границы).
    • border-right-color (устанавливает цвет правой границы).
    • border-bottom-width (устанавливает ширину нижней границы).
    • border-bottom-style (устанавливает стиль нижней границы).
    • border-bottom-color (устанавливает цвет нижней границы).
    • border-left-width (устанавливает ширину левой границы).
    • border-left-style (устанавливает стиль левой границы).
    • border-left-color (устанавливает цвет левой границы).

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

    В данном примере для абзаца с классом primer1 мы указали универсальным свойством border-left сплошную границу с левой стороны шириной 4 пикселя фиолетового цвета, а для нижней границы указали, что она будет сплошная шириной 0.1em (по умолчанию черного цвета).

    Для абзаца с классом primer2 универсальным свойством border мы указали для всех сторон элемента сплошную границу размером 1 пиксель зеленого цвета, при этом свойством border-bottom-style со значением none мы убрали границу снизу, а свойством border-left-w >3 пикселей .

    Результат нашего примера:

    Рис. 89 Пример использования свойств для одиночных границ.

    Скругление углов элемента.

    CSS 3 подарил нам такое универсальное свойство, как border-radius, оно позволяет нам определить форму границ элемента. Это свойство является короткой записью для следующих четырёх свойств:

    • border-top-left-radius (определяет форму верхнего левого угла).
    • border-top-right-radius (определяет форму верхнего правого угла).
    • border-bottom-right-radius (определяет форму нижнего правого угла).
    • border-bottom-left-radius (определяет форму нижнего левого угла).

    Радиус скругления применяется ко всему заднему фону, либо фоновому изображению (даже если у элемента отсутствуют границы).

    Рис. 90 Принцип работы свойства border-radius.

    1. Изображение под номером 1 — скругление углов отсутствует. Значение для элемента по умолчанию 0 (ноль).
    2. Изображение под номером 2 — скругление углов (по типу дуги окружности). Значение /-я (от одного до четырёх) указываются в единицах измерения CSS (px, em и так далее) и определяют radius (радиус) скругления. Значения для каждого радиуса задаются в следующем порядке: top-left (верхний левый угол), top-right (верхний правый угол), bottom-right (нижний правый угол), bottom-left (нижний левый).
    3. Это свойство позволяет нам создавать не только скругленные, но и эллиптические углы. Скругление углов происходит по типу дуги эллипса – изображение 3. Значения указываются в единицах измерения CSS (px, em и так далее).
    4. Порядок указания значений при скруглении по типу дуги эллипса следующий (изображение ниже): задаются значение /-я (от одного до четырёх) horisontal (горизонтального) радиуса скругления, а через косую черту задаются значение /-я (от одного до четырёх) vertical (вертикального). Допускается указывать значения в процентах. Отрицательные значения недопустимы.

    Рис. 91 Порядок указания значений для свойства border-radius
    (при скруглении углов по типу дуги эллипса).

    В данном примере мы установили для всех блоков ширину и высоту равной 50 пикселям , указали внешние и внутренние отступы, и указали сплошную границу 3 пикселя оранжевого цвета.

    Для демонстрации свойства border-radius создали 3 различных класса:

    • .orange — скругление всех углов элемента по типу дуги окружности. Одно значениедля всех углов.
    • .lemon — скругление всех углов элемента по типу дуги окружности. Указали 2 значения для углов, из которых: 1-ое значение — top-left и bottom-right, второе top-right и bottom-left.
    • .lime — скругление всех углов элемента по типу дуги эллипса. Мы указали два значения для горизонтального радиуса (1-ое значение top-left и bottom-right, второе top-right и bottom-left), а третее значение через косую черту задает вертикальный радиус всех четырех углов.

    Результат нашего примера:

    Рис. 92. Пример округления углов элемента в CSS.

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

    На примере border-bottom-left-radius (определяет форму нижнего левого угла):

    Рис. 93 Принцип работы свойства border-bottom-left-radius.

    1. Изображение под номером 1 — cкругление нижнего левого угла отсутствует. Значение элемента по умолчанию 0 (ноль).
    2. Изображение под номером 2 — cкругление нижнего левого угла (по типу дуги окружности). Значение указывается в единицах измерения CSS (px, em и так далее) и определяет radius (радиус) скругления. Допускается указывать значения в процентах. Отрицательные значения недопустимы.
    3. Изображение под номером 3 — cкругление нижнего левого угла (по типу дуги эллипса). Значения указываются в единицах измерения CSS (px, em и так далее), первое значение определяет horisontal (горизонтальный) радиус скругления, а второе vertical (вертикальный). Допускается указывать значения в процентах. Отрицательные значения недопустимы.

    Давайте рассмотрим пример, в котором укажем различные значения для свойства border-bottom-left-radius и посмотрим, что из этого выйдет:

    Результат нашего примера:

    Рис. 94 Пример скругления границы левого нижнего угла элемента в CSS.

    Мы с Вами рассмотрели 25 базовых свойств, которые вам будут необходимы в повседневной работе с границами элементов. При дальнейшем изучении CSS мы с Вами неоднократно будем возвращаться к этим свойствам.

    Вопросы и задачи по теме

    Перед тем как перейти к изучению следующей темы пройдите практические задания:

    • Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (два HTML файла) в любую папку на вашем жестком диске:
    • Используя полученные знания составьте следующее меню пагинации на странице:

    Практическое задание № 22.

    Продвинутое задание (составление меню пагинации с закругленными границами у стрелочек):

    Практическое задание № 23.

    Продвинутое задание (составление меню пагинации с закругленными границами у элементов с различными стилями при наведении):

    Практическое задание № 24.

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

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

    -moz-border-bottom-colors

    Устанавливает набор цветов для нижней границы элемента в Firefox.

    -moz-border-left-colors

    Устанавливает набор цветов для левой границы элемента в Firefox.

    -moz-border-right-colors

    Устанавливает набор цветов для правой границы элемента в Firefox.

    -moz-border-top-colors

    Устанавливает набор цветов для верхней границы элемента в Firefox.

    border

    Позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента.

    border-bottom

    Позволяет одновременно установить толщину, стиль и цвет границы внизу элемента.

    border-bottom-color

    Устанавливает цвет границы внизу элемента.

    border-bottom-style

    Устанавливает стиль границы внизу элемента.

    border-bottom-w >

    Устанавливает толщину границы внизу элемента.

    border-color

    Устанавливает цвет границы на разных сторонах элемента.

    border-image

    Используется для отображения рисованной рамки вокруг элемента.

    border-left

    Позволяет одновременно установить толщину, стиль и цвет левой границы элемента.

    border-left-color

    Задает цвет границы слева от элемента.

    border-left-style

    Устанавливает стиль границы слева от элемента.

    border-left-w >

    Устанавливает толщину границы слева от элемента.

    border-right

    Позволяет одновременно установить толщину, стиль и цвет правой границы элемента.

    border-right-color

    Задает цвет границы справа от элемента.

    border-right-style

    Устанавливает стиль границы справа от элемента.

    border-right-w >

    Устанавливает толщину границы справа от элемента.

    border-style

    Устанавливает стиль границы вокруг элемента.

    border-top

    Позволяет одновременно установить толщину, стиль и цвет границы сверху элемента.

    border-top-color

    Задает цвет границы сверху элемента.

    border-top-style

    Устанавливает стиль границы сверху элемента.

    border-top-w >

    Устанавливает толщину границы сверху элемента.

    border-w >

    Задает толщину границы одновременно на всех сторонах элемента или индивидуально для каждой стороны.

    outline

    Универсальное свойство, одновременно устанавливающее цвет, стиль и толщину внешней границы на всех четырех сторонах элемента.

    outline-color

    Задает цвет внешней границы элемента.

    outline-offset

    Устанавливает расстояние между рамкой, созданной с помощью свойства outline, и краем или границей элемента добавленной через border.

    Рекомендуем к прочтению

    Граница в CSS | Учебные курсы

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

    Типы границ и их положение

    Граница в CSS состоит из трёх свойств:

    Также граница может быть задана на четырёх возможных сторонах:

    • border-top
    • border-bottom
    • border-left
    • border-right
    blockquote { border-color: yellow; border-style: solid; border-width: 1px; }

    Сокращённое свойство border позволяет определить все три свойства сразу:

    blockquote { border: 1px solid yellow; }

    Единственная граница

    Если вы хотите установить границу только на одной из четырёх сторон, вам необходимо включить положение границы в свойство CSS. К примеру, для нижней границы вы можете написать:

    blockquote { border-bottom-color: yellow; border-bottom-style: solid; border-bottom-width: 1px; }

    Что касается свойства border, у каждой стороны есть своя сокращённая версия:

    blockquote { border-bottom: 1px solid yellow; }

    Что делать, если мне надо три границы? Должен ли я установить их отдельно?

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

    blockquote { border: 1px solid yellow; border-left: none; }

    Сокращённые комбинации

    Поскольку существуют три свойства границы и четыре положения границ, получается 12 возможных комбинаций:

    borderborder-colorborder-styleborder-width
    border-topborder-top-colorborder-top-styleborder-top-width
    border-bottomborder-bottom-colorborder-bottom-styleborder-bottom-width
    border-leftborder-left-colorborder-left-styleborder-left-width
    border-rightborder-right-colorborder-right-styleborder-right-width

    Доступно довольно много свойств. В конечном итоге вы будете обычно использовать только пять сокращённых версий:

    • border
    • border-top
    • border-bottom
    • border-left
    • border-right

    CSS Границы

    Свойства границы CSS

    Свойства границы CSS позволяют вам указать стиль, ширину и цвет границы элемента.

    У меня бордюры со всех сторон.

    У меня нижняя граница красная.

    У меня синяя левая рамка.

    Стиль границы CSS

    Свойство стиля границы указывает, какой тип границы отображать.

    Допускаются следующие значения:

    • пунктирная - определяет пунктирную границу
    • пунктирная - определяет пунктирную границу
    • solid - определяет сплошную границу
    • double - определяет двойную границу
    • канавка - Определяет трехмерную рифленую границу.Эффект зависит от значения цвета границы

      • .

    • гребень - определяет трехмерную гребенчатую границу. Эффект зависит от значения цвета границы

      • .

    • вставка - Определяет границу вставки 3D. Эффект зависит от значения цвета границы

      • .

    • начало - Определяет исходную трехмерную границу. Эффект зависит от значения цвета границы

      • .

    • нет - не определяет границы
    • скрытый - определяет скрытую границу

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

    Пример

    Демонстрация различных стилей границ:

    p.dotted {border-style: dotted;}
    p.dashed
    {border-style: dashed;}
    p.solid {border-style: solid;}
    p.double
    {border-style: double;}
    стр. канавка {border-style: groove;}
    стр. гребень
    {border-style: ridge;}
    p.inset {border-style: inset;}
    p.outset
    {border-style: outset;}
    p.none {border-style: none;}
    p.hidden {border-style: hidden;}
    п.mix {border-style: пунктирная штриховая сплошная двойная;}

    Результат:

    Пунктирная граница.

    Пунктирная граница.

    Сплошная рамка.

    Двойная рамка.

    Кайма паза. Эффект зависит от значения цвета границы.

    Бордюр коньковый. Эффект зависит от значения цвета границы.

    Внутренний бордюр. Эффект зависит от значения цвета границы.

    Начальная граница. Эффект зависит от значения цвета границы.

    Без границы.

    Скрытая граница.

    Смешанная граница.

    Попробуй сам "

    Примечание: Ни одно из ДРУГИХ свойств границы CSS (о которых вы узнаете больше в следующих главах) не будет иметь ЛЮБОГО эффекта, если только
    border-style свойство установлено!

    .

    CSS свойство границы

    Пример

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

    h2 {
    граница: 5 пикселей сплошной красный;
    }

    h3 {
    граница: синий пунктир 4px;
    }

    дел {
    граница:
    двойной;
    }

    Попробуй сам "

    Определение и использование

    Граница Свойство является сокращенным свойством:

    Если цвет границы опущен, применяется цвет текста.

    Значение по умолчанию: средний нет цвет
    Унаследовано: нет
    Анимируемое: да, посмотреть отдельные свойства . Прочитать про animatable
    Попробуй это
    Версия: CSS1
    Синтаксис JavaScript: объект .style.border = "сплошной синий 3 пикселя"
    Попробуй это

    Поддержка браузера

    Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.

    Объект
    граница 1,0 4,0 1,0 1.0 3,5

    Синтаксис CSS

    граница: ширина границы стиль границы цвет границы | начальный | наследование;

    Стоимость объекта

    Значение Описание
    ширина рамки Задает ширину границы. Значение по умолчанию - "средний"
    бордюрный Задает стиль границы.Значение по умолчанию - «нет»
    цвет рамки Задает цвет границы. Значение по умолчанию - цвет
    текст
    начальный Устанавливает для этого свойства значение по умолчанию. Читать про начальные
    наследовать Наследует это свойство от своего родительского элемента. Читать про наследство

    Связанные страницы

    Учебник

    CSS: Граница CSS

    Учебник

    CSS: модель коробки CSS

    Ссылка на HTML DOM: свойство границы

    .

    CSS свойство стиля границы

    Дополнительные примеры "Попробуйте сами" ниже.

    Определение и использование

    Свойство border-style устанавливает стиль четырех границ элемента. Это свойство может иметь от одного до четырех значений.

    Примеры:

    • обрамление: сплошная пунктирная двойная штриховка;
      • верхняя граница пунктирная
      • правая граница сплошная
      • нижняя граница двойная
      • левая граница пунктирная

    • обрамление: сплошная двойная пунктирная линия;
      • верхняя граница пунктирная
      • правая и левая границы сплошные
      • нижняя граница двойная

    • обрамление: сплошная пунктирная линия;
      • верхняя и нижняя границы пунктирные
      • правая и левая границы сплошные

    • обрамление: пунктирная;
      • все четыре границы пунктирны
    Значение по умолчанию: нет
    Унаследовано: №
    Анимируемый: нет.Прочитать о animatable
    Версия: CSS1
    Синтаксис JavaScript: объект .style.borderStyle = "двойной пунктир"
    Попробуй это

    Поддержка браузера

    Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.

    Имущество
    с рамкой 1.0 4,0 1,0 1,0 3,5

    Примечание: Значение «скрытый» не поддерживается в IE7 и более ранних версиях. IE8 требует! DOCTYPE. IE9 и более поздние версии поддерживают «скрытый».

    Синтаксис CSS

    стиль границы: нет | скрытый | пунктирный | пунктирный | сплошной | двойной | канавка | гребень | вставка | начало | начальный | наследование;

    Стоимость недвижимости

    Значение Описание Играй
    нет Значение по умолчанию.Указывает без рамки Играй »
    скрыто То же, что «нет», за исключением пограничного конфликта
    разрешение элементов стола    		 Играй »
    с точками Задает пунктирную границу. Играй »
    штриховая Определяет пунктирную границу Играй »
    цельный Задает сплошную границу Играй »
    двойной Задает двойную границу Играй »
    паз Задает трехмерную рифленую границу.Эффект зависит от
    значение цвета границы    		 Играй »
    гребень Задает трехмерную ребристую границу. Эффект зависит от
    значение цвета границы    		 Играй »
    вставка Определяет границу вставки 3D. Эффект зависит от
    значение цвета границы    		 Играй »
    начало Задает исходную трехмерную границу.Эффект зависит от
    значение цвета границы    		 Играй »
    начальный Устанавливает для этого свойства значение по умолчанию. Читать о начальная Играй »
    наследовать Наследует это свойство от своего родительского элемента. Читать про наследство

    Другие примеры

    Пример

    Граница паза:

    div {
    стиль границы: канавка;
    бордюрный цвет: коралл;
    ширина границы: 7 пикселей;
    }

    Попробуй сам "

    Пример

    Бордюр гребня:

    div {
    border-style: гребень;
    бордюрный цвет: коралл;
    ширина границы: 7 пикселей;
    }

    Попробуй сам "

    Пример

    Внутренний бордюр:

    div {
    стиль границы: вставка;
    бордюрный цвет: коралл;
    ширина границы: 7 пикселей;
    }

    Попробуй сам "

    Пример

    Начальная граница:

    div {
    border-style: начало;
    бордюрный цвет: коралловый;
    ширина границы: 7 пикселей;
    }

    Попробуй сам "

    Пример

    Установить разные границы с каждой стороны элемента:

    п.один {border-style: пунктирная сплошная пунктирная двойная;}
    p.two {border-style: пунктирная сплошная пунктирная;}
    p.three {border-style: dotted solid;}
    p.four {border-style: dotted;}

    Попробуй сам "

    Связанные страницы

    Учебник

    CSS: CSS Border

    Ссылка

    HTML DOM:
    borderStyle свойство

    .

    CSS Border Sides

    Граница CSS - отдельные стороны

    Из примеров на предыдущих страницах вы увидели, что можно указать
    разные границы для каждой стороны.

    В CSS также есть свойства для определения каждой границы (вверху,
    справа, снизу и слева):

    Пример

    п
    {

    граница-верх-стиль: пунктирная;

    стиль границы-справа: сплошной;
    стиль нижней границы: пунктирная;
    граница-левый-стиль: сплошной;
    }

    результат:

    Попробуй сам "

    Пример выше дает тот же результат, что и этот:

    Итак, вот как это работает:

    Если свойство стиля границы имеет четыре значения:

    • обрамление: сплошная пунктирная двойная штриховка;
      • верхняя граница пунктирная
      • правая граница сплошная
      • нижняя граница двойная
      • левая граница пунктирная

    Если свойство стиля границы имеет три значения:

    • обрамление: сплошная двойная пунктирная линия;
      • верхняя граница пунктирная
      • правая и левая границы сплошные
      • нижняя граница двойная

    Если свойство стиля границы имеет два значения:

    • обрамление: сплошная пунктирная линия;
      • верхняя и нижняя границы пунктирные
      • правая и левая границы сплошные

    Если свойство стиля границы имеет одно значение:

    • граница: пунктирная;
      • все четыре границы пунктирны

    Пример

    / * Четыре значения * /
    p {
    border-style: пунктирная сплошная двойная штриховка;
    }

    / * Три
    values ​​* /
    p {
    border-style: сплошная двойная пунктирная линия;
    }

    / * Два значения * /
    p {
    border-style: сплошная пунктирная линия;
    }

    / * Одно значение * /
    p {
    border-style: dotted;
    }

    Попробуй сам "

    В приведенном выше примере используется свойство стиля границы .Однако он также работает с
    ширина границы
    и цвет рамки .

    .

    No related posts.

    Share :

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

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