CSS   发布时间:2022-04-17  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了css – 如何在任何适用于Mac的webkit中隐藏父圆角的画布内容?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个包含画布的圆角的父div: @H_618_2@<div id="box"> <canvas width="300px" height="300px"></canvas> </div>​ #box { width: 150px; height: 150px; BACkground-color: blue; border-radius: 50px; overflow: hidden; }​

画布呈现一个溢出父级的红色矩形.正如所料,这是我在所有浏览器中得到的:

问题:

但是,对于在Mac OS Lion中运行的webkit浏览器(我测试了Safari 5.1.5和Chrome 19),画布在圆角处仍然可见:

有趣的是,这个问题似乎只在内部元素是画布时才会发生.对于任何其他子元素,正确隐藏内容.

一种解决方法是将相同的圆角应用于画布本身,但不幸的是,这是不可能的,因为我需要为画布相对位置设置动画.

应该工作的另一个解决方法是在类似于圆角形状的剪切区域中重绘画布,但我更喜欢更干净的CSS3解决方案.

那么,是否知道如何在Mac上修复Safari和Chrome?

编辑:在Win7上的Chrome中也会出现问题

jsFiddle here

解决方法

Bug仍然存在(11/2015),但另一种解决方法是添加position:relative;溢出:隐藏;元件.

大佬总结

以上是大佬教程为你收集整理的css – 如何在任何适用于Mac的webkit中隐藏父圆角的画布内容?全部内容,希望文章能够帮你解决css – 如何在任何适用于Mac的webkit中隐藏父圆角的画布内容?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。