Hvordan lage en Gradient Avrundet Box i CSS
Cascading Style Sheets gi en måte å skille stil formatering på en webside fra layouten. Opprinnelig CSS var å være en partner for mark-up språk HTML. I dag er styling med CSS funnet i andre språk, også. Opprette en gradientultrasentrifugering krever at du gjør en bakgrunn med farge som blekner eller skråner bort. Dette gir et objekt et strukturert eller 3-D utseende. CSS gir en måte å gjøre en rektangulær boks, avrunder hjørnene og deretter fylle den med en gradient bakgrunn.
Bruksanvisning
1 Åpne et tekstredigeringsprogram som Notisblokk på datamaskinen og sett inn sideoverskriftskodene for stilark. For eksempel inn i <html> og <style> koder hvis du starter et nytt ark.
2 Lag boksen først ved å skrive inn koden for en kant og deretter satt i en farge og linjestil.
a.btn {border: 2px solid; color: # 00000;
3 Legg radius informasjon som vil skape de avrundede hjørner.
border-radius: 5px;
-moz-radius: 5px;
-webkit-border-radius: 5px;
Denne koden vil skape grensen i flere nettlesere.
4 Skriv inn gradient farge bakgrunnsinformasjon i neste linje av koden din.
bakgrunn: ## 800 000; - Dette skaper en solid bakgrunn som en backup
filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 736F6E', endColorstr = '# 000000');
bakgrunn: -webkit-gradient (lineær, venstre øverst, venstre nederst, fra (# 736F6E), til (# 000000));
bakgrunn: -moz-lineær-gradient (topp, # 736F6E, # 000000);
Dette skaper fire forskjellige bakgrunn alternativer for å dekke flere nettlesere.
5 Lukke grensen til en brakett - "}."
Hint
- En simplier tilnærming ville være å bruke en forhåndslagde gradient bilde som bakgrunn for din boks. Dette sparer deg fra å måtte rote med flere nettleserproblemer.
- Eksempelkoden skaper en lineær, eller horisontal gradient. For å gjøre en sirkulær design, bruk "radial" i stedet for lineær.
- Forhånd boksen for å sørge for at det ser riktig. CSS er et komplekst språk og krever eksakt syntaks. En savnet karakter kan produsere et uventet resultat.