特定角落的边框半径在手机上不起作用

我正在尝试使用border-radius-top-left等，但是当我在手机上查看该页面时，它会将其视为只是边框半径并将其应用于所有角落。当我在桌面上查看它时，它工作正常。特定角落的边框半径在手机上不起作用

.container { 
    display: inline-block; 
    float: left; 
    width: calc(90vw - 20px); 
    margin: 0 5vw; 
    background: rgba(255,255,255,0.05); 
    font-size: 15px; 
    color: #ffffff; 
    height: 40px; 
    padding: 0 10px; 
    outline: none; 
    margin-top: 25px; 
    border-top-left-radius: 3px; 
    border-top-right-radius: 3px; 
    border: 1px solid rgba(255,255,255,0.25); 
}

不知道这是否是相关的，但CSS被应用于<input>。

来源

2016-09-28 Ryan O' Connor

您在手机中使用了哪些浏览器？ –

@byoigres我试过Chrome和Safari，它的问题都在 –

看看是否有帮助http://stackoverflow.com/questions/17202128/rounded-cornes-border-radius-safari-issue – Phiter

没事的，可能是你使用的是旧版本的浏览器，它不支持边界半径，左上等

但是，为了确保加入这行：

border-radius: 0; // Add this line 
border-top-left-radius: 3px; 
border-top-right-radius: 3px;

来源

2016-09-28 23:26:34

我正在使用一个iPhone 5运行iOS 10 –

好吧，你有没有尝试border-radius：0; ？ –

如果之前添加： border-top-left-radius：3px; border-right-right-radius：3px; 这两行。 –

问题不在于浏览器不支持速记边框半径属性，而是默认情况下，移动WebKit浏览器将半径应用于所有输入元素。使用短手时圆角半径的顺序是顺时针

border-radius: 3px 3px 0 0;

注：左上，右上，右下您需要的其他角落的圆角半径设置为零，将其删除，左下方。

来源

2016-09-28 23:34:14 Andy

特定角落的边框半径在手机上不起作用

回答

相关问题