Союз CSS радиального градиента против пересечения - PullRequest
Новая
       24

Союз CSS радиального градиента против пересечения

2 голосов
/ 19 января 2012

Я пытаюсь получить два радиальных градиента для рендеринга на одном и том же элементе DOM, но кажется, что они отрисовывают пересечение двух градиентов, а не объединение (что я и хочу).

Пример: http://jsfiddle.net/VUzLS/1/

Чтобы сэкономить некоторое время, если нет перекрытия, он не отображает оба градиента, он ничего не отображает, поскольку нет пересечения.

Есть лиспособ сделать это сделать объединение двух градиентов?

Редактировать: Этот должен иллюстрировать то, что я хочу.Мне бы хотелось, чтобы градиенты, определяемые красными эллипсами, занимали всю белую часть, но сейчас они занимают только пересечение области, определяемой красными эллипсами.

1 Ответ

0 голосов
/ 19 января 2012

Вот довольно хороший обзор css3 градиентов

Я нахожу синтаксис довольно запутанным и не уверен, чего вы пытаетесь достичь.

Вотобновленная версия вашего примера, которая показывает многоцветные радиальные градиенты с внутренней тенью блока, чтобы показать некоторые другие идеи рисования css3.Вы можете использовать цвета RGBA для прозрачности. 

div {
  width: 90%;
  height: 500px;
  margin: 10px auto;
  background: -webkit-radial-gradient(center center, 30px 40px, red 10%, orange 40%, yellow 65%, brown 190%);  
  -webkit-box-shadow: inset -20px -20px 20px 20px orange, inset 20px 20px 20px 20px green;
  border-radius: 20%;
  }

возможно, вы могли бы нарисовать картину того, что вы после.

...