Прозрачные закругленные углы на Google Map

Мне нужно сделать мою карту Google V3 полным кругом. Я использую на нем радиус границы CSS3, но он работает правильно только в Firfox, другие просто оставляют его прямоугольным . Вот коды:

...

и CSS:

.map.mapCircle {
    width: 476px;
    height: 476px;
}
.mapCircle>div>div:first-child {
    -moz-border-radius: 238px;
    -webkit-border-radius: 238px;
    border-radius: 238px;
}

Да, я знаю, я мог бы использовать некоторые оверлейные изображения с цветом фона. Но настоящая проблема в том, что фон - это не только цвет. Он меняется в зависимости от его содержимого, и обычно это градиент. Есть ли способ заставить Chrome и другие браузеры, основанные на wabkit, и Opera (у меня нет никаких надежд на IE) отображать его так же, как это делает FF?

Мой сайт. Посмотрите на в самом низу страницы.

UPD: только что протестировал в IE9, и он работает нормально. Что не так с webkit и Opera?

UPD 2: Я использовал andwer OverZealous и выяснил, что он работает только в Safari. Chrome собирает только маски PNG, Opera вообще не является webkit. Требуются другие идеи

6
задан jeff 6 August 2012 в 17:22
поделиться