Как добавить многозначную (разделенную запятыми) тень блока, используя jQuery (. css)?

Question

У меня есть тень блока в моем css как:

.className {

  transform: translateY(0);
  box-shadow:
    inset 0 0 60px whitesmoke,
    inset 20px 0 80px #f0f,
    inset -20px 0 80px #0ff,
    inset 20px 0 300px #f0f,
    inset -20px 0 300px #0ff,
    0 0 50px #fff,
    -10px 0 80px #f0f,
    10px 0 80px #0ff;
}

Я хотел бы применить эту тень, используя jQuery INSTEAD (чтобы позже я мог реализовать динамические c цвета). Мой текущий javascript:

$('.className').css({
            "box-shadow": 'inset 0 0 60px whitesmoke'
            })

Что применяет одну сторону тени без проблем. Когда я пытаюсь добавить другие тени, разделенные запятыми, в css, ничего не происходит. Я попытался добавить все значения запятых в одну строку следующим образом:

$('.className').css({
            "box-shadow": 'inset 0 0 60px whitesmoke, inset 20px 0 80px #f0f,...'
            })

Но это не сработало. Я также пробовал использовать пробелы вместо запятых, и это тоже не сработало. Есть ли способ преобразовать это поле тени с несколькими запятыми в один параметр, который может быть принят jQuery. css?

Если нет ... как я могу преобразовать css в приемлемый формат для передачи в метод jQuery. css?

Спасибо.

Answer 1

Должно быть допущена синтаксическая ошибка, так как он отлично работает с запятыми. См. Скрипку Темани: jsfiddle.net/autq9p13

Спасибо.