如何将定期图像作为边框添加到div

Question

这可能吗？我需要在'div'的边框添加一个周期性的图像/图标或类似的东西。如水管在div的边界行进。

感谢。

Answer 1

看看这个css风格

div
{
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
} 

Working Demo

已修改：

The border-image-slice model

您会注意到创建区域的线条是单独编号的。当这些虚线相交时，它们会创建图像将被切片的九个区域。 那么四个数值如何与上面显示的图像相关联呢？

• 第一个值是距离（以像素为单位或以百分比表示） 在图像的最上边缘和第1行之间。
• 第二个值是最右边和直线之间的距离

  2

• 第三个值是最下边缘和直线之间的距离

  3

• 最后，第四个值是最左边的距离 边缘和线＃4

border.png： http://www.w3schools.com/cssref/border.png