基础按钮 CSS/SASS答案

【问题标题】：Foundation Button CSS/SASS基础按钮 CSS/SASS
【发布时间】：2013-07-29 21:58:21
【问题描述】：

我正在尝试使用 SASS/CSS 扁平化 Zurb Foundation 的默认外观。目前我遇到了按钮问题。按钮顶部有一个突出显示（大约一个像素的高度），这使按钮具有标准的按钮外观。 我想摆脱这个亮点。我也在使用 SASS 来管理 CSS，但我什至无法弄清楚那个亮点来自哪里。

我尝试使用开发者工具在 IE 和 Chrome 中追踪它，但似乎无法弄清楚。任何人都知道如何摆脱按钮顶部的突出显示？

【问题讨论】：

【解决方案1】：

只需移除顶部边缘的盒子阴影，高光就消失了。

在 SASS/COMPASS 中：@include box-shadow(none) 应该可以完成这项工作。因此，完整的解决方案将是，添加

.button {
    @include box-shadow(none)
}

到你的 sass 文件。

【讨论】：

【解决方案2】：

它来自box-shadow。应用以下内容：

.button {
    box-shadow: none;
}

【讨论】：

【解决方案3】：

添加到您的 CSS 文件：

.button {
    box-shadow: none;
}

【讨论】：