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

Question

现在，我们的模拟/现场演示使用图像来实现这种效果（包括按钮文本）。由于所有标准原因，这并不理想。除了那个讨厌的外边界之外，我可以让所有的工作都可以工我真的很想不添加标记到我的文档只是为了这样做。

我已经有了我的jsfiddle测试代码，但它不工作，以及有因为它在我的本地机器上：http://jsfiddle.net/Axtjm/

tldr：如何添加插图边框一样，并保持圆角无额外的标记。

Answer 1

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

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

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

现场示例：http://jsfiddle.net/Axtjm/5/

Answer 2

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

但是，挑战是如何在没有边界的情况下进行。一些想法：

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

（均依赖于浏览器支持他们）

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

Answer 3

它使用CSS3的边界半径财产 和简单的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 

这里是详细的边界半径，

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

Answer 4

由于直观，因为这听起来，没有为轮廓使用outline。使用box-shadow用1px传播：

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

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