CSS приклад: -ms-radial-gradient

Радіальний градієнт для Internet Explorer

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
10.0

Версії CSS

CSS 1CSS 2CSS 2.1CSS 3

Опис

Створює радіальний градієнт у браузері Internet Explorer.

Синтаксис

background-image: -ms-radial-gradient([<кут> || <позиція>,] [<форма> || <розмір>,] <колір> [, <колір>]*);

Значення

<кут>
Див. кут. Впливає тільки при еліптичному градієнті.
<позиція>
Позиція точки пишеться аналогічно значенням властивості background-position за допомогою ключових слів або доступних одиниць вимірювання, таких як пікселі або відсотки; нижче наведені можливі комбінації.
<форма>
Задає форму радіального градієнту — коло (circle) або еліпс (ellipse), які відрізняються своїм виглядом. За замовчуванням встановлюється еліптичний градієнт.
<колір>
Представляє собою значення кольору (див. колір), за яким йде необов'язкова позиція кольору відносно вісі градієнту, вона задається у відсотках від 0% до 100% або в будь-яких інших підходящих для CSS одиницях.
<розмір>
Встановлює розмір градієнту.
Табл. 1. Ключові слова для зміни розміру градієнту
ЗначенняКодОписВид
contain.........
closest-corner.........
farthest-side.........
cover.........

Приклад

HTML5CSS2.1CSS3IE 10CrOp 12SaFx

<!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>
Градієнт

Часті запитання

  • Q: -ms-radial-gradient в css як і де використовують?

    A: Це специфічний префікс для веб-кістяка Internet Explorer, який використовується для створення радіальних градієнтів. Його використовують для стилізації фону елементів за допомогою CSS.

  • Q: Як використовувати -ms-radial-gradient в CSS?

    A: Для використання -ms-radial-gradient в CSS, потрібно вказати його як значення властивості background-image, background или background-color.

  • Q: Як створити радіальний градієнт в CSS для Internet Explorer?

    A: Для створення радіального градієнта в CSS для Internet Explorer потрібно використати префікс -ms-radial-gradient та вказати його властивості, наприклад, center, shape, size, at, color-stop тощо.

  • Q: Чому важливо використовувати -ms-radial-gradient для радіальних градієнтів в CSS?

    A: -ms-radial-gradient важливо використовувати для підтримки старіших версій Internet Explorer, які не підтримують стандартний синтаксис радіальних градієнтів.

  • Q: Чи можна використовувати -ms-radial-gradient разом з іншими браузерними префіксами?

    A: Так, можна використовувати -ms-radial-gradient разом з іншими браузерними префіксами для забезпечення кросбраузерної сумісності.