Border-bottom — Длина border-bottom


Содержание

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

Пример

Задайте ширину нижней границы:

Подробнее примеры ниже.

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

Свойство border-bottom-width задает ширину нижней границы элемента.

Примечание: Перед свойством всегда объявляйте свойство border-style или border-Bottom border-bottom-width . Элемент должен иметь границы, прежде чем можно изменить ширину.

Значение по умолчанию: medium
Inherited: no
Animatable: yes. Читайте о animatable
Version: CSS1
Синтаксис JavaScript: object.style.borderBottomW

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

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

Свойство
border-bottom-width 1.0 4.0 1.0 1.0 3.5

Синтаксис CSS

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

Значение Описание
medium Задает среднюю нижнюю границу. Это значение по умолчанию
thin Задает тонкую нижнюю границу
thick Задает толстую нижнюю границу
length Позволяет определить толщину нижней границы. Читать о единицах длины
initial Присваивает этому свойству значение по умолчанию. Читайте о initial
inherit Наследует это свойство из родительского элемента. Читайте о inherit

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

Пример

Установите ширину нижней границы в среднее:

CSS — как сделать линию короче бокса

October 18, 2013

При верстке макета сайта, кстати, совсем несложного, возник вопрос.

Заключается он в том, имеется информационная часть, разбитая на две колонки. Каждая из колонок также разделена на отдельные секции — посты. Для колонок и постов на макете задуманы дизайнером декоративные линии-разделители.

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

Но вопрос заключается в том, что декоративные линии на макете короче, чем высота колонки или ширина поста. То есть, получается, что должен быть короче, чем бокс:

Как же поступить в данном случае? Скажем так, обычными способами CSS решить такой вопрос невозможно. Но решение было найдено с помощью форума htmlbook.

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

Создаем слой с контентом:

И пропишем для него стилевые правила:

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

Немного распишем, что да как в этом коде.

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


RxJs — map

Первый «серьезный» метод в моей RxJs-копилке знаний. На самом деле все просто — этот метод получает на вход поток, обрабатывает каждый ev. … Continue reading

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

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

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

В декларации можно опускать определение любого атрибута. Например, декларация border-bottom: solid #ff0000; вполне допустима.

border-bottom-width

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

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

Значение по умолчанию medium
Наследуется Нет
Применяется Ко всем элементам
Анимируется Да

Синтаксис ?

Обозначения

Описание Пример
Указывает тип значения.
A && B Значения должны выводиться в указанном порядке. &&
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [, ]*
+ Повторять один или больше раз. +
? Указанный тип, слово или группа не является обязательным. inset?
Повторять не менее A, но не более B раз.
# Повторять один или больше раз через запятую. #

×

Значения

Три переменные — thin (2 пикселя), medium (4 пикселя) и thick (6 пикселей) задают толщину границы внизу. Для более точного значения, толщину можно указывать в пикселях или других единицах.

Песочница

Пример

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

Рис. 1. Применение свойства border-bottom-width

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

Примечание

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

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

Толщина границы при использовании ключевых слов thin , medium и thick в разных браузерах может несколько различаться.

Спецификация ?

Спецификация Статус
CSS Backgrounds and Borders Module Level 3 Возможная рекомендация
CSS Level 2 (Revision 1) Рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
  • Cand >Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft ( Черновик спецификации ) — первая черновая версия стандарта.


×

Браузеры ?

4 8 12 1 9.2 1 1

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

border-bottom

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

IE Opera Chrome Firefox Safari
IE до 7.0 (включ.) не поддерживает значение inherit + + + +

Пример

Прописываем стиль для нижней границы:

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

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

Свойства, которые можно задать (по порядку): border-bottom-width, border-bottom-style, and border-bottom-color.

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

border-bottom-w >

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

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

Тип свойства

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

Значения

Значением свойства border-bottom-width является указание толщины нижней части рамки в относительных или абсолютных единицах измерения принятых в CSS, например: пиксели (px), пункты (pt), сантиметры (cm) и т.д. При этом отрицательные значения недопустимы. Также значениями могут быть следующие ключевые слова:

  • thin — Тонкая рамка.
  • medium — Средняя рамка.
  • thick — Толстая рамка.
  • inherit — наследует значение border-bottom-width от родительского элемента.

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

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

Синтаксис


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

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

Версии 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 .

Границы, отступы и поля¶

box-shadow¶

Тень вокруг элемента

border¶

Задает в сокращенном виде свойства границ элемента: ширину, стиль, цвет линии

border-bottom¶

Задает в скоращенном виде свойства нижней границы элемента: ширина, стиль, цвет

border-bottom-color¶

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

border-bottom-style¶

Задает стиль нижней границы элемента, значения из border-style

border-bottom-width¶

Задает ширину нижней границы, значения из border-width

border-color¶

Задает цвет границ

border-left¶

Задает в скоращенном виде свойства левой границы элемента: ширина, стиль, цвет

border-left-color¶

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

border-left-style¶

Задает стиль левой границы элемента, значения из border-style

border-left-width¶


Задает ширину левой границы, значения из border-width

border-radius¶

Скругляет углы границ элемента

border-right¶

Задает в скоращенном виде свойства правой границы элемента: ширина, стиль, цвет

border-right-color¶

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

border-right-style¶

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

border-right-width¶

Задает ширину правой границы, значения из border-width

border-spacing¶

Определяет зазор между границами смежных ячеек таблицы

border-style¶

Задает стиль границ элемента

none — по умолчанию

border-top¶

Задает в скоращенном виде свойства верхней границы элемента: ширина, стиль, цвет

border-top-color¶

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

border-top-style¶

Задает стиль верхней границы элемента, значения из border-style

border-top-width¶

Задает ширину верхней границы, значения из border-width

border-width¶

Задает ширину границ

medium — по умолчанию

box-sizing¶

Порядок измерения высоты и ширины элемента


context-box — обычный порядок

padding-box — включить в расчет значение padding

border-box — включить в расчет значение border

margin¶

Внешний отступ от границ элемента

margin-bottom¶

Внешний отступ от нижней границы

margin-left¶

Внешний отступ от левой границы

margin-right¶

Внешний отступ от правой границы

margin-top¶

Внешний отступ от верхней границы

outline¶

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

Все о свойстве 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 к тексту:

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


Border-top-style, border-right-style, border-bottom-style, border-left-style

Свойства Box

Margin-top, margin-right, margin-bottom, margin-left

[3] auto — автоматически

*Применимо для: всех элементов

Описание: определяет верхнее, нижнее, правое и левое поля бокса

Margin

*Применимо для: всех элементов

Описание: обобщает все вышеперечисленные свойства

margin: 2em /* все поля установлены в 2em */

margin: 1em 2em /* верхнее и нижнее = 1em, правое и левое = 2em */

margin: 1em 2em 3em /* верхнее=1em, правое=2em, нижнее=3em, левое=2em */

Padding-top, padding-right, padding-bottom, padding-left

*Применимо для: всех элементов

Описание: верхнее, правое, нижнее и левое заполнение для бокса

Padding

*Применимо для: всех элементов

Описание: обобщает вышеперечисленные свойства. Можно задать несколько значений одновременно (до четырех) для разных сторон. Если установлено одно значение – задается единый отступ для всех сторон, если два – то задаются различные отступы для прилежащих сторон, если четыре – то задаются индивидуальные отступы для всех сторон, если три – то четвертое значение берется из второго

Border-top-width, border-right-width, border-bottom-width, border-left-width

[3] medium — средняя

[4] thick — толстая

*Применимо для: всех элементов

Описание: толщина верхней, правой, нижней и левой линии рамки для бокса

Border-width

*Применимо для: всех элементов

Описание: толщина рамки. Можно задать несколько значений одновременно (до четырех) для разных сторон. Если установлено одно значение — задается единая толщина для всех сторон, если два — то задаются различная толщина для прилежащих сторон, а если четыре — то задаются индивидуальная толщина для всех сторон

Border-top-color, border-right-color, border-bottom-color, border-left-color

*Применимо для: всех элементов

Описание: цвет верхней, правой, нижней и левой линии рамки


Border-color

[5] transparent – рамка прозрачная

*Применимо для: всех элементов

Описание: цвет рамки

border-color:red green yellow black

border-top-style, border-right-style, border-bottom-style, border-left-style

[1] none — нет рамки

[2] hidden — тоже, что и none, за исключением конфликтных ситуаций в таблицах

[2] dotted — рамка из точек

[3] dashed — рамка из пунктирных линий

[4] solid — рамка из сплошной линии

[5] double — двойная сплошная линия

[6] groove — рамка выглядит как вырезанная в канве

[7] ridge — рамка выглядит как выступающая над канвой

[8] inset — весь бокс выглядит вдавленным в канву

[9] outset — противоположно ‘inset’: выпуклый бокс

*Применимо для: всех элементов

Описание: стиль верхней, правой, нижней и левой линии рамки

Border-style

[1] border-top-style

[1]border-right-style

[1]border-bottom-style

[1]border-left-style

Описание: стиль рамки. Можно задать несколько значений одновременно (до четырех) для разных сторон. Если установлено одно значение — задается единый стиль для всех сторон, если два — то задаются различные стили для прилежащих сторон, а если четыре — то задаются индивидуальные стили для всех сторон

*Применимо для: всех элементов

Описание: стиль рамки

border-style: dotted groove

Не нашли то, что искали? Воспользуйтесь поиском:

Лучшие изречения: Студент — человек, постоянно откладывающий неизбежность. 10538 — | 7320 — или читать все.


188.64.174.135 © studopedia.ru Не является автором материалов, которые размещены. Но предоставляет возможность бесплатного использования. Есть нарушение авторского права? Напишите нам | Обратная связь.

Отключите adBlock!
и обновите страницу (F5)

очень нужно

border-bottom-width

The border-bottom-width property is used to set the width of the bottom border of an element.

The width of the border can be explicitly set using a value, or by using one of three border width keywords: thin , medium , and thick .

Official Syntax

  • Syntax:
  • Initial: medium
  • Applies To: all elements
  • Animatable: yes
  • Notes

    Note that the initial width is medium , but the initial border style of an element is none and therefore the used width is 0.

    Values

    Notes

    The specification doesn’t precisely define the thickness of each of the keywords, which is therefore implementation specific, but the values are constant throughout a document and thin ? medium ? thick. A browser could, for example, make the thickness depend on the medium font size: one choice might be 1px (for thin ), 3px (for medium ) & 5px (for thick ) when the medium font size is 17px or less.

    The border-bottom-width property can also inherit the value of the element’s parent’s bottom border width using the keyword inherit .

    Examples

    The following are all valid border-bottom-width values set on an element. The element’s border style and border color are also set using the border-bottom-style and border-bottom-color respectively.

    Live Demo

    Have a look at the live demo:

    Browser Support

    The property works in all major browsers: Chrome, Firefox, Safari, Opera, IE, and on Android and iOS.

    Further Reading

    Written by Sara Soueidan. Last updated February 4, 2015 at 2:29 pm by Mary Lou.

    Do you have a suggestion, question or want to contribute? Submit an issue.

    Цукерберг рекомендует:  Тест по JavaScript. Начальный уровень
    Понравилась статья? Поделиться с друзьями:
    Все языки программирования для начинающих