Question

我正准备在铬问题跟踪器上创建一个错误，但后来我想先在这里尝试一下。

试试看这个网站： http://www.norabrowndesign.com/css-experiments/border-image-frame.html

然而，看起来Chrome确实支持border-image-outset，所以我想。

它响应命令，但行为不像我预期的那样。是向外移动图像，从而在内容周围创建更多的空白而不是更少。阅读规范我不确定chrome在做它做的事情上是不是错了，但是链接网站的作者肯定期待别的东西。

此外，如果目前的行为是正确的，那么我无法看出它的目的是什么。而大边框图像的问题根本就没有解决方案。

那么它是什么，我应该提交错误还是？

Answer 1

我相信Chrome的行为应该如此。 border-image-outset应该将边框图像区域扩展到边框之外。它似乎在Chrome中这样做。删除内容周围的空白将需要在border-image-width的帮助下实现相反的目标。

border-image-width划分边框图像区域，基本上与border-image-slice（划分边框图像）相对应。它的初始值是1（相应的计算border-width的倍数）。因此，如果不指定border-image-width，则每个切片都会调整为border-width。

请参阅w3.org上的border-image-width

要删除内容周围的空白，同时保持边框图像的大小，您必须减少border-width并将border-image-width设置为适当的值。

在您的问题示例中尝试以下更改：

#one {
  border-width: 74px;
  border-image-width: auto;
}

border-image-outset是否正常工作？

1 个答案: