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

Question

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

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

它在 chrome 中运行良好......但它在 firefox 中表现出不同的行为......我知道 firefox 在框阴影外绘制时对轮廓的 react 不同......

还有其他方法可以实现吗？？？？请帮忙提供一些建议...我需要像这个 fiddle 中的那个 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;
}