我在基于 Webkit 的浏览器上遇到一个问题,如果我将边框半径添加到 div,然后将 -moz-translate3d 应用于 ul 内部(这是因为在原始示例中我使用的是 flexslider 幻灯片),边框半径不适用并通过容器流血。
为了清楚地理解我在说什么,这里有一个关于这个问题的小提琴例子。如果我删除 translate3d 属性,则会应用边框半径。
HTML:
<div class="wrapper">
<ul>
<li>
<div class="caption"><p>Test</p></div>
</li>
<li>
<div class="caption"><p>Test</p></div>
</li>
<li>
<div class="caption"><p>Test</p></div>
</li>
<li>
<div class="caption"><p>Test</p></div>
</li>
</ul>
</div>
CSS:
.wrapper {
border-radius: 20px;
position: relative;
width: 500px;
height: 200px;
overflow: hidden;
}
.caption {
position: absolute;
bottom: 0;
left: 0;
background-color: rgba(0,0,0,0.8);
padding: 2rem;
-webkit-box-sizing: border-box;
width: 100%;
height: 3rem;
color: #fff;
}
ul {
width: 800%;
-webkit-transform: translate3d(-500px, 0, 0);
}
li {
float: left;
width: 500px;
height: 200px;
background-color: #000;
position: relative;
}
.caption p {
color: #fff;
}
在 Mac 和 Windows 上的 Chrome 最新版本上对其进行了测试。
提前致谢!