CSS3 Series Tutorials

First, prefix:
-moz (e.g.-moz-border-radius) for Firefox
-webkit (for example:-webkit-border-radius) for Safari and Chrome.

Second, CSS3 fillet (All)
-moz-border-radius:15px;
-webkit-border-radius:15px;

Three, CSS3 fillet (individual)
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:0px;
-moz-border-radius-bottomright:15px;
-moz-border-radius-bottomleft:0px;
-webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-webkit-border-bottom-right-radius:15px;

Four, the border color in CSS3:
Using the CSS3 Border-radius property, if you set the border width to x px,
Then you can use the X color on this border, each color shows the width of 1px.
If the width of your border is 10 pixels, but only 5 or 6 colors are declared, the last color will be added to the remaining width.

Currently only Firefox supports the CSS3 border-colour attribute, so we only need to use the-MOZ prefix here.

-moz-border-bottom-colors: #300 #600 #700 #800 #900 #A00;
-moz-border-top-colors: #300 #600 #700 #800 #900 #A00;
-moz-border-left-colors: #300 #600 #700 #800 #900 #A00;
-moz-border-right-colors: #300 #600 #700 #800 #900 #A00;

V. Shadows
It's been around since CSS2, but only Safari has a browser that supports it, and that's still the case now.
CSS3 's Box-shadow and Textshadow can be written: box-shadow:apx Bpx Cpx #xxx;
Apx = x-Axis
Bpx = y-Axis
Cpx = projection length
#XXX = like the usual color

#boxShadow {
border:5px solid #111;
-webkit-box-shadow:5px 5px 7px #999;
-webkit-border-bottom-right-radius:15px;
padding:15px 25px;
Height:inherit;
width:590px;
}

Six, simple text shadow
. textshadowsingle {
Font-size:3.2em;
Color: #F5F5F5;
text-shadow:3px 3px 7px #111;
Text-align:center;
}

Seven, multiple text shadow:
. textshadowmultiple {
Font-size:3.2em;
Color: #FFF;
text-shadow:0px-11px 10px #C60, 0px-3px 9px #FF0;
Text-align:center;
padding:10px 0px 5px 0px;
Background: #151515;
}

Viii. Background Images/textures
CSS3 background image size can be written as background-size:apx Bpx;
-APX = x-axis (picture width)
-bpx = y-axis (picture height)

Browsers that best support CSS3 background size are safari and opera, so we only need to use the-O and-webkit prefixes.　　
#backgroundSize {
border:5px solid #bd9ec4;
Background:url (image_1.extention) bottom right no-repeat;
-o-background-size:150px 250px;
-webkit-background-size:150px 250px;
padding:15px 25px;
Height:inherit;
width:590px;
}
nine, multi-background picture
Background:url (image_1.extention) Top right no-repeat, url (image_2.extention) bottom right no-repeat;　　
#backgroundMultiple {
border:5px solid #9e9aab;
Background:url (image_1.extention) top left no-repeat,
URL (image_2.extention) bottom left no-repeat,
URL (image_ 3.extention) bottom right no-repeat;
padding:15px 25px;
Height:inherit;
width:590px;
}

Ten, CSS3 Multi-column (width)
#multiColumnWidth {
text-align:justify;
-moz-column-width:20em;
-moz-column-gap:2em;
-webkit-column-width:20em;
-webkit-column-gap:2em;
}
Xi. CSS3 Multiple columns (number of columns)
#multiColumnCount {
text-align:justify;
-moz-column-count:3;
-moz-column-gap:1.5em;
-moz-column-rule:1px solid #dedede;
-webkit-column-count:3;
-webkit-column-gap:1.5em;
-webkit-column-rule:1px solid #dedede;
}

12. CSS3 Embedded Fonts
@font-face {
Font-family:qianduannet;
Src:url ("Sketchrockwell.ttf");
}
. fontface{
Font-family:qianduannet;
Font-size:3.2em;
letter-spacing:1px;
Text-align:center;
}

13, CSS3 Transparent (example 1: layer)
Div.opacityl1 {background: #036; opacity:0.2; width:575px; height:20px;}
Div.opacityl2 {background: #036; opacity:0.4; width:575px; height:20px;}
Div.opacityl3 {background: #036; opacity:0.6; width:575px; height:20px;}
Div.opacityl4 {background: #036; opacity:0.8; width:575px; height:20px;}
Div.opacityl5 {background: #036; opacity:1.0; width:575px; height:20px;}
14, CSS3 RGBA color
Div.rgbal1 {Background:rgba (153, 134, 117, 0.2); height:20px;}
Div.rgbal2 {Background:rgba (153, 134, 117, 0.4); height:20px;}
Div.rgbal3 {Background:rgba (153, 134, 117, 0.6); height:20px;}
Div.rgbal4 {Background:rgba (153, 134, 117, 0.8); height:20px;}
DIV.RGBAL5 {Background:rgba (153, 134, 117, 1.0); height:20px;}

The

15, CSS3 HSL
HSL declaration uses Hue Hue (H), saturation saturation (s), and luminance lightness (L) to set the color. The
hue is derived from the color dial: 0 and 360 are red, close to 120 is green, and 240 is blue. The
Saturation value is a percentage: 0% is grayscale, 100% saturation is the highest
lightness value is also a percentage: 0% is the darkest, 50% mean, and 100% brightest.
Div.hsll1 {BACKGROUND:HSL (100%, 50%); height:20px;}
Div.hsll2 {BACKGROUND:HSL (50%, 50%); height:20px;}
Div.hsll3 {BACKGROUND:HSL (100%, 75%); height:20px;}
Div.hsll4 {BACKGROUND:HSL (202, 100%, 50%); height:20px;}
Div.hsll5 {BACKGROUND:HSL (202, 50%, 50%); height:20px;}
Div.hsll6 {BACKGROUND:HSL (202, 100%, 75%); height:20px;}
16, CSS3 HSLA
Div.hslal1 {background:hsla (165, 35%, 50%, 0.2); height:20px;}
Div.hslal2 {background:hsla (165, 35%, 50%, 0.4); height:20px;}
Div.hslal3 {background:hsla (165, 35%, 50%, 0.6); height:20px;}
Div.hslal4 {background:hsla (165, 35%, 50%, 0.8); height:20px;}
Div.hslal5 {background:hsla (165, 35%, 50%, 1.0); height:20px;}

Http://www.blueidea.com/tech/web/2009/6460.asp

CSS3 Series Tutorials