CSS3 projection Interpretation, projection

Confused for some time, today began to tidy up their own, but also to organize new knowledge.

CSS3:

Start from scratch: Now the most used in the page is the picture/container projection, text projection;

Next, we summarize a projection problem:

Box-shadow: Shadow type X-axis displacement y-axis displacement shadow size shadow extended shadow color

Generally this write box-shadow:1px 1px 5px #000; There are 4 values, namely horizontal offset, vertical offset, shadow feather, projection color;

<div class= "Box1" >
</div>

. Box1{width:500px;height:400px;background: #7f0101; box-shadow:10px 10px 5px #500606; box-shadow:<strong>inset </strong> 1px 1px 3px #f56a6a;}

Viewed on Google:

If it is inner shadow box-shadow:<strong>inset</strong>1px 1px 5px #000;

If you want to glow inside, then more simple, let the background of a bit darker, projection shallow.

Text is also the same text-shadow:1px 1px 5px #000;

. tit{font-size:50px;maring-top:20px;text-shadow:5px 5px 4px #000;}

The effect of the hollow text, presumably everyone has thought about it:

. tit{font-size:50px;maring-top:20px;text-shadow:0px 1px 0px #000; text-shadow:0 1px #000, 0-1px 0 #000, 1px 0 0 #000, -1px 0 0 #000;
Color: #fff;}

Shadows can be superimposed repeatedly such as: Box-shadow: -2px 0 5px Green,0-2px 5px Blue,0 2px 5px Red,2px 0 5px yellow;

IE is the most annoying, so for IE9, you can use filters to be compatible.

Filter: progid:DXImageTransform.Microsoft.Shadow (color= ' color value ', direction= shadow Angle (value), strength= shadow radius (value));

This filter needs to be used in conjunction with Banckground, otherwise it will fail. However, in addition to the filter method, you can also use jquery to:

$ (document). Ready (function () {

if ($.browser.msie) {

$ ('. Box1 '). Boxshadow (0,0,5,"#888"); the//box1 element uses the Box-shadow

$ ('. Box2 '). Boxshadow (-10,-,5,"#f36"); the//box2 element uses box-shadow{multiple elements}

}

});

Supplemental: Browser compatibility issue:-khtml-konqueror

-ms-ie

-moz-firefox

-o-opera

-webkit-safari Chrome

Some CSS writing specifications suggest that the CSS3 property of the browser's private implementation be written in the preceding standard attribute. such as:-webkit-border-radius:30px 10px;
border-radius:30px 10px;

If there are shortcomings, thank you to point out, I hope to learn from each other, (*^__^*) Hee ...

CSS3 projection tutorial, projection