owerflow: скрыть с помощью border-radius в мобильном браузере

0

Как создать маску div с border-radius в браузере Android?

HTML

<div class="box">
    <div class="item"></div>
    <div class="item" style="width:300px;"></div>
</div>

CSS

.box {
    position:relative;
    width:240px;
    height:120px;
    -webkit-border-radius: 10px;
    border-radius: 10px; 
    background:#123456;
    overflow:hidden;
}

.item {
    position:relative;
    width:200px;
    height:50px;
    background:#654321;
    margin: 0 0 20px 0;
}

http://jsfiddle.net/SVjjb/

В iOS он работает правильно.

  • 0
    По английски пожалуйста?
  • 0
    Браузер Android игнорирует переполнение, скрытое с радиусом границы
Теги:

1 ответ

0

Он просто не поддерживается на устройствах Android.

Вы можете попробовать следующее:

border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;

Надеюсь, это поможет.

Поделиться
  • 0
    jsfiddle.net - это не работающее мобильное окно (HTC Wildfire S) имеет круглую границу, границу элемента, но не скругленную границу
  • 0
    Можете ли вы описать немного более ясно, что не работает? Как только я проверяю это на моем браузере Android, он работает. Если вы хотите, чтобы углы вашего элемента делили радиус, вы должны применить вышеуказанный код к этому div.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню