如何用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/