我在div的底部有一个透明的div，带有图像背景。一切都还可以，但在透明部分的圆角处，背景图像"发光槽"。
有一个链接到小提琴：
http://jsfiddle.net/jw1k98dt/
这是我的html:
<div id="zkus">
<div id="zkus_popis"></div>
</div>
这是我的css：
#zkus{
background: url('test.jpg');
width: 200px;
height: 180px;
background-size: 100%;
box-shadow: inset 0px 0px 20px #d1cfcf;
/* box-shadow: 0 0 10px #5c5c5c;*/
border-radius: 12px 12px 15px 15px;
position: relative;
overflow: hidden;
display: inline-block;
/* border: 1px solid #8d8d8d;*/
margin: 0 12px 10px 10px;
}
#zkus_popis{
width: 200px;
height: 35px;
background-color: #000000;
position: absolute;
bottom: 0;
opacity: 0.9;
border-radius: 0px 0px 12px 12px;
overflow: hidden;
}
谢谢..：）
以前曾多次报告此错误（请参阅此报告和链接的重复项https://bugs.webkit.org/show_bug.cgi?id=23166，firefox：https://bugzilla.mozilla.org/show_bug.cgi?id=921341），因为即使使用background-clip: border-box也无法正确地剪辑内容，留下一些像素流血。
您可以通过应用（触发浏览器的3D加速）来解决webkit基于浏览器的问题：
-webkit-backface-visibility:hidden;
http://jsfiddle.net/easwee/8up9pkfo/
在Firefox中，他们似乎已经意识到了这个问题，但仍在等待与同一代码相关的另一个错误修复-我无法为Firefox提供纯粹的CSS解决方案，但你可以尝试在Firefox中使用SVG剪辑来解决它。。
我成功地使用了两种不同的方法之一：
-
将
backface-visibility应用于#zkus_popis:-webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden;工作示例
-
将小型
transform应用于#zkus_popis:-webkit-transform: translateZ(1px); -ms-transform: translateZ(1px); -o-transform: translateZ(1px); transform: translateZ(1px);工作示例
我尝试添加一个黑框阴影来尝试屏蔽背景图像。它有点粗糙，但它有效。
#zkus{
background: url('http://zkusebny2.chlupac.com/images/test.jpg');
width: 200px;
height: 180px;
background-size: 100%;
border-radius: 12px 12px 15px 15px;
position: relative;
overflow: hidden;
display: inline-block;
box-shadow: inset 0px 0px 0px 1px #000000, 0px 0px 0px 1px #000000;
margin: 0 12px 10px 10px;
}
#zkus_popis{
width: 200px;
height: 38px;
background-color: #000000;
position: absolute;
bottom: -3px;
opacity: 1;
}
-webkit-backface-visibility: hidden;
是一个解决方案，但它不是很可靠，因为例如，如果我有梯度背景，它看起来是这样的http://jsfiddle.net/jw1k98dt/30/（角落里有黑色的东西）。
如果你在两个div上设置相同的半径，它看起来是这样的http://jsfiddle.net/jw1k98dt/31/.那么拐角的半径应该是多少呢？
#zkus{
border-radius: 10px 10px 0 0;
}