如何摆脱按钮上的阴影？答案

【问题标题】：How to Get Rid of the Shadow on Buttons?如何摆脱按钮上的阴影？
【发布时间】：2014-12-01 15:15:28
【问题描述】：

我正在尝试消除此按钮上的边框阴影（而不是边框本身）。显然我无法发布图片...但这是 HTML：

&lt;input type="button" value="ok" /&gt;

它就像一个小阴影出现在按钮的底部和右侧。有什么想法吗？

【问题讨论】：

我在 Chrome 或 FF 中看不到任何边框阴影。
你试过用 CSS 设置 border 属性吗？
是的，边框和背景设置为相同的颜色。没关系，它不是真正的阴影，但更像是按钮看起来 3d。知道如何摆脱它吗？

标签： javascript html button styling

【解决方案1】：

设置border: 0 至少会移除 chrome 上的任何阴影效果

【讨论】：

适用于我所知道的所有浏览器。谢谢！

【解决方案2】：

尝试将背景颜色设置为您想要的颜色，它应该会消除阴影。
这样您就可以强制浏览器以纯色呈现您的按钮。

如果这仍然不适用于所有浏览器，请制作您想要的颜色的 1x1 像素图像并将其设置为按钮的背景图像。

正如 j08691 所说，阴影不会出现在 chrome 中。您可能还想查看 CSS 重置。

【讨论】：

为什么是-1？您至少可以留下反馈意见吗？

【解决方案3】：

尝试做一个与按钮背景颜色相同的边框。如果你的按钮是白色的，试试这个：border:2px solid #fff;。那么就没有影子了。它在浏览器之间也是一致的。请记住，按钮因操作系统而异。在 mac os x 上，按钮的默认样式并没有真正的边框，但在 xp 中我会想象有一个阴影。希望这有助于告诉我它是否不适合您。

【讨论】：

【解决方案4】：

不确定您的问题是什么，请将图片发布到 imgur。

border-style:1px solid; 或 box-shadow: 0px 0px 0px #000000; 的任一样式都可以解决您的问题（希望如此）

fix border and shadow <input type="button" style="box-shadow: 0px 0px 0px #000000; border-style: 1px solid;" value="ok" /><br/>
fix border <input type="button" style="border-style: 1px solid;" value="ok" /><br/>
fix shadow <input type="button" style="box-shadow: 0px 0px 0px #000000;" value="ok" /><br/>
large border <input type="button" style="border-style: 100px solid;" value="ok" /><br/>
create shadow <input type="button" style="box-shadow: 10px 10px 10px #888888;" value="ok" /><br/>

请注意，并非所有浏览器都显示正确的边框样式宽度

【讨论】：

可能不是阴影，因为我尝试将 box-shadow 设置为红色，但没有任何反应。该按钮看起来是 3d。我对 Imgur 无能为力（我的学校屏蔽了该网站）。有什么办法可以消除 3d 效果？