html - CSS重复图像

Question

如何background-image repeat使用 cap insets 定义？我希望图像无边框重复。是否可以在 CSS 中重复（平铺）或拉伸中间？

第一个（较小的）圆角矩形是我的 PNG 图像。红线显示我要定义的帽子插图。后者（更大）应显示为结果。

Answer 1

查看 CSS3边框图像属性。它是为这种事情而设计的。

.box {
  border-image: url(my-image.gif) 20 20 20 20 repeat;
}

交互式演示在这里。

大多数非 IE 浏览器都支持它。

Answer 2

这看起来你可以通过使用纯 css3 来解决这个问题

.box {
 background: white;
 -moz-border-radius: 15px;
 border-radius: 15px;
 -moz-box-shadow:    inset 0 0 10px #000000;
 -webkit-box-shadow: inset 0 0 10px #000000;
 box-shadow:         inset 0 0 10px #000000;
}