【问题标题】：CSS add an inset bottom border on mouseoverCSS在鼠标悬停时添加一个插入的底部边框
【发布时间】：2013-07-14 08:59:28
【问题描述】：

我的老板希望我修改菜单 - 它是由图像组成的，现在他希望我用 CSS 来制作按钮。我创建了按钮，但现在我需要在鼠标悬停时更改它们，如图所示：

现在，我真的不是设计师，我宁愿从事服务器端的工作，但我需要这样做。我创建的按钮的代码是：

a { 
    text-transform:none;
    color:#F1EFED;
    padding:10px;
    background-color: #84c225;
}

我怎样才能得到这个效果？

【问题讨论】：

可以稍微修改一下你的html吗？
是的，没问题
为什么要更改 HTML？

标签： html css button styles

【解决方案1】：

a {
    text-transform:none;
    text-decoration:none;
    color:#F1EFED;
    padding: 10px;
    background-color: #84c225;
}
a:hover {
    padding-bottom: 4px;
    border-bottom: 6px solid #97e127;
}

http://jsfiddle.net/jTC9C/1/

这是如何工作的：

悬停时，您将 padding-bottom（以 px 为单位）减少您希望应用的边框的大小。

奖金 - 过渡

如果要添加 CSS3 过渡，则必须拆分边框定义，并改用 border-bottom-width，因为您无法为复合声明设置动画：

a {
    text-transform:none;
    text-decoration:none;
    color:#F1EFED;
    padding: 10px;
    background-color: #84c225;
    transition: all 0.3s;
    border-bottom: 0px solid #97e127;
}
a:hover {
    padding-bottom: 4px;
    border-bottom-width: 6px;
}

http://jsfiddle.net/jTC9C/2/

【讨论】：

是的，聪明的想法！谢谢
更新答案，以防您想添加过渡。

【解决方案2】：

a:hover{
  box-shadow: inset 0 -5px 0 0 lightgreen
}

演示：http://jsfiddle.net/xPHCd/

您还需要添加其他浏览器特定规则（例如 -moz-box-shadow）

【讨论】：

我正要评论供应商特定的前缀。幸运的是你编辑得这么快。 :) +1 使用 CSS3。
-moz-box-shadow isn't supported after FF13，所以从技术上讲你不需要它，但我想有一个后备是安全的。
@YaMo，我知道。但是人们仍然使用