Радиус границ и замечательные проблемы с перекрестным браузером - простое исправление?

Я размещаю радиус границы вокруг изображения и вокруг div. На данный момент я тестирую только Safari и Firefox. Оба дают разные результаты.

Для изображения у меня есть:

margin:0;
border-style: solid;
border-color: #fff;
border-width: 6px;

border-radius: 46px;
-webkit-border-radius: 46px;
-moz-border-radius: 46px;

Результат в Firefox - красивый. Safari - левый радиус не гладкий, похоже, что угол немного отрублен.

Для Div я имею:

border-right-style: groove;
border-right-color: #eee;
border-right-width: 6px;

border-bottom-left-radius: 46px;
-webkit-border-bottom-left-radius: 46px;
-moz-border-bottom-left-radius: 46px;

border-top-right-radius: 46px;
-webkit-border-bottom-right-radius: 46px;
-moz-border-bottom-right-radius: 46px;

Результат в Safari - красивый. Firefox - нижний угловой радиус не отображается. Это верхняя часть.

Есть ли что-то очевидное, что мне не хватает? Есть ли решение или способ решения этого вопроса?

EDIT: я обновил порядок, в котором они указаны в соответствии с http://css-tricks.com/almanac/properties/b/border-radius/, но все тот же результат

2 ответа

чтобы иметь более плавные границы в сафари, вы должны подделывать свои границы с помощью теневой тени или добавлять тонкую коробчатую тень. http://codepen.io/gcyrillus/pen/jbxDo

Непрерывный пограничный радиус, по моему мнению, должен быть последним правилом. Если четыре угла имеют одинаковое значение радиуса, следует использовать короткий путь для его записи :)?

У старшей версии сафари/хром были ошибки с изображением.


Убедитесь, что вы указали переполнение: скрыты на div с радиусом границы

licensed under cc by-sa 3.0 with attribution.