3

是否可以使用 CSS3 制作这种类型的边框？

在此处输入图像描述

4

3 回答 3

4

有可能，您需要使用图像和边框图像属性。

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

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

于 2012-06-05T18:46:17.087 回答
1

我测试了一个 hack 来做这个，两个 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/

于 2012-06-06T13:54:05.420 回答
0

这是关于border-image 属性的好读物。

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

于 2012-06-06T04:24:10.860 回答