1

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

带有帽子插图的可调整大小的图像。

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

4

2 回答 2

3

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

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

交互式演示在这里

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

于 2012-11-11T17:38:13.240 回答
0

这看起来你可以通过使用纯 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;
}
于 2012-11-11T15:59:43.110 回答