溢出：在移动浏览器上以border-radius隐藏

Question

如何在Android浏览器中使用div创建模板border-radius？

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中它可以正常工作。

Answer 1

Android设备上根本不支持。

您可以尝试以下操作：

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

我希望这会有所帮助。