Dashed css: border-top — CSS: Cascading Style Sheets

Leave a Comment / Css / By /

border-top — CSS: каскадные таблицы стилей

Сокращенное свойство CSS border-top задает все свойства верхней границы элемента.

Как и все сокращенные свойства, border-top всегда устанавливает значения всех свойств, которые он может установить, даже если они не указаны. Он устанавливает для тех, которые не указаны, их значения по умолчанию. Рассмотрим следующий код:

 border-top-style: dotted;
верхняя граница: густо-зеленая;

На самом деле он такой же, как этот:

 border-top-style: dotted;
граница-верх: нет густо-зеленый;

Значение border-top-style , заданное перед border-top , игнорируется. Поскольку значение по умолчанию border-top-style равно none , отсутствие указания части border-style приводит к отсутствию границы.

Это свойство является сокращением для следующих свойств CSS:

  • border-top-color
  • бордюрный верх
  • ширина верхней границы 
 верхняя граница: 1px;
верхняя граница: 2 пикселя с точками;
верхняя граница: средний пунктирно-зеленый;
/* Глобальные значения */
верхняя граница: наследовать;
верхняя граница: начальная;
верхняя граница: вернуться;
верхняя граница: обратный слой;
верхняя граница: не установлена;

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

Значения

См. border-top-width .

<бр-стиль>

См. border-top-style .

<цвет>

См. border-top-color .

Применяется ко всем элементам
Начальное значение как каждое из свойств стенографии:
  • border-top-width : medium
  • border-top-style : none
  • border-top-color : currentcolor
Это также относится к ::first-letter .
Унаследовано нет
Вычисленное значение как каждое из свойств сокращенной записи:
  • border-top-width 5 0 9 0 the 9000 0005 если border-top-style is none или hidden
  • border-top-style : как указано
  • border-top-color : вычисленный цвет
    • : вычисленный цвет 087 Тип анимации
 как каждое из свойств сокращения:
  • border-top-color : цвет
  • border-top-style : дискретный
  • border-top-width     : длина
4177
 верхняя граница = 
 <ширина строки> || 
 <стиль строки> || 
 <цвет> 
 "> = 
  | 
 тонкий | 
 средний | 
 толстый 
 
 "> = 
 нет | 
 скрыто | 
 с точками | 
 пунктир | 
 твердый | 
 двойной | 
 канавка | 
 хребет | 
 вставка | 
 начало

Применение верхней границы

HTML 
 
Это поле имеет границу сверху.
CSS 
 раздел {
  граница сверху: 4 пикселя пунктирная синяя;
  цвет фона: золото;
  высота: 100 пикселей;
  ширина: 100 пикселей;
  вес шрифта: полужирный;
  выравнивание текста: по центру;
}
Результаты
1 2 Таблицы BCD загружаются только в браузере с включенным JavaScript. Включите JavaScript для просмотра данных.

  • граница
  • пограничный блок
  • контур

Обнаружили проблему с содержанием этой страницы?

  • Отредактируйте страницу на GitHub.
  • Сообщить о проблеме с содержимым.
  • Посмотреть исходный код на GitHub.

Хотите принять больше участия?

Узнайте, как внести свой вклад.

Последний раз эта страница была изменена участниками MDN.

пунктир - Попутный ветер CSS класс

← Список классов CSS Tailwind

Предварительный просмотр

Проверить

.border-dashed в реальном проекте

Щелкните один из приведенных ниже примеров, чтобы открыть визуальный редактор Shuffle с пользовательским интерфейсом библиотека, использующая выбранный компонент.

Открыть в визуальном редакторе →

Открыть в визуальном редакторе →

Открыть в визуальном редакторе →

Открыть в визуальном редакторе →

Открыть в визуальном редакторе →

Открыть в визуальном редакторе →

Открыть в визуальном редакторе →

Открыть в визуальном редакторе →

Открыть в визуальном редакторе →

Открыть в визуальном редакторе →

Источник CSS 

 . border-dash {
    стиль границы: пунктир;
}

Дополнительные сведения о границах CSS Tailwind

  • .border-solid
  • .граница с точками
  • .бордюр-двойной
  • .border-none
  • .граница
  • .граница-0
  • .граница-2
  • .граница-4
  • .граница-8
  • . border-*-# / .border-t-2
  • .border-opacity-25 / граница-*-#
  • .разделить-х
  • .разделить-х-0
  • .разделить-x-2
  • .разделить-х-4
  • .разделить-х-8
  • .разделить-y
  • .разделить-y-0
  • .разделить-y-2
  • . разделить-y-4
  • .разделить-y-8
  • .divide-grey-100 / .divide-*-#
  • .divide-x-reverse / .divide-*-reverse
  • .divide-opacity-25 / .divide-opacity-*
  • .border-collapse
  • .граница-отдельная
  • .закругленный / .закругленный-*
  • .граница-b
  • .
    border-b-0
  • .border-blue-50
  • .граница-серый-50
  • .border-green-50
  • .border-indigo-50
  • .граница-л
  • .граница-л-0
  • .border-opacity-0
  • .border-pink-50
  • .border-purple-50
  • . граница-р
  • .border-r-0
  • .border-red-50
  • .граница-т
  • .граница-т-0
  • .бордюр-желтый-50
  • .закругленный-2xl
  • .закругленный-3xl
  • .круглый-b-2xl
  • .закругленный-b-3xl
  • . rounded-b-xl
  • .закругленный-bl-2xl
  • .закругленный-bl-3xl
  • .rounded-bl-xl
  • .rounded-br-2xl
  • .rounded-br-3xl
  • .rounded-br-xl
  • .закругленный-l-2xl
  • .закругленный-l-xl
  • .закругленный-r-2xl
  • . закругленный-r-3xl
  • .rounded-r-xl
  • .закругленный-t-2xl
  • .закругленный-t-3xl
  • .rounded-t-xl
  • .закругленный-TL-2XL
  • .закругленный-TL-3XL
  • .rounded-tl-xl
  • .rounded-tr-2xl
  • .rounded-tr-3xl
  • .

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

Спецификация
Фоны и границы Модуль Уровень 3
# border-shorthands

1