如何使用CSS3制作这种类型的边框？

Question

是否可以使用CSS3制作此类边框？

Answer 1

有可能，您需要使用图像和border-image属性。

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

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

Answer 2

我测试了一个hack for make，用两个div，第一个用背景线性渐变制作边框。第二个用于放置您的内容。

Ther是我的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/

Answer 3

这是对border-image属性的一个很好的阅读。

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