我正在努力解决基于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