CSS3 je res začelo dobilo nov zagon z veliko ukazov, opisanih v CSS3 delovni osnutek podpirajo Firefox, Safari in Google Chrome. Mislili smo, da bi sestavili nekaj naših priljubljenih. Preden začnemo CSS3 ukazov zahteva brskalnik posebno sintakso za njihovo delo.

Za Mozilla Firefox moramo uporabiti-moz-predpona, na primer:

-Moz-meji-radij:

In za Safari-WebKit-predpona, na primer:

-WebKit-meji-radij:

1. Mejni polmer

Meji CSS3 polmer ukaz ustvari ukrivljeni robovi na element. Namesto 4 ali več slik, da ustvarite ukrivljeno kotih uporabite naslednje ukaze:

/ * Za Mozilla Firefox * /
-Moz-meji-radij: 20px;

/ * Za Safari in Google Chrome * /
-WebKit-meji-radij: 20px;
}

2. Box shadow

Senca se lahko uporablja za elemente, s pomočjo CSS3 ukaz polje senci. Box senci sprejema three številčne vrednosti plus barva za uporabo tega učinka. Te številke so:

1. Oddaljenost od horizontalne zamik sence - pozitivna vrednost pomeni senco bo oddanih v desno, in negativna vrednost v levo
2. Razdalja od navpične zamik sence - pozitivna vrednost pomeni senca bo pod oddanih in negativno vrednost nad
3. Kako zamegljenih želite senco

Z dodatkom vrednost barve sence je popolna:

/ * Za Mozilla Firefox * /
-Moz-box-shadow: 5px 5px 5px # b6ebf7;

/ * Za Safari in Google Chrome * /
-WebKit-box-shadow: 5x 5px 5px # b6ebf7;

3. Preglednost ali RGBA

Preglednost je bila vedno zelo zahtevno. Različni brskalniki so v preteklosti uporabljena preglednost z uporabo različnih ukazov. Nadaljevanje tega navzkrižno brskalnik nedoslednost imamo poleg novega ozadju CSS3 lastnine RGBA, vendar pa je načeloma ta ukaz je bolj logično. Ukaz je sestavljen iz 4 vrednot - prvi, drugi in tretji so rdeče, zelene in modre vrednosti (0-255) v tem zaporedju sledijo kanal alfa ali preglednosti (0-1).

Za ukaz RGBA brskalnik posebne predpone (-moz-,-WebKit-) niso potrebni:

# Box3 {
-barva ozadja: RGBA (110, 142, 185, 0,5);
}

Barva ozadja ukaz dodaja lepo modro-sivo ozadje na 0,5 ali 50% motnost v brskalnikih, ki razumejo CSS3 RGBA lastnine.

Na žalost bo Internet Explorer tudi poskus, da postane ukaz barvo ozadja, vendar ne razumem RGBA. Da bi zagotovili, da se barva ozadja nastavite tudi v IE, je potreben IE-samo kramp. V naslednji primer: last-otrok pseudo selektor, ki Internet Explorer ne razume, se uporablja za izključitev.

telo: last-otrok # box3 {
/ * Izključi vse IE brskalnike uporabljate: v zadnjem otroka * /
-barva ozadja:! RGBA (110, 142, 185, 0,5) pomembno;
}

4. Stolpci

Sposobnost, da dodate stolpce je bil dodan v CSS3. Namesto plavajočih elementov v posode lahko nastavite številko stolpca, širina in pravilo:

/ * Za Mozilla Firefox * /
-Moz-column-count: 2;
-Moz-column-vrzel: 20px;
-Moz-column-pravilo: 1px solid # 6e8eb9;

/ * Za Safari in Google Chrome * /
-WebKit-column-count: 2;
-WebKit-column-vrzel: 20px;
-WebKit-column-pravilo: 1px solid # 6e8eb9;
}

5. Več slik v ozadju

Ozadje posnetkov je bila vedno omejevalen, ko gre za CSS zaradi dejstva, ki jih lahko uporabijo eno samo sliko ozadja na element. To ne velja za CSS3, ki omogoča več slik na element, da jih preprosto vejice za ločevanje.

Za mesto slike na obeh levi in ​​desni element lahko uporabite naslednje ukaze, z malo styling:

padding: 0 20px;
}

Ta ukaz bo mis, ki jih opravljajo Internet Explorer, saj ne sprejema 2 slike za ozadje na en element. Izključuje vse kramp IE je potrebno.

# Box5 blockquote {
/ * Za vse brskalnike, samo odpreti temo * /
background: url (/ i / quotel.gif) 0 0 no-repeat;
padding: 0 20px;
}

telo: last-otrok # box5 blockquote {
/ * Izključi vse IE brskalnike uporabljate: v zadnjem otroka * /
/ * Potem dve podobi * /
background: url (/ i / quotel.gif) no-ponavljati 0 0, url (/ i / quoter.gif) no-ponavljati 100% 0;
}

6. Ozadje nakloni

CSS3 ozadju vzponi so zelo prilagodljivi in ​​se lahko uporablja za ustvarjanje zapletene vzorce. Na najpreprostejši CSS linearni gradient omogoča gradient je treba uporabiti za element od zgoraj navzdol in od leve proti desni.

Ta primer CSS3 gradient v Mozilla Firefox uporablja svetlo modra gradient na dnu polje za samo 20% polja "Višina

Safari uporablja manj intuitivno, ampak bolj prožen pristop z uporabo barvnih vrednosti stop. Primer posebno kodo Safari sledi (upoštevajte, linearni, je naveden v oklepaju namesto zunaj):

# Box8 {
ozadje:-WebKit-gradient (linearno, levo spodaj, levo zgoraj, barva-stop (0, # b6ebf7), barvni-stop (0,20, # fff));
}

7. Rotation

CSS3 omogoča tudi vrtenje elementov z ukazom preoblikovanje, z lastnino vrti stopinj sprejema kot parameter.

<code> # box9 {
-Moz-transformacija: vrtenje (2deg);
-WebKit-transformacija: vrtenje (2deg);
} </ Code>

8. Orisi

Outilines so vključeni v specifikacijo CSS3 in dovoliti obema meje in predloge, ki jo uporablja en sam element.

Oris premoženja je enaka meji ukaz. Dodatna izravnavo premoženja pa omogoča, meja je preselil še znotraj ali zunaj elementa.

Pila pod: Css , ki jih admin