| 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>