Статьи

стиль границы (свойство CSS)

Октябрь 31, 2018

Синтаксис

стиль границы : {{ none | скрытый | пунктирная | пунктирная | твердый | двойной | паз | хребет | вставка | outset } от 1 до 4 значений | наследовать } ;

Описание

Сокращенное свойство border-style устанавливает стиль границы на всех четырех сторонах элемента, используя указанные значения. Каждая граница может иметь свое собственное значение — см. Мнемонику (TRouBLe) в свойствах стенографии для простого способа запомнить порядок стенографий.

Границы располагаются поверх фона элемента.

пример

Это правило стиля назначает сплошную границу
вверху, пунктирная граница снизу и пунктирная граница к
левая и правая части абзацев внутри элемента с идентификатором
"example" : 

 #example p { border-style: solid dotted dashed; }

Значение

  • none означает, что границы не будут отображаться, а вычисленная border-width равна нулю.

  • Значение hidden имеет то же значение, что и none , за исключением случаев, когда оно относится к границам таблицы в тех случаях, когда две ячейки имеют общую границу, а ячейки таблицы имеют свернутые границы ( border-collapse:collapse; ). hidden значение гарантирует, что граница не отображается, так как hidden имеет приоритет над всеми другими стилями границ. Если бы none них не использовалась для одной границы в ячейке, она все равно была бы нарисована, поскольку граница соседней ячейки будет иметь приоритет. См. Форматирование таблицы для получения дополнительной информации.

  • dotted реализует границу в виде серии точек.

  • dashed реализует границу в виде серии штрихов.

  • solid реализует границу в виде сплошной линии.

  • double реализует границу в виде двух сплошных линий. Сумма двух значений ширины границы и расстояния между ними равна значению, установленному для значения border-width .

  • groove — это трехмерный эффект, который создает впечатление, что граница вырезана на холсте.

  • ridge — это трехмерный эффект с эффектом groove , в котором граница выступает из холста.

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

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

Ранее в CSS1 пользовательским агентам было разрешено интерпретировать все стили с dotted , dashed , double , groove , ridge , inset и groove как solid .

43
Share: