色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

CSS/border-image/border-image-slice/導(dǎo)致非常小的間隙，如分割線

CSS

我有以下代碼:

<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>

您可以在以下網(wǎng)址找到:

https://codesandbox.io/s/q8nm9v2k34

這里有一個(gè)預(yù)覽:

https://q 8n M9 v2 k 34 . code sandbox . io

我的問題是，在Chrome上有一些像分割線一樣的小間隙，就像你在下面的圖片中看到的那樣:

Chrome: -不好(請(qǐng)注意邊角上微小的分割線)

enter image description here

火狐:-好的

enter image description here

這是統(tǒng)計(jì)數(shù)據(jù):

窗口:

鉻:壞 火狐:好的 邊緣:好的 Mac:

鉻:壞 Safari:不好 你能把我的Codesandbox.io放到上面，應(yīng)用你的解決方案，并把它的鏈接粘貼到這里嗎？

謝謝！

一個(gè)想法是分裂的形象，并添加更多的背景層，你可以有一個(gè)更好的結(jié)果。

.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>

我發(fā)現(xiàn)你可以通過(guò)設(shè)置一個(gè)接近邊框顏色的背景顏色來(lái)使它看起來(lái)更好。

不幸的是，如果你需要元素滾動(dòng)，這就失敗了，因?yàn)橛辛藵L動(dòng)條，Chrome就把背景色放在了背景圖片的上面