大佬教程收集整理的这篇文章主要介绍了html – Webkit边界半径与css3 translate3D出血相结合,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
为了清楚地理解我在说什么,这是一个关于这个问题的小提琴例子.如果我删除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-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
老答案来源
flexslider border-radius does not wrap image in Chrome,Safari,but will in Firefox
以上是大佬教程为你收集整理的html – Webkit边界半径与css3 translate3D出血相结合全部内容,希望文章能够帮你解决html – Webkit边界半径与css3 translate3D出血相结合所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。