Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
3.6 + |
Версії CSS
CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
---|---|---|---|
Опис
Створює лінійний градієнт в бр аузере Firefox. Градієнт це плавний перехід від одного кольору до іншого, він може йти під певним кутом до елементу і містити більше двох кольорів.
Синтаксис
background-image: -moz -linear-gradient ([<кут> | <позиція> ,] <колір> [, <колір> ] *);
Значення
- <кут>
- Див. кут .
- <колір>
- Являє собою значення кольору (див. колір ), за яким йде необов'язкова позиція кольори щодо осі градієнта, вона задається у відсотках від 0% до 100% або в будь-яких інших відповідних для CSS одиницях.
- <позиція>
- Для запису позиції застосовуються ключові слова top, bottom і left, right, а також їх поєднання. Порядок слів не важливий, можна написати left top або top left . У табл. 1 наведені різні позиції і тип отримуваного градієнта для кольорів #000 і #fff (від чорного до білого).
Позиція | Кут | Опис | Вигляд |
---|---|---|---|
top | 270deg | Зверху вниз. | ![]() |
left | 0deg | Зліва направо. | ![]() |
bottom | 90deg | Знизу вгору. | ![]() |
right | 180deg | Справа наліво. | ![]() |
top left | -45deg | Від лівого верхнього кута до правого нижнього. | ![]() |
top right | 225deg | Від правого верхнього кута до лівого нижнього. | ![]() |
bottom left | 45deg | Від лівого нижнього кута до правого верхньому. | ![]() |
bottom right | -225deg | Від правого нижнього кута до лівого верхнього. | ![]() |
Приклад
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> Градієнт </title> <style> .example {background: #e2e2e2; background: -moz-linear-gradient (top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); background: -webkit -linear-gradient (top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); background: -o-linear-gradient (top, #e2e2e2 0%, #dbdbdb 50 %, #d1d1d1 51%, #fefefe 100%); background: linear-gradient (top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); padding: 10px; } </style> </head> <body> <div class="example"> Вміст сторінки </div> </body> </html>