將內容剪輯爲圓角DIV的最佳做法元素

我目前正致力於在HTML5和CSS3中重新創建Apple的iOS 5切換開關。關鍵是，由於要求，組成不能由任何圖像組成。我已經能夠實現我想要的幾乎所有東西，但是在裁剪容器盒時似乎存在問題，因此一次只能顯示一半的切換。將內容剪輯爲圓角DIV的最佳做法元素

下面是截圖，以幫助解釋一下我的意思是：

enter image description here

注意，粉紅色的邊框（僅用於開發目的添加的）是圓形的，但延伸過去，似乎打破了內容邊界四捨五入。任何人都可以提出一種合適的方法，通過這種方法我可以防止內容擴展到邊界半徑之內 - 有效地裁剪該內容以適應四捨五入？

目前我想，這可能使用-webkit-mask-box-image屬性來實現，圖像數據的URL（例如事端，如：數據：圖像/ GIF; BASE64，R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/F3 // UB/ /ge8WSLf/RHF/3kdbW1mxsbP // MF /// yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcpp V0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7）。有沒有更好的解決方案，或者任何人都可以提供有關創建這些數據URL的幫助？

我希望這是有道理的，並感激地收到任何幫助。

來源

2011-10-20 BenM

不幸的是我相信這是webkit的一個設計缺陷。內容永遠不會被剪裁到邊框半徑。至於base64編碼，我發現this tool有幫助

來源

2011-10-20 12:56:57

謝謝！使用你共享的base64編碼工具，我很容易創建出效果很好的遮罩。 – BenM

@BenM不客氣。：）樂意效勞。 –

將內容剪輯爲圓角DIV的最佳做法元素

回答

相關問題