html - 如何将周期性图像作为边框添加到 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

边框.png:
_{(来源:w3schools.com)}