У меня есть следующий код:
<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: BAD
- Firefox: ОК
- Край: ОК
Mac:
Не могли бы вы, раскошелиться на мой Codesandbox.io выше, применить свое решение и вставить сюда ссылку?
Спасибо!