В настоящее время я работаю над воссозданием Apple iOS 5 Toggle Switch в HTML5 и CSS3.Ключ в том, что из-за требований композиция не может быть составлена из каких-либо изображений.Мне удалось добиться почти всего, что я хотел, однако, похоже, есть проблема с обрезкой контейнера контейнера, так что он отображает только половину переключения за раз.
Вот скриншот, чтобы помочь объяснить, чтоЯ имею в виду:
Обратите внимание, что розовая граница (добавлена только для целей разработки) округлена, но содержимое, выходящее за пределы, кажется, выходит за пределы округления.Может ли кто-нибудь предложить подходящий метод, с помощью которого я могу предотвратить расширение содержимого за пределы радиуса границы - эффективно обрезать содержимое этого div, чтобы оно подходило для округления?
В настоящее время я думаю, что этого можно достичь с помощью свойства -webkit-mask-box-image и URL-адресов данных изображений (например, например: data: image / gif; base64, R0lGODlhEAAOALMAAOazToeHh0tLS / 7LZv / 0jvb29t / f3 // Ub/ / ge8WSLf / ФХР / 3kdbW1mxsbP // МЖ /// yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcpp V0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj / gAwXEQA7).Есть ли лучшее решение, или кто-нибудь может предложить помощь в создании этих URL-адресов данных?
Надеюсь, это имеет смысл, и любая помощь будет с благодарностью получена.