Arbejder med ny styling til Borders i CSS3

I dette segment i CSS3-serien gennemgår vi grænseegenskaber, der kan implementeres i dag, inklusive grænsefarve; grænseradius, der definerer afrundede hjørner; og kantbilleder, der bruger forskellige billeder og egenskabsregler, funktioner og funktioner.

Border-farve

Brug af CSS3 grænse-farveegenskab giver dig mulighed for at tildele en ramme på X pixels, som i 8px i eksemplet nedenfor, så kan du bruge op til X farver til den grænseregel, hver farvegengivelse med en pixelbredde. Og hvis du bruger en standardkant på 10 pixels, men kun anvender seks eller syv farver, anvendes den sidste farve på den resterende kantbredde.

Oprettelse af en farvet kant med CSS3-kodning udføres faktisk ganske let med følgende eksempel ved hjælp af farvekoder til gradueret grå skygge:

 .grænse { 
 grænse: 
 fast 8px # B9B9B9; 
 -moz-border-bottom-colours: # 555 # 666 # 777 # 888 # 999 #aaa #bbb #ccc; 
 -moz-border-top-farver: # 555 # 666 # 777 # 888 # 999 #aaa #bbb #ccc; 
 -moz-grænse-venstre-farver: # 555 # 666 # 777 # 888 # 999 #aaa #bbb #ccc; 
 -moz-grænse-højre-farver: # 555 # 666 # 777 # 888 # 999 #aaa #bbb #ccc; 
 polstring: 5px 5px 5px 15px; 
 } 

Den resulterende kantfarve CSS3-kode vil gengive en grå falmende kantboks, der omgiver indholdsteksten. I øjeblikket understøttes kun af Mozilla Firefox på dette tidspunkt, det ser ud som dette, når det anvendes i følgende eksempel HTML:

Lorem ipsum dolor sidder amet, consectetuer adipiscing elit. Aenean egestas blandit ipsum. Morbi nulla metus, luctus et, ullamcorper sit amet, commodo quis, nisl. Ut blandit lacus nec nibh. Phasellus eleifend enim et risus. Nam condimentum. Praesent euismod auctor dui.

 Figur A viser, hvordan det vises i Firefox 6.0.2: 

Figur A

Border-radius

Tilføjelse af afrundede hjørner til en kant betyder, at du tilføjer en grænse-radius-egenskab og er bare et spørgsmål om at tilføje den linje, der definerer antallet af pixels for hvert hjørne, der skal afrundes. Tilføjelse af den følgende kodelinje til det forrige eksempels grænsestil resulterer i de afrundede hjørner i figur B. Syntaks for placering henviser til øverste venstre, øverste højre, nederst til højre, nederst til venstre:
 -moz-border-radius: 35px 35px 35px 35px; 

Grænseradius implementeres kun i Mozilla Firefox på dette tidspunkt; sådan gengives det i Firefox 6.0.2:

Figur B

Det næste eksempel resulterer i en forskelligt afrundet kant med denne kode:

 -moz-border-radius: 35px 0px 35px 0px; 

Sådan ser tweak ud i Firefox 6.0.2:

Fig

Border-billede

En alternativ kantfunktion i CSS3 er egenskaben grænse-billede, som giver dig mulighed for at oprette brugerdefinerede rammer og fleksible bokse omkring HTML-indhold. Denne egenskab giver dig mulighed for at definere et billede, der skal bruges i stedet for den normale grænse for et element. Grænse-billedet egenskab fungerer i øjeblikket i Safari, Firefox 3.1+ og Chrome, når du bruger præfikser henholdsvis -moz- og -webkit- . Syntaks til brug af grænse-billedegenskaber inkluderer tre dele som vist nedenfor ved hjælp af CSS3-reglen:

 border-image: url (borderimage.png) XY Type; 

Egenskaben specificerer (1) URL'en til det billede, der skal bruges som en grænse, (2) hvor billedet skal defineres i højde og bredde (X er lig med skivehøjde, Y er lig med skivebredde), og (3) hvordan browseren vil anvende disse sektioner på elementets kantkanter; type kan specificere, om grænsen gentages, afrundes eller strækkes. Indstillingerne for type = er gentagelse eller runde eller strækning .

Den første del af egenskabsreglen er en fortsættelse af den velkendte baggrundsbilledeegendom og hvordan de er blevet anvendt i årevis. Til dette eksempel vil jeg bruge billedet Bgimage.png, der vises nedenfor, og er 148px X 148px.

Figur D

Den anden del af reglerne for grænse-billedet egenskab kan have op til fire værdier, der specificerer grænsebredden og er specificeret i den typiske rækkefølge for øverste, højre, nederste, venstre og kan udtrykkes som pixels eller procent, hvor pixels henvises til med% -symbolet, og pixels vises alene uden nogen "px" -indikation, som vist i eksemplerne herunder:

 border-image: url (Bgimage.png) 48 48 48 48 runde; 

eller

 border-image: url (Bgimage.png) 30% 30% 30% 30% 30% runde; 

Begge resulterer i følgende som gengivet i Firefox 6.0.2:

Figur E

Det tredje stykke af grænsebilledreglen fortæller browseren, hvordan man håndterer den midterste del af dit billede eller omkring elementets fire kanter.

Gentag vil flise billedet, strækning skalerer billedet og runde vil fungere det samme som gentagelse ved at det skalerer eller rundes til elementets højde og bredde, enten et lag eller en defineret div. Du kan definere op til to værdier, hvoraf den første er øverste og nederste kanter, og den anden er til venstre og højre kanter. Eksemplet nedenfor indeholder en defineret kantbredde, Mozilla og Chrome præfikser og en tilbagevendende grænsebillederegel.

 border-width: 48px; 
 -moz-border-image: url (Bgimage.png) 48 48 48 48 gentag strækning; 
 -webkit-border-image: url (Bgimage.png) 48 48 48 48 gentag strækning; 
 baggrund-billede: url (Bgimage.png) 48 48 48 48 gentag strækning; 
 bredde: 400px; polstring: 5px 5px; højde: arve; 
Som du kan se, er kantbilledet nu strakt til 48px på alle kanter som vist i eksemplet i figur F.

Figur F

Det næste eksempel viser brugen af ​​den runde regel, hvor billedet gentages og skaleres (eller afrundes) til højden og bredden af ​​det definerede lag, det er indeholdt i. Jeg bruger billedet i figur G og følgende CSS3-kode:

Figur G

 border-width: 15px; 
 -moz-border-image: url (bgborder1.png) 43 43 runde; 
 -webkit-border-image: url (bgborder1.png) 43 43 runde; 
 bredde: 400px; polstring: 10px 10px; højde: arve; 
Resultatet er grænsen i figur H (ved hjælp af det samme eksempel HTML som ovenfor), vist i Firefox 6.0.2:

Figur H

Det næste eksempel viser brugen af strækningsreglen ved hjælp af billedet i figur I og CSS3-kode nedenfor:

Figur I

 border-width: 15px; 
 -moz-border-image: url (bgborder2.png) 35 35 strækning; 
 -webkit-border-image: url (bgborder2.png) 35 35 strækning; 
 bredde: 400px; polstring: 10px 10px; højde: arve; 
Den resulterende billedkant vises i figur J som vist i Chrome 14.0.835:

Figur J

I fremtidige segmenter, der dækker CSS3-serien, vil jeg gennemgå kasseskygge, 3D-tekst, overgang inklusive roll-over-effekter og andre funktioner, der kan bruges i dag i mange moderne browsere.

Også:

  • Se først på CSS3-webdesignelementer
  • CSS3-ressourceanmeldelse: CSS3.info
  • Arbejde med CSS3 Multi-column Layout Module
  • Arbejde med CSS3 baggrundsbilleder

© Copyright 2020 | mobilegn.com