我正在努力解决基于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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。