我正在努力解决基于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.8);
padding: 2rem;
-webkit-Box-sizing: border-Box;
width: 100%;
height: 3rem;
color: #fff;
}
ul {
width: 800%;
-webkit-transform: translate3d(-500px,0);
}
li {
float: left;
width: 500px;
height: 200px;
background-color: #000;
position: relative;
}
.caption p {
color: #fff;
}
在Mac和Windows上的Chrome最新版本上进行了测试.
提前致谢！
解决方法
我以前回答过这个问题.这是一个webkit错误.
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
老答案来源
flexslider border-radius does not wrap image in Chrome,Safari,but will in Firefox
