| 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.
| Позиція | Кут | Опис | Вид |
|---|---|---|---|
| top | 270deg | Зверху вниз. | |
| left | 0deg | Зліва направо. | |
| bottom | 90deg | Знизу вгору. | |
| right | 180deg | Справа наліво. | |
| top left | -45deg | Від лівого верхнього кута до правого нижнього. | |
| top right | 225deg | Від правого верхнього кута до лівого нижнього. | |
| bottom left | 45deg | Від лівого нижнього кута до правого верхнього. | |
| bottom right | -225deg | Від правого нижнього кута до лівого верхнього. |
Приклад
HTML5CSS2.1CSS3IECrOpSaFx
<!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>