特定角落的邊框半徑在手機上不起作用

我正在嘗試使用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

特定角落的邊框半徑在手機上不起作用

回答

相關問題