CSS3 ir patiešām sāk paātrināties ar daudziem komandas izklāstīto CSS3 darba projekta atbalsta Firefox, Safari un Google Chrome. Mēs domājam, ka mēs gribētu salikt kopā dažus no mūsu izlasei. Pirms mēs sāktu CSS3 komandām nepieciešama pārlūkprogramma īpašus sintakse viņiem strādāt.

Mozilla Firefox mums jāizmanto-moz-prefiksu, piemēram:

-Moz-robežu rādiuss:

Un Safari-WebKit-prefiksu, piemēram:

-WebKit robežas rādiusu:

1. Pierobežas rādiuss

CSS3 pārrobežu rādiuss komanda izveido izliekta stūros elements. Tā vietā, izmantojot 4 vai vairāk attēlus, lai izveidotu izliektās stūriem izmantot šādas komandas:

/ * Mozilla Firefox * /
-Moz-robežu rādiuss: 20px;

/ * Par Safari un Google Chrome * /
-WebKit-robežu rādiuss: 20px;
}

2. Box ēna

Ēna var piemērot elementus, izmantojot CSS3 lodziņā ēnu komandu. Box ēna akceptē three skaitliskām vērtībām, kā arī krāsu piemērot šo ietekmi. Šie skaitļi ir:

1. Attālums horizontālā nobīde ēnas - pozitīva vērtība nozīmē, ka ēnu iemetīs pa labi un negatīvu vērtību, pa kreisi
2. Attālums no vertikālās kompensēt no ēnas - pozitīva vērtība nozīmē ēna būs cast zemāk un negatīva vērtība pārsniedz
3. Kā blurry vēlaties ēna

, Pievienojot krāsas vērtība ēna ir pabeigta:

/ * Mozilla Firefox * /
-Moz-box-ēna: 5px 5px 5px # b6ebf7;

/ * Par Safari un Google Chrome * /
-WebKit-box-ēna: 5x 5px 5px # b6ebf7;

3. Pārredzamības vai RGBA

Pārredzamība vienmēr ir bijis grūts. Dažādām pārlūkprogrammām vēsturiski ir pieteikušies pārredzamību, izmantojot dažādas komandas. Turpinot šo pārrobežu pārlūku pretruna mums ir jauna, CSS3 RGBA fona kustamai mantai, bet principā šī komanda ir daudz loģiskāk. Komanda sastāv no 4 vērtības - pirmajā, otrajā un trešajā ir sarkana, zaļa un zila vērtībām (0-255) attiecīgi seko alfa kanālu vai pārredzamība (0-1).

Par RGBA komandu pārlūkprogrammu īpašu prefiksu (-moz-,-WebKit-) nav nepieciešams:

# Box3 {
background-color: rgba (110, 142, 185, 0,5);
}

Fona krāsa komanda piebilst jauku zili pelēkos pie 0,5 fona vai 50% necaurredzamību, kas pārlūkiem, kas saprot CSS3 RGBA īpašumu.

Diemžēl Internet Explorer būs arī mēģinājums padarīt fona krāsu komandu, bet ne saprast RGBA. Lai nodrošinātu, ka fons ir arī noteica IE IE tikai banalizēt ir nepieciešama. Šajā piemērā: pēdējās bērna pseido selektoru, kuru Internet Explorer nesaprot tiek izmantoti, lai izslēgtu to.

iestāde: pēdējā bērns # box3 {
/ * Izslēgt visas IE pārlūkiem, izmantojot: pēdējā child * /
background-color: rgba (110, 142, 185, 0,5), svarīgi;!
}

4. Columns

Spēja pievienot kolonnas ir pievienota CSS3. Nevis peldošo elementu konteineru mēs varam noteikt kolonnas numurs, platums un likums:

/ * Mozilla Firefox * /
-Moz-kolonna skaits: 2;
-Moz-kolonna plaisa: 20px;
-Moz-kolonna noteikumu: 1px solid # 6e8eb9;

/ * Par Safari un Google Chrome * /
-WebKit-kolonna skaits: 2;
-WebKit kolonnu-plaisa: 20px;
-WebKit kolonnu-noteikums: 1px solid # 6e8eb9;
}

5. Vairāki fona attēlus

Fona attēli vienmēr ir bijusi ierobežojoša, kad runa ir CSS sakarā ar to var piemērot tikai vienu fona attēlu vienā elements. Tas nav gadījumā ar CSS3 kas ļauj vairākiem attēliem katrā elements, vienkārši komatu atdalot tos.

Lai novietotu attēlu gan kreisajā un labajā pusē elements Jūs varat izmantot šādu komandu, ar nelielu ieveidošanas:

padding: 0 20px;
}

Šī komanda būs nepareiza sniegtie Internet Explorer, jo tā neatzīst 2 fona attēlus ar vienu elementu. Izslēgt visus IE banalizēt ir nepieciešama.

# Box5 blockquote {
/ * Attiecībā uz visiem pārlūkiem, vienkārši atveriet quote * /
background: url (/ i / quotel.gif) 0 0 no-repeat;
padding: 0 20px;
}

iestāde: pēdējā bērns # box5 blockquote {
/ * Izslēgt visas IE pārlūkiem, izmantojot: pēdējā child * /
/ * Tad abas bildes * /
background: url (/ i / quotel.gif) bez atkārtot 0 0, url (/ i / quoter.gif) bez atkārtot 100% 0;
}

6. Fona gradientus

CSS3 fona gradienti ir ļoti elastīgas un var tikt izmantoti, lai radītu sarežģītas shēmas. Savā visvienkāršākajā CSS lineāro gradientu ļauj slīpumu, ko piemēro elementu no augšas uz leju un no kreisās uz labo.

Šis CSS3 gradientu Mozilla Firefox piemērā attiecas gaiši zila gradientu apakšā kastē tikai 20% no kastes "augstums

Safari izmanto mazāk intuitīvu, bet daudz elastīgāku pieeju, izmantojot krāsu stop vērtības. No Safari īpašo kodu, piemēram šādi (sk. lineāra ir iekļauta iekavās, nevis ārpuses):

# Box8 {
background:-WebKit-gradienta (lineāra, kreisajā apakšējā, kreisajā augšējā, krāsa-stop (0, # b6ebf7), color-stop (0.20, # fff));
}

7. Rotācija

CSS3 arī ļauj griešanās elementus, izmantojot pārveidot komandu, ar pagriezt īpašumu pieņemot grādi, kā parametrs.

<code> # box9 {
-Moz-transformēt: pagriezt (2deg);
-WebKit-transformēt: pagriezt (2deg);
} </ Code>

8. Kontūras

Outilines ir iekļauti CSS3 specifikācijā un abas robežas un kontūras, kas piemērojams vienu elementu.

Izklāsts īpašums ir identiska robežu komandu. Papildu kompensētu nekustamā īpašuma tomēr ļauj robežas pārvietot tālāk vai ārpus elementa.

Iesniegts saskaņā ar: Css by admin