如何设置按钮的轮廓？

Question

我需要设置一个按钮的轮廓，我试过

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

它在chrome中运行良好......但它在firefox中表现出不同的行为......我知道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/