css - 如何为按钮设置轮廓？

Question

我需要为按钮设置轮廓，我试过了

.btn{
  border: 1px double #A8A8A8;
  outline: 1px solid #9F9F9F;
  outline-offset: -4px;
}

它在 chrome 中运行良好......但它在 firefox 中表现出不同的行为......我知道当它在 box-shadow 之外绘制时，firefox 对轮廓的反应不同......

有没有其他方法可以实现这一点？？？？请帮忙提出一些建议......我需要像这个小提琴中的那个 http://jsfiddle.net/JR7Hj/80/

Answer 1

您可以尝试使用盒子阴影来模仿这种效果。不幸的是，这会使原始按钮渐变的一小部分变平。但是，如果您的原始按钮是扁平的，则这不是问题。这是一个比较屏幕截图：

http://jsfiddle.net/JR7Hj/83/

.btn {
border: 1px double #A8A8A8;
box-shadow: 0 0 0 2px  #f5f5f5 inset, 0 0 0 3px  #A8A8A8 inset;
}

Answer 2

我会这样做（不需要css3）：

.btn {
    padding: 2px 10px;
    border: 4px double #A8A8A8;
}

.btn:active {
    padding: 5px 13px;
    border: 1px solid #A8A8A8;
}

http://jsfiddle.net/elias94xx/JR7Hj/88/