CSS радиальный градиент для Safari не работает

Question

CSS радиальный градиент для Safari не работает

Когда я использую этот фрагмент в Chrome, IE и Firefox, он работает отлично! Но на Safari это не работает.

Эта проблема происходит:

.circle-red {
 border: 2px solid;
 border-radius: 51%;
 width: 40px;
 height: 40px;
 background: radial-gradient(ellipse at 80px 40px, rgba(255, 255, 255, 0.75) 10%, rgba(255,255,255,0.5) 32%, rgba(255,255,255,0) 70% ), linear-gradient(160deg, transparent 10%, red 30%);
 background-size: 87.5% 55%, 100% 100%;
 background-repeat: no-repeat;
}

<div class="circle-red"></div>

0

css safari cross-browser css-gradients

Источник

user4803173 02 фев '16 в 17:23

1 ответ

Решение

Другие вопросы по тегам css safari cross-browser css-gradients

user5873993 02 фев '16 в 17:34 2016-02-02 17:34 · Accepted Answer · 2016-02-02 17:34

Попробуйте это, добавив префикс webkit к свойству background-size и к значению градиента фона. Вот пример:

.circle-red {
    border: 2px solid;
    border-radius: 51%;
    width: 40px;
    height: 40px;
    background: radial-gradient(ellipse at 80px 40px, rgba(255, 255, 255, 0.75) 10%, rgba(255,255,255,0.5) 32%, rgba(255,255,255,0) 70% ), linear-gradient(160deg, transparent 10%, red 30%);
   background: -webkit-radial-gradient(ellipse at 80px 40px, rgba(255, 255, 255, 0.75) 10%, rgba(255,255,255,0.5) 32%, rgba(255,255,255,0) 70% ), linear-gradient(160deg, transparent 10%, red 30%);
    background-size: 87.5% 55%, 100% 100%;
-webkit-background-size: 87.5% 55%, 100% 100%;
    background-repeat: no-repeat;
}