将内容剪辑为圆角的DIV元素的最佳做法

Question

我目前正在使用HTML5和CSS3重新创建Apple的iOS 5 Toggle Switch。 关键是由于要求，组合物不能由任何图像组成。 我已经能够实现我想要的几乎所有东西，但是在裁剪容器盒时似乎存在一个问题，因此它一次只能显示一半的切换。

这是一个截图，以帮助解释我的意思：

请注意，粉色边框（仅为开发目的而添加）是四舍五入的，但是延伸过它的内容似乎突破了边界舍入。 任何人都可以建议一种合适的方法来防止内容扩展到边界半径 - 有效地裁剪该div的内容以适应舍入内部吗？

我目前认为这可以使用-webkit-mask-box-image属性和图像数据URL实现（例如：some：image：image / gif; base64，R0lGODlhEAAOALMAAOazToeHh0tLS / 7LZv / 0jvb29t / f3 // Ub / / ge8WSLf / RHF / 3kdbW1mxsbP // MF /// yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcpp V0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj / gAwXEQA7）。 是否有更好的解决方案，或者任何人都可以提供有关创建这些数据URL的帮助？

我希望这是有道理的，任何帮助都会感激不尽。

Answer 1

不幸的是，我认为这是webkit的设计缺陷。 内容永远不会被剪裁到边框半径。 至于base64编码，我发现这个工具很有帮助