CSS中消息框边框不显示问题排查求助

你的消息框边框不显示的核心原因是CSS语法错误——background-color和border属性末尾都缺少分号（;），导致浏览器无法正确解析这两个属性及后续样式，自然不会渲染边框。

修正后的CSS代码 #

#LoginMessage {
    box-sizing: border-box;
    background-color: #7a2310; /* 补上缺失的分号 */
    border: 1px solid #f00; /* 补上缺失的分号 */
    border-radius: 20px;
    padding: 0 14px;
}

额外优化建议 #

1. JavaScript里keys变量未声明，会成为全局变量，建议改为：

   const keys = [];
   

   或者直接用Object.keys(UToP)替代循环取键值，更简洁：

   const keys = Object.keys(UToP);
   

2. 成功提示里的单词拼写错误：sucessfully 应改为 successfully
3. 密码为空的判断逻辑位置有误，当前会覆盖前面的密码错误提示，建议调整到最外层：

   function login() {
       var username = document.getElementById("username").value;
       var password = document.getElementById("password").value;
       const paragraph = document.getElementById("LoginMessage");
       const keys = Object.keys(UToP);
   
       if (password === "") {
           paragraph.innerHTML = "No password entered.";
           paragraph.style.color = "red"; // 推荐单独设置样式属性，避免覆盖其他内联样式
           return;
       }
   
       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 + " successfully.";
               paragraph.style.color = "green";
           } else {
               paragraph.innerHTML = "Incorrect password for " + username + ".";
               paragraph.style.color = "red";
           }
       }
   }
   

内容的提问来源于stack exchange，提问作者Slothscript