图片按钮出现白色边框的原因及去除方法求助

问题描述 #

刚学习编程，发现页面中包含图片的按钮周围出现白色边框，尝试将图片格式从jpeg改为png后仍未解决问题。

问题截图 #

相关代码 #

HTML代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>pokemon cards </title>
    <link rel="stylesheet" href="style.css">
</head>
<body class="back">
    <div class="title">
        <h1>pokemon cards</h1>
    </div>
    <div class="hidden">
        <button>BLABLA</button>
        </br>
        <button>BLABLABLA</button>
    </div>
    <div class="menu">
        <button>
            <img src="images/white-hamburger-menu-icon-27.png" alt="menu button">
        </button>
    </div>
    <script src="scripts.js"></script>
</body>
</html>

CSS代码

.title{
    display: flex; 
    justify-content: center; 
    align-items: center; 
    background-color: #333; 
    color: aliceblue; 
    position: relative; 
    text-align: center; 
}
.back{
    background-color: rgb(22, 22, 22); 
    margin: 0; 
    padding: 0; 
    font-family: Arial, sans-serif;
}
.hidden{
    display: none;
}
.menu{ 
    position: absolute; 
    padding: 0; 
    transform: translateY(-50%); 
    top: 30px; 
    display: block; 
    border-width: 0px 
}
.menu img{
    width: 100px; 
    height: 100px; 
    background: none; 
    background-color: transparent; 
    border-color: #333; 
    display: block;
}

解决方法 #

白色边框不是来自图片本身，而是<button>元素的默认浏览器样式。浏览器会给按钮默认添加边框、内边距和背景色，仅修改图片样式无法解决，需要给按钮重置样式：

在你的CSS文件中添加以下代码：

.menu button {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

你也可以直接整合到现有样式中，简化后的CSS部分如下：

.menu{ 
    position: absolute; 
    padding: 0; 
    transform: translateY(-50%); 
    top: 30px; 
    display: block; 
}
.menu button {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
}
.menu img{
    width: 100px; 
    height: 100px; 
    display: block;
}

关键样式说明：

• border: none：移除按钮默认边框
• background: transparent：将按钮默认背景设为透明
• padding: 0; margin: 0：清除按钮默认内外边距，避免图片周围出现空白
• cursor: pointer：保留按钮的点击指针样式，提升交互体验

内容的提问来源于stack exchange，提问作者一团空气