带边框图像的虚线边框

Question

我有三个覆盖层2，背景图像和11或内容。

在内容中，我放置了带有虚线边框的输入按钮标签。

我想要实现的是仅在破折号上从第1层获得相同的背景图层图像。

明显的背景：透明不起作用所以对于第二选择我使用输入边界并尝试通过将boarder-image设置为来自第1层的背景图像来模拟此行为。

.button {
font-family:verdana, sans-serif;
font-size: 20px;
font-weight: bold;
background: transparent;
border-width:5px;
border-style:dashed;
border-color: black; }

因此，提交按钮周围的所有破折号应该具有与左侧第一层相同的背景

我把它改为：

.button {
font-family:verdana, sans-serif;
font-size: 20px;
font-weight: bold;
background: transparent;
border-width:5px;
border-style:dashed;
border-color: black;
border-image: url(/img/bg1.jpg); }

我不知道如何用boarder-image

实现虚线外观

with：border-image：url（/img/bg1.jpg)30 30 round;

http://jsfiddle.net/6vKdh/3/

Answer 1

CSS border-image语法是这样的：

border-image: source slice width outset repeat|initial|inherit;

所以你错过了那些东西。

尝试替换您的border-image

border-image: url(/img/bg1.jpg);

这个例子：

border-image: url(/img/bg1.jpg) 30 30 round;

了解更多文档： CSS3 Border-Image