特定のコーナーのボーダー半径はモバイルでは機能しません

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

私は使用していますiOS 10を実行しているiPhone 5 –

さて、あなたはborder-radiusを試してみましたか？？ –

前に追加した場合： border-top-left-radius：3px; border-top-right-radius：3px;この2行はです。 –

問題は、ブラウザが短縮形のborder-radiusプロパティをサポートしていないということではなく、モバイルWebKitブラウザがデフォルトですべての入力要素に半径を適用するということです。それを除去するためにゼロに他のコーナーの境界の半径を設定する必要があります

border-radius: 3px 3px 0 0;

注境界が順序が時計回りであるRADIUSの短手を使用する場合：左上、右上、右下を、左下。

出典

2016-09-28 23:34:14 Andy

特定のコーナーのボーダー半径はモバイルでは機能しません

答えて

関連する問題