按钮高度的白色横线覆盖屏幕问题求助（SCSS/JSFiddle）

问题根源分析 #

1. 全局伪类选择器范围错误：你写的:hover和:active是全局选择器，会作用于页面所有元素（包括<body>这类根元素）。当鼠标在页面移动时，这些元素会被应用border-color样式，浏览器会自动添加默认边框宽度，从而出现横跨屏幕的白色横线。
2. 无效的居中样式：.center类里的margin: center不是合法的CSS值，无法实现按钮的水平居中。
3. 字体属性错误：font-style: bolder是错误用法，font-style用于设置字体样式（如斜体），字体粗细应该用font-weight。

修正后的SCSS代码 #

$color1: #010226;
$color2: #fcdbab;

.button {
  width: 100px;
  height: 75px;

  border: 10px solid $color1;
  border-bottom-style: dotted;
  border-radius: 20px;
  padding: 0 10px;
  background-color: $color1;

  font-family: "Raleway";
  font-size: 20px;
  font-weight: bolder;
  color: $color2;
}

.center {
  margin: 0 auto;
  text-align: center;
}

.button:hover {
  border-color: lighten($color1, 10%);
}

.button:active {
  border-color: lighten($color1, 15%);
}

html, body {
  margin: 0;
  background: linear-gradient(to left, peachpuff, coral);
}

关键修改说明 #

• 把全局的:hover、:active改为.button:hover、.button:active，确保样式仅作用于按钮。
• 将.center的margin: center替换为margin: 0 auto，这是块级元素水平居中的标准写法。
• 修正font-style: bolder为font-weight: bolder，正确设置字体粗细。
• 给html和body添加margin: 0，消除浏览器默认边距，避免页面不必要的留白或滚动条。

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