Стиль внешней границы

outline-style

В SIMAI Framework с помощью модифкаторов можно задать стиль внешней границы.

Классы

Класс Значение
outline-dotted outline-style: dotted;
outline-dashed outline-style: dashed;
outline-solid outline-style: solid;
outline-double outline-style: double;
outline-hidden outline-style: hidden;
outline-none outline-style: none;

Описание

Адаптивный модификатор. Задает стиль разделителя в зависимости от размера области просмотра.

Использование модификатора: {контрольная точка}:{модификатор}

  • Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (sm, md, lg, xl). Если контрольная точка не задана, то действует для любого размера области просмотра.
  • Модификатор. Обязательный параметр. Может принимать значения:
    • outline-dotted - разделитель отображается точками,
    • outline-dashed - разделитель отображается пунктирной линией,
    • outline-solid - разделитель отображается сплошной линией,
    • outline-double - разделитель отображается двойной линией,
    • outline-none - разделитель не отображается и значение его толщины обнуляется,
    • outline-hidden - имеет тот же эффект, что и outline-none.

Пример

Используйте модификатор outline-{style} чтобы задать стиль внешней границы..

<button class="outline-2 outline-solid outline-red-6 outline-offset-2 ...">Кнопка 1</button>
<button class="outline-2 outline-dashed outline-red-6 outline-offset-2 ...">Кнопка 2</button>
<button class="outline-2 outline-dotted outline-red-6 outline-offset-2 ...">Кнопка 3</button>
<button class="outline-4 outline-double outline-red-6 outline-offset-2 ...">Кнопка 4</button>

Изменить статью