CSS 中不显示边框

Question

我正在做一个网站，我正在做一个消息框。消息框中的边框无法正常工作（它们没有显示）

我为此创建的代码是：

CSS

#LoginMessage {
    box-sizing: border-box;
    background-color: #7a2310
    border: 1px solid #f00
    border-radius: 20px;
    padding: 0 14px;
}

HTML

<p id="LoginMessage"></p>

<script>
    var UToP = {"User1": "Password","User2": "Password"}
    function login() {
        var username = document.getElementById("username").value;
        var password = document.getElementById("password").value;
        const paragraph = document.getElementById("LoginMessage");
        keys = [];
        for(var key in UToP) {
            keys.push(key)
        }
        if (!keys.includes(username)) {
            paragraph.innerHTML = "User: " + username + " does not exist.";
            paragraph.style = "color: orangered;";
        } else {
            if (UToP[username] == password) {
                paragraph.innerHTML = "Logged into user: " + username + " sucessfully.";
                paragraph.style = "color: green;";
            } else {
                paragraph.innerHTML = "Incorrect password for " + username + ".";
                paragraph.style = "color: red;";
            }
            if (password == "") {
                paragraph.innerHTML = "No password entered."
                paragraph.style = "color: red;"
            }
        }
    }
</script>

控制台没有给出任何错误，所以我不知道发生了什么。我还包括了边框类型，所以我知道这不是问题所在。此外，CSS 正在运行，因为当它更改颜色属性时它确实会更改颜色。

Answer 1

您在 CSS 部分忘记了一些分号 - background-color 和 border 缺少分号。应该是这样的：

#LoginMessage {
    box-sizing: border-box;
    background-color: #7a2310;
    border: 1px solid #f00;
    border-radius: 20px;
    padding: 0 14px;
}