作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 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>
你可以找到:
https://codesandbox.io/s/q8nm9v2k34
这里有一个预览:
https://q8nm9v2k34.codesandbox.io
我的问题是,在 Chrome
上有一些小间隙,如分界线,如下图所示:
Chrome: - 不好(请注意 Angular 落上的细小分割线)
Firefox: - 确定
这里有统计数据:
窗口:
苹果机:
能否请您 fork 我上面的 Codesandbox.io
,应用您的解决方案,并将其链接粘贴到此处?
谢谢!
最佳答案
一个想法是拆分图像并添加更多背景图层,您可以获得更好的结果。
.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(/image/TvoN2.png) bottom left /100px 100px border-box no-repeat,
url(/image/GzJik.png) top left /100px 100px border-box no-repeat,
url(/image/0r7ag.png) top right/100px 100px border-box no-repeat,
url(/image/3yWVf.png) bottom right/100px 100px border-box no-repeat,
/* Borders */
url(/image/Mhf03.png) bottom/100px 100px border-box repeat-x,
url(/image/h51w6.png) left /100px 100px border-box repeat-y,
url(/image/Jt4uz.png) top /100px 100px border-box repeat-x,
url(/image/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>
关于javascript - CSS/border-image/border-image-slice/造成像分割线一样的非常小的间隙,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56103610/
我是一个使用 Python 和 PyGTK 的 Linux 软件项目的开发人员。我们正在编写的程序依赖于许多第三方包,这些包可通过所有 mayor 发行版存储库获得。其中之一是 python 绑定(b
我是一名优秀的程序员,十分优秀!