Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
3.0 + | 5.1 + |
Версії CSS
CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
---|---|---|---|
Опис
Створює лінійний градієнт в браузерах Safari і Chrome.
Синтаксис
background-image: -webkit-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: -ms-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>