Приклад тегу:
Створення радіального градієнту у браузері Firefox.
Синтаксис:
background-image: -moz-radial-gradient([<кут> || <позиція>,] [<форма> || <розмір>,] <колір> [, <колір>]*);
Значення:
- <кут>
- Див. кут. Впливає лише при еліптичному градієнті.
- <позиція>
- Позиція точки пишеться аналогічно значенням властивості background-position за допомогою ключових слів або доступних одиниць виміру, таких як пікселі або відсотки; нижче наведено можливі комбінації.
- <форма>
- Задає форму радіального градієнту — коло (circle) або еліпс (ellipse), які відрізняються своїм виглядом. За замовчуванням встановлюється еліптичний градієнт.
- <колір>
- Представляє собою значення кольору (див. колір), за яким йде необов'язкова позиція кольору відносно вісі градієнту, вона задається у відсотках від 0% до 100% або в будь-яких інших підходящих для CSS одиницях.
- <розмір>
- Встановлює розмір градієнту.
Приклад
HTML5CSS2.1CSS3IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Градієнт</title>
<style>
body {
background: #feffff;
background: -moz-radial-gradient(center, ellipse cover, #feffff 0%, #d2ebf9 100%);
background: -webkit-radial-gradient(center, ellipse cover, #feffff 0%,#d2ebf9 100%);
background: -o-radial-gradient(center, ellipse cover, #feffff 0%,#d2ebf9 100%);
background: -ms-radial-gradient(center, ellipse cover, #feffff 0%,#d2ebf9 100%);
background: radial-gradient(center, ellipse cover, #feffff 0%,#d2ebf9 100%);
padding: 10px;
}
</style>
</head>
<body>
<p>Зміст сторінки</p>
</body>
</html>