0

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

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

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

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

4

2 回答 2

2

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

在此处输入图像描述

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

.btn {
border: 1px double #A8A8A8;
box-shadow: 0 0 0 2px  #f5f5f5 inset, 0 0 0 3px  #A8A8A8 inset;
}
于 2012-12-24T11:50:09.853 回答
1

我会这样做(不需要css3):

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

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

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

于 2012-12-24T11:52:19.140 回答