为了清楚地理解我在说什么,这是一个关于这个问题的小提琴例子.如果我删除translate3d属性,则应用边框半径.
HTML:
<div > <ul> <li> <div ><p>Test</p></div> </li> <li> <div ><p>Test</p></div> </li> <li> <div ><p>Test</p></div> </li> <li> <div ><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;}
http://jsfiddle.net/R5L3K/12/
在Mac和windows上的Chrome最新版本上进行了测试.
提前致谢!
@H_301_19@解决方法 我以前回答过这个问题.这是一个webkit错误.将此代码添加到您添加边框半径的同一选择器中
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
http://jsfiddle.net/R5L3K/14/
老答案来源
flexslider border-radius does not wrap image in Chrome,Safari,but will in Firefox
以上是内存溢出为你收集整理的html – Webkit边界半径与css3 translate3D出血相结合全部内容,希望文章能够帮你解决html – Webkit边界半径与css3 translate3D出血相结合所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)