The experiment of fillet and shadow in CSS3

Theme toss a lot of things, and see a lot of problems, especially IE, the full range of all do not support CSS3, alas, the words can only compromise with pictures. Helpless ~ ~ in CSS3 inside more commonly used is Border-radius (fillet) and Box-shadow (shadow). And about the two together with what will appear, has not encountered.

Yesterday in A-shun there was a little bit of chrome under the CSS3 of small Bug,border-radius and Box-shadow with a overflow of four corners. I have been using chrome, so the problem is very good'm curious, so to ask for a universal Internet, finally found that the problem is indeed there.

First of all: This article is translated from here--"portal". The following is the text.

In the process of creating DeCal for him (the original author), some CSS3 rendering techniques were used to enhance the visual effects. Mainly includes 3: Box-shadow, Border-radius and RGBa.

What's interesting is how different browsers support these rendering techniques. Browsers like 3.6+ and Opera 10.5+ have a lot of promise, but others, such as Safari and Chrome, are less complete or vulnerable to support. In the Calendar view he created, he used all 3 rendering effects on the button. Here is the CSS that was originally for the Orange button test:

#cal td.smd_cal_event span a {  background: #fab1 02;  padding:4px 10px 5px 10px;  border:1px solid #fff;  border-bottom:1px solid #363d50;  -moz-border-radius:10px;  -webkit-border-radius:10px;  border-radius:10px;  -moz-box-shadow:   inset 0 4px 7px 0 #fff25f,   inset 0-2px 4px 0 rgba (255, 242, 9 4, 0.4),   inset 0-4px 8px 0 rgba (207, 3, 0.9),   0 2px 4px 0 rgba (0, 0, 0, 0.4); &nb Sp;-webkit-box-shadow:   inset 0 4px 7px 0 #fff25f,   inset 0-2px 4px 0 rgba (255, 242, 94, 0. 4),   inset 0-4px 8px 0 rgba (207, 3, 0.9),   0 2px 4px 0 rgba (0, 0, 0, 0.4);  bo X-shadow:   inset 0 4px 7px 0 #fff25f,   inset 0-2px 4px 0 rgba (255, 242,, 0.4),    inset 0-4px 8px 0 rgba (207, 75, 3,0.9),   0 2px 4px 0 rgba (0, 0, 0, 0.4);

Starting with some simple background color and padding syntax, we incrementally add some definitions of top/bottom border, followed by the Border-radius (rounded effects) used for various browser engines (which is very annoying to define), After that is for a variety of browser engine use of the complex box-shadows (alas, is really a waste of bandwidth!) ）。 We write verbose code for CSS in terms of vision, but it's obviously much more cost-effective than using a background image directly. (For ease of comparison, the above CSS code is about bytes large, but the equivalent background image is easily 6-7k, plus an HTTP request.) ）

Here's a magnified detail diagram showing how the above code works in five browsers under Windows systems:

As you can see, different browser support effects vary widely. IE7 does not recognize anything (a cup with one). Several others have no doubt supported the Border-radius fillet effect; they are almost identical in pixel levels. There is a slight difference between the top and bottom of the border at the bottom of the curve there is mixed, in my view, Firefox 3.6 on the drawing curve of the best performance, background color and border color, Opera 10.5 's performance followed.

Box-shadow support for CSS3 in various browsers

The best thing about CSS3 is that you can define a variable style for each DOM element in the same style. The multiple background effect is really great. But the changeable box-shadows is also good because it makes the complex gradient design, like the bevel of the button I designed, does not require any pictures at all. Summarizing the CSS, the first INSET statement shows the highlight yellow shadow at the top, and the second inset shows the yellowish shadow of its lower part. The third inset is the deep orange shadow that the entire button displays. The last one is the outer shadow of the element.

The test results are very interesting. Safari doesn't support anything from the results shown by the source code. However, if you put the outer shadow before the inset rule and take out the last statement (defined as the shadow of the extension), like the following ...

-webkit-box-shadow: 0 2px 4px rgba (0, 0, 0, 0.4), Inset 0 4px 7px 0 #fff25f, Inset 0-2px 4px 0 rgba (255, 242, 94, 0.4), Inset 0-4px 8px 0 rgba (207, 75, 3, 0.9);

... The external shadow is working again. So safari render Rgba is OK, but currently does not support inset box-shadows (inner shadow).

Chrome is even more interesting (the A-shun situation). Because it uses the WebKit to define, try to create the correct inner shadow, but produces a render error (these square corners are obviously stretched out of bounds), unlike its brother Safari doing nothing. Deleting the inset statement can fix it, but the display effect is the general flat button. These, under the guidance of the spirit of continuous improvement, will be done now. 3lian.com (It's worth noting that Chrome's external shading is not as good as it should be; it needs at least 4px, which is obviously a bit stale.) ）

Opera 10.5 and Firefox 3.6 are clearly winners on this project. Both produce smooth buttons with no rendering errors and are very smooth, and a good gradient shadow far exceeds the definition of 4px to produce a Photoshop quality effect. In between, Firefox has a slightly better rendering effect, and its internal effects are more evenly distributed. I highly recommend these two browsers here because they are so much better than the other browsers. At least for now.