Question

我有以下代码：

<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>border-image slice issue</title>
<style type="text/css">
.container {
  width: 600px;
  height: 344px;
  background-color: rgb(255, 245, 187);
}
.frame {
  opacity: 1;
  position: absolute;
  display: block;
  width: 800px;
  height: 1000px;
  background-image: url('https://i.ibb.co/wQSgvS7/jessica.jpg'), url('https://i.ibb.co/1ssy41c/mcol-papyrus-bg.png');
  background-size: 500px 700px, auto;
  background-position: center center;
  background-repeat: no-repeat, repeat;
  border-width: 0;
  border-image: url('https://i.ibb.co/N22Y8qg/fra-basic-black-wood-bg.png') repeat;
  border-image-slice: 100 fill;
  border-image-width: 100px;
  border-style: inset;
  transform-origin: 0px 0px;
  transform: matrix(0.344, 0, 0, 0.344, 162.4, 0); /* keep this line */
}
</style>
</head>
<body>
  <div class="container">
    <div class="frame"></div>
  </div>
</body>
</html>

您可以在以下位置找到

：

https://codesandbox.io/s/q8nm9v2k34

这里有一个预览：

https://q8nm9v2k34.codesandbox.io

我的问题是，在Chrome上有一些细小的间隙，如分隔线，如下图所示：

Chrome浏览器：-不好（请注意角落处的细小分隔线）

Firefox：-确定

这里有统计信息：

窗口：

Chrome浏览器：不良
Firefox：确定
边缘：确定

Mac：

Chrome浏览器：不良
Safari：糟糕

能否请您将我的Codesandbox.io放在上面，应用您的解决方案并将其链接粘贴到此处？

谢谢！

Answer 1

一个想法是分割图像并添加更多背景层，您可以获得更好的结果。

.frame {
    display: block;
    width: 800px;
    height: 1000px;
    background: 
      url(https://i.ibb.co/wQSgvS7/jessica.jpg) center/500px 700px no-repeat padding-box, 
      url(https://i.ibb.co/1ssy41c/mcol-papyrus-bg.png) padding-box,
      /* Corners */
      url(https://i.stack.imgur.com/TvoN2.png) bottom left /100px 100px border-box no-repeat,
      url(https://i.stack.imgur.com/GzJik.png) top    left /100px 100px border-box no-repeat,
      url(https://i.stack.imgur.com/0r7ag.png) top    right/100px 100px border-box no-repeat,
      url(https://i.stack.imgur.com/3yWVf.png) bottom right/100px 100px border-box no-repeat,
      /* Borders */
      url(https://i.stack.imgur.com/Mhf03.png) bottom/100px 100px border-box repeat-x,
      url(https://i.stack.imgur.com/h51w6.png) left  /100px 100px border-box repeat-y,
      url(https://i.stack.imgur.com/Jt4uz.png) top   /100px 100px border-box repeat-x,
      url(https://i.stack.imgur.com/sp0wZ.png) right /100px 100px border-box repeat-y;
    border: 100px solid transparent;
    transform-origin: 0px 0px;
    transform: matrix(0.344, 0, 0, 0.344, 162.4, 0); /* keep this line */  
  }
body { 
 background:pink;
}

<div class="frame"></div>

CSS / border-image / border-image-slice /造成很小的间隙，例如分隔线

1 个答案: