Свойство CSS border-bottom-style
❮ Предыдущий Полное руководство по CSS Далее ❯
Пример
Задайте стиль для нижней границы:
div {border-bottom-style: dotted;}
Попробуйте сами »Ниже приведены дополнительные примеры «Попробуйте сами».
Определение и использование
Свойство border-bottom-style устанавливает стиль нижней границы элемента.
Показать демо ❯
| Значение по умолчанию: | нет |
|---|---|
| Унаследовано: | нет |
| Анимация: | нет. Читать о анимированном |
| Версия: | CSS1 |
| Синтаксис JavaScript: | объект .style.borderBottomStyle=»с точками» Попробуй |
Поддержка браузера
Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
| Собственность | |||||
|---|---|---|---|---|---|
| нижняя граница | 1,0 | 5,5 | 1,0 | 1,0 | 9,2 |
Синтаксис CSS
border-bottom-style: none|скрытый|точечный|штриховой|сплошной|двойной|канавка|гребень|вставка|начало|начальный|наследовать;
Значения свойств
| Значение | Описание | Демо |
|---|---|---|
| нет | Указывает отсутствие границы. Это по умолчанию | Демонстрация ❯ |
| скрытый | То же, что и «нет», кроме пограничного конфликта разрешение для элементов таблицы | Демонстрация ❯ |
| с точкой | Задает пунктирную границу | Демонстрация ❯ |
| пунктир | Задает пунктирную границу | Демонстрация ❯ |
| твердый | Задает сплошную границу | Демонстрация ❯ |
| двойной | Задает двойную рамку | Демонстрация ❯ |
| канавка | Задает трехмерную рифленую границу. Эффект зависит от
значение цвета границы | Демонстрация ❯ |
| хребет | Задает трехмерную ребристую границу. Эффект зависит от значение цвета границы | Демонстрация ❯ |
| вкладыш | Указывает границу 3D-врезки. Эффект зависит от значение цвета границы | Демонстрация ❯ |
| начало | Указывает начальную 3D-рамку. Эффект зависит от значение цвета границы | Демонстрация ❯ |
| инициал | Устанавливает для этого свойства значение по умолчанию. Читать про начальный | |
| унаследовать | Наследует это свойство от родительского элемента. Читать о унаследовать |
Другие примеры
Пример
Пунктирная нижняя граница:
div {border-bottom-style: dashed;}
Попробуйте сами » 9000 5 ПримерСплошная нижняя граница:
div {border-bottom-style: solid;}
Попробуйте сами »Пример
Двойная нижняя граница:
div {border-bottom-style: double;}
Попробуйте сами » 9000 3Пример
Удалить нижнюю границу:
div {border-bottom-style: none;}
Попробуйте сами »Пример
Нижняя граница канавки:
div {
border-bottom- стиль: канавка;
border-bottom-color: коралловый;
border-bottom-width: 7px;
}
Пример
Нижняя граница ребра:
div {
border-bottom-style: ridge;
граница-нижний-цвет: коралловый;
ширина нижней границы: 7 пикселей;
}
Пример
Нижняя граница вставки:
div {
border-bottom-style: inset;
граница-нижний-цвет: коралловый;
ширина нижней границы: 7 пикселей;
}
Пример
Начальная нижняя граница:
div {
border-bottom-style: outset;
border-bottom-color: коралловый;
border-bottom-width: 7px;
}
Связанные страницы
Учебник CSS: Граница CSS
Ссылка CSS: свойство border-bottom
Ссылка HTML DOM: свойство borderBottomStyle
❮ Назад Полное руководство по CSS Далее ❯
ВЫБОР ЦВЕТА
Лучшие учебники
Учебник HTMLУчебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3.
CSS Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery
9000 3
Лучшие ссылки
Справочник по HTMLСправочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery
Основные примеры
Примеры HTMLПримеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery
ФОРУМ | О
W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.
Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования,
куки-файлы и политика конфиденциальности. Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.
Подписаться І 2
Подробнее
Отчет
1 ответ эксперта
Лучший Новейшие Самый старыйАвтор: Лучшие новыеСамые старые
Кристи В.
Репетитор
5,0 (1196)Преподаватель компьютерных наук/ИТ в университете, специализирующийся на веб-дизайне
Об этом репетиторе ›
Об этом репетиторе ›
Существует способ указать границу для нижней части каждой строки в таблице, используя только CSS. Вы были на правильном пути с кодом CSS
tr { border-bottom: 1pt solid black; }
Однако эту строку нужно изменить так, чтобы селектор был td, а не tr. Это добавит границу под строками, но это будет пунктирная граница вместо сплошной границы, поскольку она добавляет границу для каждого отдельного столбца, при этом по умолчанию между столбцами есть пространство. Чтобы сделать линии сплошными, нам нужно добавить правило CSS, чтобы свернуть границы таблицы:
таблица {граница-коллапс: коллапс; }
Это, вероятно, приведет к тому, что записи в таблице будут расположены слишком близко друг к другу, поэтому, чтобы увеличить расстояние между ячейками таблицы, мы можем добавить отступ к правилу для td, например:
td { border-bottom: 1pt solid black;
отступ: 10 пикселей; }
Вы можете изменить 10 на любое число, которое вам нравится, в зависимости от того, какой интервал вы хотите.
Это сделает сплошные нижние границы для каждой строки одного цвета. Если вы хотите сделать нижнюю границу каждой строки разным цветом, нам нужно использовать спецификатор nth-of-type для идентификации каждой строки, а затем установить границу для этой строки. Например:
tr:nth-of-type(1) td { нижняя граница: 1 пункт сплошной зеленый; }
tr:nth-of-type(2) td { нижняя граница: 1pt сплошной красный; }
tr:nth-of-type(3) td { нижняя граница: 1pt сплошной синий; }
Число в круглых скобках после nth-of-type указывает строку для применения правила, а спецификатор td указывает, что правило будет применено ко всем столбцам в этой строке. Так, например, первое правило гласит, что каждый столбец в строке 1 будет иметь зеленую нижнюю границу.
Таким образом, CSS для всех границ одного цвета будет выглядеть следующим образом:
td { border-bottom: 1pt сплошной черный;
отступ: 10 пикселей; }
таблица { граница коллапса: коллапс; }
И CSS для каждой границы другого цвета будет следующим:
td { padding: 10px; }
таблица { граница коллапса: коллапс; }
tr:nth-of-type(1) td { нижняя граница: 1pt сплошной зеленый; }
tr:nth-of-type(2) td { нижняя граница: 1pt сплошной красный; }
tr:nth-of-type(3) td { нижняя граница: 1pt сплошной синий; }
Надеюсь, это ответ на ваш вопрос.