Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов
Вы здесь

Свойство -moz-border-left-colors

Справочник: 
Вендорное свойство

Характеристики свойства

В каких браузерах работает?

- - - - 1.0+ - -

В каких версиях CSS используется?

CSS 1 CSS 2 CSS 2.1 CSS 3
- - - -

Для чего используется?

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

Как правильно задавать?

-moz-border-left-colors: значение цветов;

Какие могут быть значения?

  • none - означает отсутствие цвета. Может воспользоваться значением цвета, указанным в свойстве border-color, если такой имеет место.
  • цвет - доступные значения для указания цветов можно посмотреть тут.

Пример использования

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Свойство -moz-border-left-colors</title>
  <style>
   div {
    border: 3px solid #c7c7c7;
    -moz-border-left-colors: #ff0000 #f60 #f80;
    padding: 5px;
   }
  </style>
 </head>
 <body>
  <div>
   Очень парадоксален тот факт, что каждый браузер
 некоторые элементы выводит по своему! Неужели нельзя
 было договориться? Ради  верстальщиков всех времен и народов?
  </div>
 </body>
</html>

По итогу получаем

С одной стороны это вендорное свойство имеет дополнительные возможности назначения многоцветной границы, однако применение его ограничивается только браузером Firefox, и параллельно с этим свойство не сможет пройти проверку на валидность.

Тип CSS свойства: 
Границы