Как включить сглаживание закругленных углов в браузере Android?
Я установил закругленные углы в CSS, как это:
input { -webkit-border-radius: 1em; }
В настольном браузере (Chrome, FF) углы закруглены и довольно гладкие (сглаживание). Однако в браузере Android (даже 2.3) углы закруглены, но не гладкие, они выглядят довольно плохо - неровно...
Если есть какой-то хакер CSS или другое решение, пожалуйста, помогите.
2 ответа
Мой опыт (во всех браузерах) заключается в том, что углы сделаны с border-radius выглядят лучше, если они имеют четное количество пикселей по размеру.
Так border-radius: 10px; выглядит лучше чем border-radius:9px;
Мой опыт в основном касается настольных браузеров, но я вижу, как этот эффект может быть похож на мобильные телефоны.
Интересно, если размер вашего em Устройство отличается по размеру между настольным и мобильным?
Возможно, стоит поэкспериментировать с несколькими различными размерами (даже в пиксельных размерах, просто для эксперимента), чтобы увидеть, какую разницу они имеют. Возможно, небольшое изменение будет иметь большое значение.
Есть еще одно решение (обходной путь), чтобы улучшить границы и сделать их более гладкими:
-webkit-box-shadow: 0 0 1px #000;
Добавляет тень шириной 1px (размытый) с координатами 0, y, сглаживая сглаживание на элементе, округленном в прямоугольник.
Чтобы предотвратить нацеливание этого правила на все браузеры -webkit (например, настольное сафари, которое хорошо отслеживает границы), вы можете указать целевой диапазон устройств, которые вам нужны, с помощью медиа-запросов.
Более широкий ответ на: Android WebView псевдоним границы