如何用CSS实现这种按钮边框效果？ （包括图片）

Question

现在，我们的模型/现场演示使用图像来实现这种效果（包括按钮文本）。由于所有标准原因，这都不太理想。除了讨厌的外边界外，我可以把一切都搞定。我真的不想在我的文档中添加标记只是为了拥有它。

我在jsfiddle上有我的测试代码，虽然它在我的本地机器上运行不正常：http://jsfiddle.net/Axtjm/

tldr：如何像这样添加插入边框并保留圆角而不需要额外的标记。

Answer 1

听起来不直观，请勿使用outline作为轮廓。将box-shadow与1px点差使用

box-shadow: 0px 0px 1px 1px #049ED9;

演示：http://jsfiddle.net/Axtjm/4/

Answer 2

最简单的选择是添加额外的容器元素并为每个元素添加边框。

但挑战在于没有边界。一些想法：

• 使用边框然后使用非常薄的盒子阴影。
• 使用边框样式属性和大纲样式属性

（两者都取决于支持它们的浏览器）

快速JSBIN演示：http://jsbin.com/irabul

Answer 3

它正在使用CSS3的border-radius属性 和简单的CSS边框技术，

一些边境财产，

solid   Specifies a solid border  
double  Specifies a double border  
groove  Specifies a 3D grooved border. The effect depends on the border-color value  
ridge   Specifies a 3D ridged border. The effect depends on the border-color value  
inset   Specifies a 3D inset border. The effect depends on the border-color value  
outset  Specifies a 3D outset border. The effect depends on the border-color value  
inherit     Specifies that the border style should be inherited from the parent element

这里是border-radius的详细信息，

http://www.css3.info/preview/rounded-border/

Answer 4

使用插入框阴影。如果您已经在按钮上使用了框阴影，请记住您可以使用逗号分隔每个框阴影来堆叠框阴影。

button {
 border: 1px solid #369;
 box-shadow: inset 0 0 1px #fff, 1px 1px 2px #000;
}

上面只是一个例子;如有必要，用您自己的值替换值。如果你想要一个更大胆的插入阴影，你也可以堆叠两个具有相同值的插图来实现它。

实例：http://jsfiddle.net/Axtjm/5/