Установка границ элементов в CSS
http://belarusweb.net
Основы создания сайтов

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

Стиль границ элемента,
css-свойство border-style и его производные

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

Для установки стиля границ используются следующие ненаследуемые свойства border-style, border-top-style, border-bottom-style, border-left-style, border-right-style (см. пример 3.3). Все они могут принимать ряд значений, которые определяют внешний вид границы:

  • none – граница не отображается, браузер обнуляет ее толщину (значение используется по умолчанию);
  • hidden – в принципе тоже самое, что и none, за исключением того, что в случае применения данного значения к границам ячеек таблицы, у которой значение свойства border-collapse установлено как collapse, граница вокруг ячейки не будет отображаться вообще, включая и совмещенные границы смежных ячеек;
  • dotted – линия границы будет иметь точечный вид;
  • dashed – линия границы будет иметь пунктирный вид;
  • solid – линия границы будет сплошной;
  • double – линия границы будет двойной;
  • groove – линия границы будет иметь объемный рифленый вид с эффектом вдавленности;
  • ridge – линия границы будет иметь объемный рифленый вид с эффектом выпуклости;
  • inset – линия границы будет иметь объемный вид с эффектом вдавленности;
  • outset – линия границы будет иметь объемный вид с эффектом выпуклости.
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Установка границ элементов</title>
	<style>
		.b_s{
		border-color: red;
		border-width: 5px;
		}
	</style>
</head>
<body>
	<span style="border-style: dotted" class="b_s">dotted</span>&nbsp;
	<span style="border-style: dashed" class="b_s">dashed</span>&nbsp;
	<span style="border-style: solid" class="b_s">solid;</span>&nbsp;
	<span style="border-style: double" class="b_s">double</span>&nbsp;
	<br><br>
	<span style="border-style: groove" class="b_s">groove</span>&nbsp;
	<span style="border-style: ridge" class="b_s">ridge</span>&nbsp;
	<span style="border-style: inset" class="b_s">inset</span>&nbsp;
	<span style="border-style: outset" class="b_s">outset</span>&nbsp;
</body>
</html>

Пример 3.3. Определение внешнего вида границ элементов (пример №1)

Следует отметить, что свойство border-style может принимать через пробел два, три или даже четыре значения (см. пример 3.4):

  • одно значение – стиль задается для всех четырех сторон элемента;
  • два значения – первое значение задает стиль верхней и нижней границы элемента, второе – правой и левой;
  • три значения – первое значение задает стиль верхней границы элемента, второе – правой и левой, третье – нижней границы элемента;
  • четыре значения – границы устанавливаются по часовой стрелке: верхняя, правая, нижняя и левая.
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Установка границ элементов</title>
	<style>
		.b_s{
		border-color: blue;
		border-width: 5px;
		}
	</style>
</head>
<body>
	<span style="border-style: dotted outset" class="b_s">
		dotted outset
	</span> &nbsp;
	
	<span style="border-style: dashed solid double" class="b_s">
		dashed solid double
	</span> &nbsp;
	
	<span style="border-style: dashed solid dotted double" class="b_s">
		dashed solid dotted double
	</span><br><br>
		
	<span style="border-bottom-style: double" class="b_s">
		double
	</span>
</body>
</html>

Пример 3.4. Определение внешнего вида границ элементов (пример №2)

Если нет необходимости задавать сразу все четыре границы элемента или нужно установить (изменить) стиль границы одной отдельной стороны, следует воспользоваться одним из свойств border-top-style, border-bottom-style, border-left-style или border-right-style (см. пример 3.4).

Ширина границ элемента,
css-свойство border-width и его производные

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

  • ширина – принимаются любые единицы измерения, используемые в CSS;
  • thin – устанавливает тонкую ширину границы;
  • medium – устанавливает среднюю ширину границы;
  • thick – устанавливает толстую ширину границы.

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Установка границ элементов</title>
	<style>
		.b_s_1{
		width: 300px;
		border-style: solid;
		border-color: #0000ff;
		border-bottom-width: 8px;
		}
		.b_s_2{
		width: 300px;
		border-style: solid;
		border-right-color: violet;
		border-left-width: 8px;
		}
	</style>
</head>
<body>
	<p  class="b_s_1">
		Ширина нижней границы равна 8px, а ширина остальных<br>
		устанавливается браузером по умолчанию.
	</p> 
	<p class="b_s_2">
		Граница правой стороны имеет фиолетовый цвет, остальные<br>
		имеют цвет, устанавливаемый браузером по умолчанию.
	</p> 
	<p style="border-bottom: double red 2px; width: 300px;">
		Заданы характеристики нижней границы.
	</p>
</body>
</html>

Пример 3.5. Определение внешнего вида границ элементов (пример №3)

Цвет границ элемента,
css-свойство border-color и его производные

Для установки цвета границ используются ненаследуемые свойства border-color, border-top-color, border-bottom-color, border-left-color, border-right-color (см. пример 3.5). Все они принимают в качестве значений цвет либо специальное значение transparent, делающее рамку прозрачной (бесцветной), при этом сама граница остается, влияя на размеры элемента. Свойство border-color, кроме того, может принимать через пробел два, три или даже четыре значения, которые задают цвет границ по описанному выше алгоритму (смотреть).

Универсальные css-свойства border,
border-top, border-bottom, border-right и border-left

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

Скругление границ элемента,
css-свойство border-radius и его производные

Внешний вид границ элементов можно также изменять за счет величины скругления углов границ элементов. Делается это за счет использования ненаследуемых ствойств border-radius, border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius. Все они принимают в качестве радиуса значения в любых доступных в CSS единицах измерения, а также процентах, отсчет которых производится относительно ширины блока. Также можно через слэш '/' задавать сразу два радиуса, если подразумевается сгругление по эллипсу (см. рис. 3.6 и пример 3.7). Свойства срабатывают и при отсутствии границ, в этом случае происходит скругление фона элемента.

Рис. 3.6. Схема скругления углов рамки элемента

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Установка границ элементов</title>
	<style>
		.b_s_1{
		width: 250px;
		border-style: solid;
		border-color: #ff0000;
		border-radius: 10em 0.5em/1em;
		}
		.b_s_2{
		width: 250px;
		border-style: solid;
		border-color: violet;
		border-bottom-left-radius: 8px;
		border-bottom-right-radius: 30%;
		}
	</style>
</head>
<body>
	<p  class="b_s_1">
		<br>&nbsp; border-radius: 10em 0.5em/1em<br><br>
	</p> 
	<p class="b_s_2">
		<br>&nbsp; border-bottom-right-radius: 30%<br>
		&nbsp; border-bottom-left-radius: 8px<br><br>
	</p> 
</body>
</html>

Пример 3.7. Определение внешнего вида границ элементов (пример №4)

Свойство border-radius, кроме того, может принимать через пробел два, три или даже четыре значения:

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

Внешняя рамка элемента, css-свойства outline,
outline-style, outline-width и outline-color

Если необходимо выделить элемент внешней рамкой, при этом не влияя на его размеры или положение в документе, используются ненаследуемые свойства outline, outline-style, outline-width, outline-color (см. пример 3.8). Все они могут принимать практически те же значения, что и соответствующие свойства, использующиеся для определения внешнего вида границ элементов. Отличие есть только у свойства outline-color, принимающего вместо специального значения transparent значение invert, которое указывает браузеру на необходимость инверсии цвета для того, чтобы гарантировать видимость границы при любом цвете фона элемента.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Установка границ элементов</title>
	<style>
		.b_s_1{
		border: solid 5px red;
		outline: dashed 5px green;
		outline-offset: 8px;
		}
		.b_s_2{
		border: solid 5px violet;
		outline: groove 8px orange;
		outline-offset: 3px;
		}
	</style>
</head>
<body>
	<br>&nbsp; &nbsp; 
	<span  class="b_s_1">
		Расстояние между границами равно 8px.
	</span> 
	<br><br><br><br>&nbsp; &nbsp; 
	<span  class="b_s_2">
		Расстояние между границами равно 3px.
	</span> 
</body>
</html>

Пример 3.8. Определение внешнего вида границ элементов (пример №5)

Расстояние между внешней и внутренней границами,
css-свойство outline-offset

Для внешних границ дополнительно определено еще одно полезное ненаследуемое свойство outline-offset, которое позволяет задавать расстояние между внешней и внутренней границами. В качестве значения свойство принимает величину расстояния в любых доступных единицах измерения CSS (см. пример 3.8). Кроме того, разрешается использовать и отрицательные значения, тогда рамка будет отображена внутри самого элемента.

/* Обнуляем отступы */
*{
margin: 0;		/* Обнуляем внешние отступы */
padding: 0;		/* Обнуляем внутренние отступы */
outline: 0;		/* Обнуляем толщину внешней границы */
line-height: 1;	/* Задаем высоту строки */
}

/* Остальные стили */

Пример 3.8.1. Обнуление внешних отступов элементов

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

Создание теней, css-свойство box-shadow

Вместо использования внешней рамки имеется возможность эффективного выделения элементов при помощи теней. Для этого применяется ненаследуемое свойство box-shadow, которое создает одну или несколько теней, значения которых тогда нужно перечислять через запятую. Формат записи свойства имеет вид {box-shadow: смещение_x смещение_y размытие растяжение цвет inset} (см. пример 3.9), где:

  • смещение_x – обязательный параметр, который в случае положительных значений смещает тень относительно элемента по горизонтали вправо, а в случае отрицательных значений – влево; если значение параметра равно нулю, то смещение отсутствует;
  • смещение_y – обязательный параметр, который в случае положительных значений смещает тень относительно элемента вверх, а в случае отрицательных значений – вниз; если значение параметра равно нулю, то смещение отсутствует;
  • размытие – необязательный параметр, который устанавливает радиус размытия тени; чем больше радиус, тем больше тень становится размытой и осветвленной, особенно по краям; если параметр не указывается, то браузер по умолчанию установит радиус размытия равный нулю, в результате чего тень будет полностью четкой с резким контуром;
  • растяжение – необязательный параметр, который в случае положительного значения растягивает тень, а в случае отрицательного значения сжимает тень; если же значение не будет установлено, то браузер по умолчанию установит растяжение равное нулю и тень будет иметь те же размеры, что и элемент;
  • цвет – определяет цвет тени; т.к. браузеры по умолчанию задают разный цвет тени, то желательно всегда задавать этот необязательный параметр;
  • inset – тень будет выводиться внутри элемента, при этом она будет располагаться над фоном, но под любым содержимым элемента; данный параметр не является обязательным и может применяться как в качестве первого параметра, так и последнего в списке;
  • none – тень добавляться не будет (используется по умолчанию).
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Установка теней элементов</title>
	<style>
		.size_1{
		width: 300px;
		height: 100px;
        }
		.p_1{
		border: solid 5px red;
		background-color: yellow;
		box-shadow: 10px 10px 50px 15px blue;
        }
		.p_2{
		border: solid 5px orange;
		background-color: violet;
		box-shadow: 5px 5px 8px 10px blue inset,
					10px 10px 8px 10px green,
					15px 15px 8px 10px red
		}
	</style>
</head>
<body>
	<p  class="p_1 size_1">
		Одна тень.
	</p> <br><br><br>
	
	<p  class="p_2 size_1">
		Несколько теней.
	</p> 
</body>
</html>

Пример 3.9. Использование свойства box-shadow

Для указания числовых значений параметров свойства box-shadow разрешается использовать все доступные в CSS единицы измерения, а для указания цвета использовать все доступные в CSS цветовые модели.