android - owerflow：在移动浏览器上使用边框半径隐藏

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

安卓设备根本不支持它。

您可以尝试以下方法：

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

我希望这有帮助。