Мне нужно сделать мою карту 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. Требуются другие идеи