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

Question

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

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

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

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

我希望这是有道理的，感谢任何帮助。

Answer 1

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