Блог Vaden Pro

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

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

Дата:30.10.15 в 17:32

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

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

- - - - 1.0+ - -

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

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

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

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

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

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

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

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

При указании многослойной границы цвета начинают определять от внешней стороны к внутренней части элемента.

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

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

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

-moz-border-bottom-colors

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

Оценка: 
Оценок: 2 (средняя 5 из 5)
Тип CSS свойства: 
Понравилась статья? Расскажите о ней друзьям: