Как включить сглаживание закругленных углов в браузере Android?

Question

Я установил закругленные углы в CSS следующим образом:

input { -webkit-border-radius: 1em; }

В настольном браузере (Chrome, FF) углы округлены и довольно гладкие (сглаживание). Однако в браузере Android (даже 2.3) углы скруглены, но не гладкие, они выглядят довольно плохо - неровно ...

Если есть какой-то хакер CSS или другое решение, пожалуйста, помогите.

Answer 1

По моему опыту (во всех браузерах) углы с border-radius выглядят лучше, если их размер равен четному числу пикселей.

Так что border-radius: 10px; выглядит лучше, чем border-radius:9px;

Мой опыт в основном относится к настольным браузерам, но я могу понять, как этот эффект может быть похож на мобильные устройства.

Интересно, отличается ли размер вашего устройства em от настольного компьютера до мобильного?

Возможно, стоит поэкспериментировать с несколькими различными размерами (даже в пикселях, только для эксперимента), чтобы увидеть, какую разницу они имеют.Возможно, небольшое изменение будет иметь большое значение.

Answer 2

Существует еще одно решение (обходной путь), позволяющее улучшить границы и сделать их более гладкими:

-webkit-box-shadow: 0 0 1px #000;

Добавляет тень шириной 1px (размытое) с координатами 0 x, y, сглаживая сглаживание на элементе, округленном в прямоугольник.

Чтобы предотвратить нацеливание этого правила на все браузеры -webkit (например, настольное сафари, которое хорошо отслеживает границы), вы можете указать целевой диапазон устройств, которые вам нужны с помощью медиазапросов.

Более широкий ответ на вопрос: Псевдоним границы веб-интерфейса Android