如何使用CSS3製作這種類型的邊框？

Question

是否可以使用CSS3製作這種類型的邊框？

Answer 1

這是可能的，你需要使用一個圖像和邊界圖像財產。

http://www.w3.org/TR/css3-background/#the-border-image

http://css-tricks.com/understanding-border-image/

Answer 2

這是邊界圖像性能很好看。

http://ejohn.org/blog/border-image-in-firefox/

Answer 3

我測試黑客的使這個，有兩個div的，拳頭一個使邊框與背景線性漸變。第二個是用來放置你的內容。

療法是我的CSS代碼段：

div { 
    background-color: gray; 
    width: 200px; 
    height: 200px; 
} 
.border { 
    background-image: -webkit-linear-gradient(45deg, white 25%, transparent 25%, transparent 75%, white 75%, white), 
    -webkit-linear-gradient(-45deg, white 25%, transparent 25%, transparent 75%, white 75%, white); 
    background-size: 10px 10px; 
    padding:5px; 
} 

而且你可以看看我的小提琴： http://jsfiddle.net/DoubleYo/zSnDG/1/