CSS3 iphone式開關怎么寫

本篇內容介紹了“CSS3 iphone式開關怎么寫”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

html代碼：

<span  class = “ onoff” > <標簽> <i > </ i > </ label > </ span >

然后，寫啊寫，css代碼也出來了，但是總會出現這樣的問題：

原因：給外層寫了overflow:hidden，但是沒有把其內部截斷，因為是圓角的，所以這個問題陷阱一會，后來發現這個問題在Firefox下是不存在，而是并不能解決此問題，因為這個是移動端項目，木有Firefox的事兒。

搜啊搜，找啊找，一個不錯的方法解決了這個問題：-webkit-mask-image，在chrome下測試完美！

但是，當上到iphone測試的時候這個問題卻沒有得到解決，所以，可以肯定IOS5中的瀏覽器對-webkit-mask-image還沒有做到好的支持。

繼續搜索，這次我只相信英語了，搜索詞是“ webkit overflow hidden”，ok，第一個就是我想要的結果，查看。

看了看代碼，很簡潔，但似乎我的問題還是沒有得到解決，隨后又換個思路，把position給去掉試試，結果只有當把外層和內部元素的所有位置屬性給去除才得以解決。

結論： css的位置屬性會給webkit核心瀏覽器的overflow照成失效。

好吧，之前的寫法這里就不說了，因為大量用到css的位置進行模塊定位，導致外層溢出無法重復，因此此，更改寫法，以下是css部分：

。onoff {

溢出：隱藏; 

顯示：inline-block ; 

邊距：0  0  -5px  15px ; 

寬度：60px ; 高度：20px ; 

border-radius：20px ; 

邊框：實心 1px  ＃999；

} 

。開關 標簽{

顯示：塊; 

左邊距：-40px ; 

寬度：100px ; 高度：20px ; 

text-align：right ; 顏色：＃8B8B8B ; border-radius：20px ; 

背景：-webkit梯度（線性，左 頂，左 底，顏色-停止（0，#DFDFDF ），顏色-停止（1，#FEFEFE ）） ; 

} 

。開關 標簽::在{

位置之后：親戚; 左：-17px ; 頂部：-20px ; 

顯示：inline-block ; 

內容：'' ; 寬度：6px ; 高度：6px ; 

邊框：實心 2px  ＃999；

border-radius：10px ; 

} 

。ONOFF 我{

顯示：塊; 

寬度：60px ; 高度：20px ; 

border-radius：20px ; 

背景：-webkit梯度（線性，左 頂，左 底，顏色-停止（0，＃FE7D00 ），顏色-停止（1，＃FEA753 ）） ; 

} 

。ONOFF 我::之前{

位置：相對; 頂部：-7px ; 左：-15px ; 

顯示：內聯塊; 

內容：'' ; 寬度：2px ; 高度：10px ; 

背景顏色：#fff ; 

} 

。ONOFF 我::后{

位置：相對; 頂部：-1px ; 左：1px ; 

顯示：inline-block ; 

內容：'' ; 寬度：20px ; 高度：20像素; 

邊框：實心 1px  ＃999；

border-radius：50px ; 

背景：-webkit梯度（線性，左 頂，左 底，顏色-停止（0，#DADADA ），顏色-停止（1，#FAFAFA ）） ; 

box-shadow：嵌入 0  0  1px  #fff ; 

“CSS3 iphone式開關怎么寫”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！