Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "how to write CSS3 iphone switches". In the operation of actual cases, many people will encounter such a dilemma. Then let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Html Code:

Then, write and write, and the css code comes out, but there is always a problem like this:

Reason: write overflow:hidden to the outer layer, but not truncate the inside. Because it is rounded, the problem is trapped for a while. Later, it is found that this problem does not exist under Firefox, but can not solve the problem, because this is a mobile project, there is no Firefox.

Search, a good way to solve this problem:-webkit-mask-image, the test under chrome is perfect!

However, this problem has not been solved when it comes to iphone testing, so it is certain that browsers in IOS5 do not have good support for-webkit-mask-image.

Continue to search, this time I only believe in English, the search word is "webkit overflow hidden", ok, the first is the result I want, check.

Looked at the code, very concise, but it seems that my problem has not been solved, and then change the way of thinking, to remove the position to try, the result can only be solved when all the location attributes of the outer and inner elements are removed.

Conclusion: the location attribute of css will invalidate the overflow of the webkit core browser.

Well, I won't talk about the previous writing here, because the location of the css is widely used for module positioning, so the outer layer overflow can not be repeated, so change the writing method, here is the css section:

. Onoff {

Overflows: hidin

Display: inline-block

Margin: 0-5px 15px

Width: 60px; height: 20px

Border-radius:20px

Border: solid 1px # 999

}

. Switch label {

Displaying: block

Left margin:-40px

Width: 100px; height: 20px

Text-align:right; Color: # 8B8B8B; border-radius:20px

Background:-webkit gradient (linear, left top, left bottom, color-stop (0 minutes DFDFDF), color-stops (1 minutes FEFEFE))

}

. Switch label:: in {

After position: relative; left:-17px; top:-20px

Display: inline-block

Content:''; width: 6px; height: 6px

Border: solid 2px # 999

Border-radius:10px

}

. ONOFF I {

Displaying: block

Width: 60px; height: 20px

Border-radius:20px

Background:-webkit gradient (linear, left top, left bottom, color-stop (0precinct FE7D00), color-stop (1recorder FEA753))

}

. ONOFF I:: before {

Position: relative; Top:-7px; left:-15px

Display: inline block

Content:''; width: 2px; height: 10px

Background color: # fff

}

. ONOFF I:: after {

Position: relative; Top:-1px; left: 1px

Display: inline-block

Content:''; width: 20px; height: 20 pixels

Border: solid 1px # 999

Border-radius:50px

Background:-webkit gradient (linear, left top, left bottom, color-stop (0precinct DADADA), color-stop (1recorder fafa))

Box-shadow: embed 0 0 1px # fff

This is the end of the content of "how to write CSS3 iphone switches". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.