Question

我正在尝试使用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>。

Answer 1

没关系，可能你使用的是旧版本的浏览器，它不支持border-radius-top-left等。

但要确保添加此行：

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

Answer 2

问题不在于浏览器不支持简写border-radius属性，而是默认情况下移动WebKit浏览器将半径应用于所有输入元素。您需要将其他角的边界半径设置为零以将其删除：

border-radius: 3px 3px 0 0;

注意当使用短边作为边框半径时，顺序是顺时针：左上角，右上角，右下角，左下角。

特定角落的边界半径不适用于移动设备

2 个答案: