border-bottom-style в CSS


Свойство CSS border-bottom-style

p
<
border-style:solid;
border-bottom-style:dotted;
>

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

Свойство CSS border-bottom-style задает стиль нижнего бордюра элемента.

Значение по умолчанию нет
Наследование нет
Версия CSS CSS 1
Синтаксис JavaScript object.style.borderBottomStyle=»dotted»

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

Свойство border-bottom-style поддерживается всеми основными браузерами.

Заметка: ни одна из версий IE (включая IE8) не поддерживает значение inherit или hidden.

свойство border-bottom-style

Свойство border-bottom-style определяет стиль нижней границы блока. Стиль нижней границы рамки, по умолчанию, не наследуется и считается невидимым. Стиль может принимать любое значение в соответствии со стандартом CSS 2.1 или CSS 3, либо значением inherit.

Доступные стили:

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

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

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

border-bottom-style

Свойство CSS border-bottom-style используется для создания рамки в нижней части элемента (нижней границы) и одновременного указания ее стиля (вида).

Для изменения стиля рамки сразу всех сторон элемента можно использовать свойство border-style, а если для всех сторон стиль одинаковый, то border.

Тип свойства

Применяется: ко всем элементам.

Значения

Значением свойства border-bottom-style являются ключевые слова задающие стиль рамки.

Возможные значения и их описание

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

Процентная запись: не существует.

Значение по умолчанию: none.

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

Синтаксис

Пример CSS: использование border-bottom-style

Результат. Использование свойства CSS border-bottom-style.

Версии CSS

Версия: CSS 1 CSS 2 CSS 2.1 CSS 3
Поддержка: Нет Да Да Да

Браузеры

Браузер: Internet Explorer Google Chrome Mozilla Firefox Opera Safari
Версия: 6.0 и 7.0 8.0 и выше 2.0 и выше 2.0 и выше 9.2 и выше 3.1 и выше
Поддержка: Частично Да Да Да Да Да

Internet Explorer 6.0 и 7.0 не понимают значения inherit и hidden .

CSS свойство border-bottom-style

Это свойство определяет стиль нижней стороны рамки HTML элемента.

CSS синтаксис

Илон Маск рекомендует:  Что такое код posix_isatty

Возможные значения

Значение Описание
none Значение по умолчанию. Без рамки.
hidden То же, что и none, за исключением разрешения конфликтов с рамками в элементах таблиц.
dotted Рамка состоит из точек.
dashed Рамка состоит из черточек.d>
solid Сплошная линия.
double Двойная сплошная линия.
groove 3-D рамка, представляющая прорезанный желоб. Эффект зависит от значения свойства border-color.
ridge 3-D рамка, представляющая оттиснутую борозду. Эффект зависит от значения свойства border-color.
inset 3-D рамка, представляющая вдавленное углубление. Эффект зависит от значения свойства border-color.
outset 3-D рамка, представляющая выставленное возвышение. Эффект зависит от значения свойства border-color.
initial Устанавливает значение по умолчанию.
inherit Значение наследуется от родительского элемента.

Пример

Устанавливаем стиль для нижней стороны рамки параграфа

CSS border-bottom-style Property

Description

The border-bottom-style CSS property sets the style of an element’s bottom border individually. However in many cases the shorthand CSS properties like border-style or border-bottom are more convenient to use and preferable.


The following table summarizes the usages context and the version history of this property.

Default value: none
Applies to: All elements
Inherited: No
Animatable: No. See animatable properties.
Version: CSS 1, 2, 3

Syntax

The syntax of the property is given with:

none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit

The example below shows the border-bottom-style property in action.

Example

  • p <
  • border-bottom-style : dashed ;
  • border-bottom-width : 3px ;
  • >

Property Values

The following table describes the values of this property.

Value Description
No border will be displayed.
hidden Same as none , except the case where table cells have collapsed borders and the two cells share a border. The hidden value ensures that no border is drawn, since hidden take precedence over all other border styles.
dotted Displays the border as a series of dots.
dashed Displays the border as a series of short line segments i.e. dashes.
solid Displays the border as a single solid line.
double Displays the border as a two parallel solid lines with some space between them. The sum of the two lines and the space between them equals the value of border-width .
groove Displays the border as it were carved into the canvas. It gives the impression of 3D that is typically achieved by creating a shadow from two colors that are slightly lighter and darker than the border-color .
ridge Displays the border that has the opposite effect of groove . It also gives the impression of 3D, the border looks as though it were coming out of the canvas.
inset Displays the border that makes the element’s box look as though it were embedded in the canvas. It gives the impression of 3D that is typically achieved by creating a shadow from two colors that are slightly lighter and darker than the border-color .
outset Displays the border that has the opposite effect of inset . It also gives the impression of 3D, the border makes the box look as though it were coming out of the canvas.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element border-bottom-style property.

Browser Compatibility

The border-bottom-style property is supported in all major modern browsers.

Basic Support—

  • Firefox 1+
  • Google Chrome 1+
  • Internet Explorer 4+
  • Apple Safari 1+
  • Opera 4+

Warning: Internet Explorer 7 and earlier versions don’t support the value hidden . IE8 supports, but requires a . IE9 and above supports the hidden value.

Все о свойстве border

Основы

Всем знакомо такое использование:

Это однопиксельная сплошная рамка. Немного меняем синтаксис:

Например у параметра border-width есть три параметра: thin, medium, thick:

Если необходимо менять цвет границы при наведении на объект:

Но так это реализовать проще и правильнее:

Border-Radius

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

Для каждого угла можно назначить свое закругление:

В приведенном примере необязательно назначать «0» border-top-right-radius и border-bottom-left-radius, если они не наследуют значения, которые должны быть изменены.
Всю конструкцию можно сжать в одну строку:

А вот как можно нарисовать лимон средствами CSS:

Здесь описаны самые простые и популярные примеры применения параметра border. Перейдем к более сложным.

Несколько границ

Border-Style

solid, dashed, and dotted — самые популярные значения параметра border-style, но давайте рассмотрим другие, например, groove and ridge.

Или более подробно:

Outline

Самый популярный способ создания двойной границы — это параметр outline:

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

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

Можно использовать такую конструкцию:


Возможно это не самое элегантное решение, однако оно работает

Box-Shadow

Еще один способ, с применением теней:

Изменение углов

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

Это то же самое, что:

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

CSS фигуры

В следующих примерах предполагается такая разметка:

И такой базовый css:

Наиболее частым примером использования CSS фигур является отображение стрелок. Чтобы понять, как это работает, необходимо разобраться с использованием отдельного border-color для каждой стороны и установкой значения «0» для width и height:

Или то же самое:

А теперь оставляем только синий треугольник:

Создание Speech Bubble

Наша базовая разметка:

Теперь нужно расположить стрелку-треугольник в нужном месте. Вот наш цветной квадратик:

Оставляем только четверть квадратика:

Теперь перемещаем ниже и закрашиваем:

Вертикальное центрирование текста

минус использования line-height при вертикальном центрировании в ограничении текста одной строкой. Для решения этой проблемы, можно применить display: table к нашему Speech Bubble и display: table-cell к тексту:

Еще один пример нестандартного использования границ:

Свойство CSS border-bottom-style

p
<
border-style:solid;
border-bottom-style:dotted;
>

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

Свойство CSS border-bottom-style задает стиль нижнего бордюра элемента.

Значение по умолчанию нет
Наследование нет
Версия CSS CSS 1
Синтаксис JavaScript object.style.borderBottomStyle=»dotted»

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

Свойство border-bottom-style поддерживается всеми основными браузерами.

Заметка: ни одна из версий IE (включая IE8) не поддерживает значение inherit или hidden.

свойство border-bottom-style

Свойство border-bottom-style определяет стиль нижней границы блока. Стиль нижней границы рамки, по умолчанию, не наследуется и считается невидимым. Стиль может принимать любое значение в соответствии со стандартом CSS 2.1 или CSS 3, либо значением inherit.

Доступные стили:

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

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

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

border-bottom-style

Браузер Internet Explorer Netтscape Опера Safari Mozilla Firefox
Версия 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Поддерживается Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да

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

CSS (ЦСС) CSS (ЦСС)1
Значение по умолчанию Нет
Наследуется Нет
Применяется Ко всем элементам
Аналог ШТМЛ |
Ссылка на спецификацию http://www.w3.org/TR/CSS21/box.ШТМЛ#border-style-properties

Описание

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

Синтаксис

Аргументы

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

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

ШТМЛ 4.01 CSS (ЦСС) 2.1 IE 5.5 IE 6 IE 7 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

Результат данного примера показан ни рис. 1.

Рис. 1. Применение параметра border-bottom-style

CSS border-bottom-style

The CSS border-bottom-style property allows you to set the style of a bottom border.

You can also use border-style to set the style for all sides of your element, or border-bottom to set all border properties for the bottom border.

You can use the border-bottom-color or border-color properties to set the color of the border. If you don’t set a color, the default will be currentColor (i.e. whatever the value of the color property is).

Also, the default width of a border is medium . You can specify the width using either the border-bottom-width or border-width properties.

Syntax

Details on these values below.

Possible Values

No border. Color and width are ignored. Therefore, the border’s width is 0 , and the initial value of border-image-width will also resolve to zero.

Note that when using the collapsing border model (border-collapsed tables), a none value may not always appear to work, due to another element having a non- none value. This is because multiple elements can share the same edge in border-collapsed tables. For example, a table , tbody , tr , and td could all share the same edge and have different border settings.

To completely turn the border off, either make all elements that share that edge none , or use hidden on any of the elements that share that edge.

Same as none , but in the collapsing border model (border-collapsed tables), also inhibits any other border. In other words, when multiple edges come together with different border settings (for example, a table and a td , each with their own border settings), if any one of those is hidden , it will prevent any border at that edge. This is different to none , in that all elements meeting that edge must have none before the border is omitted. A series of round dots. A series of square-ended dashes. A single line segment. Two parallel solid lines with some space between them. When using this value, the border-width value determines the sum of the lines and the space between them. Looks as if it were carved in the canvas. Looks as if it were coming out of the canvas. Looks as if the content on the inside of the border is sunken into the canvas. Treated as ridge in the collapsing border model. Looks as if the content on the inside of the border is coming out of the canvas. Treated as groove in the collapsing border model.

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial Represents the value specified as the property’s initial value. inherit Represents the computed value of the property on the element’s parent. unset This value acts as either inherit or initial , depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

Илон Маск рекомендует:  Цвета и фон
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL