Arbetar med ny styling för Borders i CSS3

I detta segment i CSS3-serien granskar vi gränsegenskaper som kan implementeras idag inklusive gränsfärg; gränstradius, som definierar rundade hörn; och kantbilder som använder olika bilder och egendomsregler, funktioner och funktioner.

Gräns ​​färg

Med hjälp av CSS3-gränsfärgegenskapen kan du tilldela en gräns med X-pixlar, som i 8px i exemplet nedan, då kan du använda upp till X-färger för den gränsregeln, varje färg återgivning med en pixelbredd. Och om du använder en standardgräns på 10 pixlar men bara använder sex eller sju färger kommer den sista färgen att tillämpas på den återstående kantbredden.

Att skapa en färgad kant med CSS3-kodning åstadkoms faktiskt ganska enkelt med följande exempel med färgkoder för graderad grå skuggning:

 .gräns { 
 gräns: 
 fast 8px # B9B9B9; 
 -moz-border-bottom-colours: # 555 # 666 # 777 # 888 # 999 #aaa #bbb #ccc; 
 -moz-border-top-färger: # 555 # 666 # 777 # 888 # 999 #aaa #bbb #ccc; 
 -moz-border-left-colours: # 555 # 666 # 777 # 888 # 999 #aaa #bbb #ccc; 
 -moz-border-höger-färger: # 555 # 666 # 777 # 888 # 999 #aaa #bbb #ccc; 
 stoppning: 5px 5px 5px 15px; 
 } 

Den resulterande gränsfärg-CSS3-koden kommer att göra en grå blekande ruta som omger innehållstexten. Stöds för närvarande endast av Mozilla Firefox för närvarande, det verkar så här när det tillämpas i följande exempel HTML:

Lorem ipsum dolor sit 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 visar hur det visas i Firefox 6.0.2: 

Figur A

Border-radius

Att lägga till avrundade hörn till en gräns innebär att lägga till en gränseradiusegenskap och handlar bara om att lägga till linjen som definierar antalet pixlar för varje hörn som ska avrundas. Att lägga till följande kodrad i det föregående exemplets gränsstil resulterar i de rundade hörnen i figur B. Syntaxen för placering avser övre vänstra, högra höger, nedre höger, längst ner till vänster:
 -moz-border-radius: 35px 35px 35px 35px; 

Gränseradien implementeras endast i Mozilla Firefox just nu; Så här återges det i Firefox 6.0.2:

Figur B

Nästa exempel resulterar i en annorlunda utformad rundad kant med denna kod:

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

Så här ser tweak ut i Firefox 6.0.2:

Figur C

Border-image

En alternativ gränsfunktion för CSS3 är egenskapen gränsbild, som gör att du kan skapa anpassade gränser och flexibla rutor runt HTML-innehåll. Den här egenskapen låter dig definiera en bild som ska användas i stället för den normala gränsen för ett element. Gränsen-bildegenskapen fungerar för närvarande i Safari, Firefox 3.1+ och Chrome när man använder prefixerna -moz- respektive -webkit- . Syntaxen för att använda egenskapen gränsbild innehåller tre delar som visas nedan med hjälp av CSS3-regeln:

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

Egenskapen specificerar (1) webbadressen till bilden som ska användas som kantlinje, (2) var man ska skära bilden definierad i höjd och bredd (X är lika med skivhöjd, Y är lika med skivbredd) och (3) hur webbläsaren kommer att applicera dessa sektioner på elementets gränskanter; typ kan ange om gränsen ska upprepas, rundas eller sträckas. Alternativen för typ = är upprepade eller runda eller sträckta .

Den första delen av fastighetsregeln är en fortsättning på den välkända egenskapen för bakgrundsbilder och hur de har använts i flera år. I det här exemplet kommer jag att använda bilden Bgimage.png som visas nedan och är 148px X 148px.

Figur D

Den andra delen av reglerna för gränsa-bildegenskapen kan ha upp till fyra värden som specificerar kantbredden och anges i den typiska ordningen för topp, höger, botten, vänster och kan uttryckas som pixlar eller procent, där pixlar hänvisas till med symbolen% och pixlarna listas ensamma utan någon "px" -indikation, som visas i exemplen nedan:

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

eller

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

Båda resulterar i följande som återges i Firefox 6.0.2:

Figur E

Den tredje delen av gränsen-bildregeln berättar webbläsaren hur man hanterar den mittersta delen av din bild, eller runt elementets fyra kanter.

Upprepa kommer att tegla bilden, stretch kommer att skala bilden och runda kommer att fungera på samma sätt som upprepning genom att den skalar eller rundar till elementets höjd och bredd, antingen ett lager eller definierad div. Du kan definiera upp till två värden, varav den första är övre och nedre kanter, och den andra är för vänster och höger kanter. Exemplet nedan innehåller en definierad kantbredd, Mozilla och Chrome-prefix och en fallback-gränsbildregel.

 border-width: 48px; 
 -moz-border-image: url (Bgimage.png) 48 48 48 48 upprepa stretch; 
 -webkit-border-image: url (Bgimage.png) 48 48 48 48 upprepa stretch; 
 bakgrund-bild: url (Bgimage.png) 48 48 48 48 upprepad sträcka; 
 bredd: 400px; stoppning: 5px 5px; höjd: ärva; 
Som du kan se är gränsen nu utsträckt till 48px på alla kanter, som visas i exemplet i figur F.

Figur F

Nästa exempel visar användning av den runda regeln där bilden kommer att upprepas och skalas (eller avrundas) till höjden och bredden på det definierade lagret det finns i. Jag ska använda bilden i figur G och följande CSS3-kod:

Figur G

 border-width: 15px; 
 -moz-border-image: url (bgborder1.png) 43 43 runda; 
 -webkit-border-image: url (bgborder1.png) 43 43 runda; 
 bredd: 400px; stoppning: 10px 10px; höjd: ärva; 
Resultatet är gränsen i figur H (med samma exempel HTML som ovan), visas i Firefox 6.0.2:

Figur H

Nästa exempel visar användningen av sträckningsregeln med bilden i figur I och CSS3-koden nedan:

Figur I

 border-width: 15px; 
 -moz-border-image: url (bgborder2.png) 35 35 stretch; 
 -webkit-border-image: url (bgborder2.png) 35 35 stretch; 
 bredd: 400px; stoppning: 10px 10px; höjd: ärva; 
Den resulterande bildgränsen visas i figur J som visas i Chrome 14.0.835:

Figur J

I framtida segment som täcker CSS3-serien kommer jag att granska rutskugga, 3D-text, övergång inklusive roll-over-effekter och andra funktioner som kan användas idag i många moderna webbläsare.

Också:

  • Titta först på CSS3-webbdesignelement
  • CSS3-resurssyn: CSS3.info
  • Arbeta med CSS3-modulen för flera kolumner
  • Arbeta med CSS3 bakgrundsbilder

© Copyright 2020 | mobilegn.com