コンテンツを角を丸くしたDIV要素にクリップするベストプラクティス

現在、アップルのiOS 5トグルスイッチをHTML5とCSS3で再現しています。重要なことは、要件のために、構成はどのような画像でも構成できないということです。私は、私が望むほぼすべてを達成することができましたが、一度にトグルの半分しか表示しないようにコンテナボックスを切り取ることに問題があるようです。コンテンツを角を丸くしたDIV要素にクリップするベストプラクティス

ここで私が何を意味するか説明するためのスクリーンショットです：

enter image description here

（唯一の開発目的のために追加された）ピンクのボーダーが丸みを帯びていることに注意してください、から抜け出すように思わ越えて延び内容は境界丸め。誰でも適切な方法を提案して、境界の半径を越えてコンテンツが拡大するのを防ぐことができます。効果的にその内容を切り詰めて、丸みの中に収まるようにしますか？

私は現在、これは-webkit-mask-box-imageプロパティを使用して達成することができることを考えて、としていた画像データのURL（のための例のsomethinのように：データ：画像/ gif形式; base64で、R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/F3 //のUb/ /ge8WSLf/RHF/3kdbW1mxsbP // MF /// yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcpp V0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7）。よりよい解決法があるのですか、誰かがこれらのデータURLを作成する上で助けを提供することができますか？

私はそれが意味を持ち、喜んで助けられたどんな助けも願っています。

出典

2011-10-20 BenM

残念ながら、これはウェブキットの設計上の欠陥だと私は信じています。コンテンツは決してボーダー半径にクリップされません。 base64エンコーディングについては、this toolが役に立ちました

出典

2011-10-20 12:56:57

ありがとうございました！あなたが共有したbase64エンコーディングツールを使用して、私は簡単に素晴らしいマスクを作成することができました。 – BenM

@BenMよろしくお願いします。 :)喜んで助けてください。 –

コンテンツを角を丸くしたDIV要素にクリップするベストプラクティス

答えて

関連する問題