Создание пунктирной линии CSS: пример кода и объяснение

Быстрый ответ

Для создания пунктирной линии в CSS следует использовать такие стили:

.dotted {
  border-top: 2px dotted #000;
}

Как это выглядит на практике:

<div class="dotted"></div>

В итоге мы получаем горизонтальную пунктирную линию. Меняйте значения 2px и #000 для коррекции толщины и цвета линии.

Подробное руководство и варианты

Разберём подробнее, как контролировать внешний вид пунктирной линии с использованием полезных рекомендаций и примеров.

Изменение размера и ориентации

Для коррекции размеров и ориентации пунктирной линии используйте такие подходы:

/* Если нужна линия на всю ширину экрана */
.dotted-horizontal {
  border-top: 1px dotted #000; 
  width: 100%;               
}

/* Если целесообразно акцентировать внимание на вертикальной ориентации */
.dotted-vertical {
  border-left: 1px dotted #000;
  height: 200px;
}

Подробнее об этом расскажет наш спикер на видео

Создание более округлых точек

Если предпочтительны более округлые точки, используйте такой приём:

.round-dots {
  border-style: dashed;
  border-width: 1px;
  border-color: #000;
  background-image: radial-gradient(#000 20%, transparent 20%);
  background-size: 10px 10px;  
  background-position: center;
  background-repeat: repeat-x; 
}

Кроссбраузерная совместимость

Убедитесь в корректном отображении пунктирных линий в различных браузерах, не забывая даже о таких, как IE8.

/* В знак уважения к IE8, или как мы его называем, "упрямому динозавру" мира браузеров. */
.compatible-dots {
  border-style: dotted;
}

Визуализация

Используя свойство border-style: dotted; вы внедрите задачу создания точечной линии:

Было:     ___________________________________
Стало:    ...................................

Точки – это форма преобразования стиля линии из сплошной в пунктирную.

Продвинутые настройки

Для расширения ваших возможностей в стилизации используйте псевдоэлементы (::before или ::after), которые являются скрытым оружием CSS:

.fancy-dotted {
  position: relative;
}

.fancy-dotted::before {
  content: '';
  position: absolute;
  border-top: 1px dotted #000;
}

Работа с контрастными фонами

Для выделения точек на сложном фоне использование следующих стилей:

/* Поборем эффект "камуфляжа", подчеркнув каждую точку */
.visible-dots {
  border-top: 1px dotted rgba(0,0,0,0.5); 
  background-color: #fff; 
}

Преодоление ограничений и странностей

Обратите внимание на некоторые особенности работы с пунктирными линиями:

• Масштабирование: размер точек может изменяться непредсказуемо при изменении размеров контейнера.
• Выравнивание: начало и конец линии могут отображаться по-разному в разных браузерах и при различной толщине линии.
• Цвета: градиентный фон может менять восприятие цвета точек из-за эффекта сглаживания.

Проверяйте ваши стили на разных устройствах и в разных браузерах, чтобы устранить возможные проблемы.

Полезные материалы

1. border-style – CSS: Cascading Style Sheets | MDN — подробное описание свойства border-style, включая пунктирный стиль.
2. CSS Borders — полное руководство по созданию различных граничных стилей в CSS, включая пунктирные линии.
3. Newest 'css+dotted-line' Questions – Stack Overflow — вопросы и ответы на Stack Overflow по теме создания пунктирных линий в CSS.
4. CSS – border — всестороннее руководство по оформлению CSS границ, включая и пунктирные линии.