CSS3 Background-clip,background-origin and Border-image Tutorials

Core tip: recently in preparation for the next semester to participate in the concept of the site, hope to be able to use the new features of CSS3, such as background background-clip or Background-origin or border-image. But relying on documents and instructions on W3Schools found that many of the imagined effects were not achievable.

A long time ago Roger Johansson on his blog to make a test with style control form elements, telling us that it is impossible to control form elements with styles using CSS to style form controls to look EXAC Tly the same across browsers and platforms is impossible
Even the css2.1 specification does not specify this, but is going to fix it in future
CSS 2. 1 does define which properties apply to form controls and frames, or how CSS can is used to style them. User agents may apply CSS properties to these elements. Authors are recommended to treat such support as experimental. A future level of the CSS may specify this further.

So if you want the form elements to be exactly the same in each browser, the best solution is to ignore the operating system's style entirely, using a custom UI style, like Bing or Google's Jazz UI

However, this will cause the interface and the user's system out of place, the current Google mainly for browsers to do some special processing, such as WebKit under the gradient make the button look better

Mac under the WebKit button is not easy to control

In this paper, we will investigate the problem of the height of the input frame and find a better way to solve it.
Input box Height
First, one of the main reasons for this research is that the search results page is going to go into standard mode, which results in a change in the box model that makes the input box height different from the original, so we need to find the best solution to keep up with the online effect.
Some students may be puzzled, it is so difficult? Set a height does not solve it?
<input type= "text" style= "height:28px"/>
However, the test found that the details of the problem is still quite a lot, due to limited resources, here only tested the main browser and platform, including the current main use of the 5 browsers
· IE6 (XP)
· IE7 (XP)
· IE8 (Win7)
· Firefox 3.5 (XP)
· Firefox 3.5 (Win7)
· Firefox 3.5 (Mac 10.6.2)
· Firefox 3.5 (Ubuntu 10.4)
· Chrome 5 (XP)
· Chrome 5 (Win7)
· Chrome 5 (Mac 10.6.2)
· Chrome 5 (Ubuntu 10.4)
By setting the height of the way
Our goal is to be consistent with the size of the current search box, both 28px
The first test is the simplest height, first look at the current line of the scheme (simple to write directly to the style)
<input type= "text" style= "font:16px Arial; Height:1.78em; padding-top:2px "/>
Derivation from the style, due to the box model problem, the size under IE will be 1.78 * = 28px, and Firefox and other browsers should be 1.78 * + 2px + border-width * 2 = 30 +? Px
The test results are
Browser height + padding-top + padding-bottom + border-top-width + border-bottom-width
IE6 (XP) 21 + 2 + 1 + 2 + 2 = 28
IE7 (XP) 21 + 2 + 1 + 2 + 2 = 28
IE8 (Win7) 21 + 2 + 1 + 2 + 2 = 28
Firefox 3.5 (XP) 21 + 2 + 1 + 2 + 2 = 28
Firefox 3.5 (Win7) 23 + 2 + 1 + 1 + 1 = 28
Firefox 3.5 (Mac 10.6.2) 19 + 2 + 1 + 3 + 3 = 28
Firefox 3.5 (Ubuntu 10.04) 19 + 2 + 1 + 3 + 3 = 28
Chrome 5 (XP) 21 + 2 + 1 + 2 + 2 = 28
Chrome 5 (Win7) 21 + 2 + 1 + 2 + 2 = 28
Chrome 5 (Mac 10.6.2) 21 + 2 + 1 + 2 + 2 = 28
Chrome 5 (Ubuntu 10.04) 21 + 2 + 1 + 2 + 2 = 28

The effect is quite ideal, all browsers are 28px, it seems that even Firefox and chrom in the quirks mode of input are not followed the box model, so the line of the input box height in each browser is perfectly consistent
However, if it is in standards mode, the result is
Browser height + padding-top + padding-bottom + border-top-width + border-bottom-width
IE6 (XP) 28 + 2 + 1 + 2 + 2 = 35
IE7 (XP) 28 + 2 + 1 + 2 + 2 = 35
IE8 (Win7) 28 + 2 + 1 + 2 + 2 = 35
Firefox 3.5 (XP) 28 + 2 + 1 + 2 + 2 = 35
Firefox 3.5 (Win7) 28 + 2 + 1 + 1 + 1 = 32
Firefox 3.5 (Mac 10.6.2) 28 + 2 + 1 + 3 + 3 = 37
Firefox 3.5 (Ubuntu 10.04) 28 + 2 + 1 + 3 + 3 = 37
Chrome 5 (XP) 28 + 2 + 1 + 2 + 2 = 35
Chrome 5 (Win7) 28 + 2 + 1 + 2 + 2 = 35
Chrome 5 (Mac 10.6.2) 28 + 2 + 1 + 2 + 2 = 35
Chrome 5 (Ubuntu 10.04) 28 + 2 + 1 + 2 + 2 = 35

1 2 Next page > full text reading tips: Try "←→" button, turn the page more convenient Oh!

[1] [2] Next page