border-bottom-style

Internet Explorer		Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	8.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

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

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

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

Устанавливает стиль границы внизу элемента. Свойство применимо ко всем элементам, создано в версии CSS2, но проходит валидацию согласно версии CSS3.

Синтаксис

Значения

none: Линия не отображается и значение ее толщины обнуляется.
hidden: Имеет тот же эффект, что и none за исключением применения border-bottom-style к ячейкам таблицы, у которой значение свойства border-collapse установлено как collapse. В этом случае нижняя граница в ячейке не будет отображаться вообще.
dotted: Линия состоящая из набора точек.
dashed: Пунктирная линия, состоящая из серии коротких отрезков.
solid: Сплошная линия.
double: Двойная линия.
groove: Создает эффект вдавленной линии.
ridge: Создает эффект рельефной линии.
inset: Псевдотрехмерная линия.
outset: Псевдотрехмерная линия.
inherit: Наследует значение родителя.

Вид указанных стилей представлен на рис.

Рис. Стили границ

Дополнительные значения border-bottom-style в табличном виде

Значение	Описание
none	Нет границы, равносильно что и ширина границы равно нулю
hidden	Скрытая граница,не отображает границу но в блочной модели учитывается ширина границы
dotted	Серия точек
dashed	Пунктирная линия
solid	Сплошная линия
double	Двойная сплошная линия
groove	Выглядит как будто содержимое выдавлено из фона
ridge	Выглядит как будто содержимое вдавлено в фон
inset	Выглядит как будто содержимое,это нажатая кнопка
outset	Выглядит как будто содержимое,это не нажатая кнопка
inherit	Наследует значение от родителя

Пример применения свойства

<!DOCTYPE html>
<html lang="ru">
<head>
<title>Свойство border-bottom-style</title>
<style type="text/css">
<!--
.none {
border-bottom-width:20px;
border-bottom-color:red;
border-bottom-style:none;
color: yellow;
font-size: 20px;
text-decoration:blink;
}
.hidden {
border-bottom: 20px;
border-bottom-color:red;
border-bottom-style:hidden;
color: yellow;
font-size: 20px;
text-decoration:blink;
}
.dotted {
border-bottom: 20px;
border-bottom-color:red;
border-bottom-style:dotted;
color: yellow;
font-size: 20px;
text-decoration:blink;
}
.dashed {
border-bottom: 20px;
border-bottom-color:red;
border-bottom-style:dashed;
color: yellow;
font-size: 20px;
text-decoration:blink;
}
.solid {
border-bottom: 20px;
border-bottom-color:red;
border-bottom-style:solid;
color: yellow;
font-size: 20px;
text-decoration:blink;
}
.double {
border-bottom: 20px;
border-bottom-color:red;
border-bottom-style:double;
color: yellow;
font-size: 20px;
text-decoration:blink;
}
.groove {
border-bottom: 20px;
border-bottom-color:red;
border-bottom-style:groove;
color: yellow;
font-size: 20px;
text-decoration:blink;
}
.ridge {
border-bottom: 20px;
border-bottom-color:red;
border-bottom-style:ridge;
color: yellow;
font-size: 20px;
text-decoration:blink;
}
.inset {
border-bottom: 20px;
border-bottom-color:red;
border-bottom-style:inset;
color: yellow;
font-size: 20px;
text-decoration:blink;
}
.outset {
border-bottom: 20px;
border-bottom-color:red;
border-bottom-style:outset;
color: yellow;
font-size: 20px;
text-decoration:blink;
}
-->
</style>
</head>
<body>
<center>
<div class="none"><p>Стиль none нижней границы не указан</p></div>
<div class="hidden"><p>Стиль hidden скрыт но ширина осталась</p></div>
<div class="dotted"><p>Стиль dotted как серия точек</p></div>
<div class="dashed"><p>Стиль dashed как пунктирная линия</p></div>
<div class="solid"><p>Стиль solid как сплошная линия</p></div>
<div class="double"><p>Стиль double как двойная сплошная линия</p></div>
<div class="groove"><p>Стиль groove как будто содержимое выдавлено из фона</p></div>
<div class="ridge"><p>Стиль ridge как будто содержимое вдавлено в фон</p></div>
<div class="inset"><p>Стиль inset как будто содержимое,это нажатая кнопка</p></div>
<div class="outset"><p>Стиль outset как будто содержимое,это не нажатая кнопка</p></div>
</center>
<br>
</body>
</html>

Пример в действии

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

[window.]document.getElementById("elementID").style.borderBottomStyle

Браузеры

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

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

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

Источники: http://htmlbook.ru/ и http://delaisait.ucoz.ru/

Поделись ссылкой на эту страницу с друзьями:

Категория: Границы | Добавил: evkuriy (04.07.2013)

Просмотров: 503 | Рейтинг: 0.0/0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

border-bottom-style

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

Версии CSS

Описание

Синтаксис

Значения

Дополнительные значения border-bottom-style в табличном виде

Значение

Описание

Пример применения свойства

Пример в действии

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

Браузеры