CSS3 Border-Image Property gør billeder virkelig kølige!
Oprettelse af grænser er intet nyt i HTML & CSS; Vi har været i stand til at tilføje grænser siden begyndelsen. Du har måske været bekendt med solide grænser, stiplede grænser, stiplede grænser og så videre.
Men med den nye CSS3-grænsebilledegenskab bliver der skabt grænser for HTML-elementet mere avanceret. Nå, simpelthen sagt, vi kan nu tilføje en ramme ved hjælp af et billede som kilden, som giver os mulighed for at tilføje flere attraktive grænser. Okay, lad os nu se, hvordan denne ejendom virker.
Syntax og Browser Support
Gränsbilledet i CSS3 er defineret ved hjælp af følgende syntetiske stenografi:
grænsebillede: [billedkilde] [skive] [bredde] [udgang] [gentag];
Syntaxen ovenfor er den officielle version fra W3C, der kun understøttes i Chrome, mens Opera, Firefox og Safari stadig kræver den forudgående version (-o-, -Moz-, -webKit-), og Internet Explorer understøtter ikke overraskende denne ejendom.
Desuden er det [bredde] og [begyndelsen] værdi i dette border-billede Egenskaben understøttes endnu ikke i nogen browsere, men breddeværdien kan erstattes med border-width ejendom.
Så kort sagt, for nu kan vi kun anvende værdien af [billedkilde], [skive] og [gentage] .
grænsebillede: [billedkilde] [skive] [gentag];
Billedskive
Før vi fortsætter med at demonstrere denne ejendom, lad os tale om “billedskive” først som det er noget nyt i at erklære en ejendom. Billedskiven her definerer skærmen af billedet, som henholdsvis tager startpunktet fra øverste, højre, nederste og venstre af billedkanterne, som efterfølgende også deler billedet i ni sektioner som illustreret med følgende billede.
På billedet ovenfor vil du se, at afsnittene 1, 3, 7 og 9 vil blive hjørnerne af grænsen og afsnittene 2, 4, 6 og 8 bliver grænsekanten eller linjen, så sørg for, at det afsnit, hvor det bliver kanten, kan gentages eller strækkes.
Skærmens værdi kan deklareres med a pixel enhed eller en procentdel (%) enhed til fleksibel måling.
flere referencer:
- CSS Baggrund og grænser Niveau 3
Oprettelse af en fotoramme
Lad os nu vise ejendommen i et rigtigt eksempel.
Denne gang skal vi gennemføre border-billede ejendom for at oprette en fotoramme, og vi bruger nedenstående billede som kilde. Vi har omhyggeligt målt billedet, så det kan skives ordentligt, gentages og strækkes uanset indholdets bredde og højden.
Bemærk: Du kan downloade billedet ovenfor fra dette link.
Også i denne demonstration vil vi bruge denne fantastiske Cinemagraph fra From Me til dig som billedet.
(Billedkilde: Fra mig til dig)
Opmærkning
Opmærkning er så simpelt som dette:
Glem ikke at erstatte images_2 / CSS3-border-image-ejendom-making-fotos-virkelig-cool_3.jpg med dit eget billede.
Stilarterne
Og så lad os give det en ramme ved hjælp af border-billede.
Hvis du ser på billedet ovenfor, er vores billedbredde 180px i alt. Denne værdi kan så opdeles i 6 som hver division er 30px; og så vil vi skære billedet til 30px.
Hvis du bruger længdeværdi for skiven, bør du udelukke px enhed, da den automatisk oversættes til pixel, men hvis du vælger at bruge procent, skal du stadig tilføje (%).
Med hensyn til billedrepetitionen bruger vi standard; gentage. Alternativt kan du bruge strække og bekymre dig ikke, grænsen billedet vil stadig se yndefulde.
img border-image: url ("images / frame.png") 30 gentag; -o-border-image: url ("images / frame.png") 30 gentag; -moz-border-image: url ("images / frame.png") 30 gentag; -webkit-border-image: url ("images / frame.png") 30 gentag; kantbredde: 30px; Desuden ønsker vi også at placere billedet i midten af browservinduet samt tilføje en baggrundsstruktur til dokumentet for at gøre det mere overbevisende.
html baggrund: url ('images / lightpaperfibers.png'); .wrapper margin: 20px auto; højde: 476px; bredde: 675px; tekst-align: center; Okay, jeg synes vi er færdige her, lad os nu se det i en browser.
- Demo
- Download kilde
Har du lyst til at se på et magisk maleri i Hogwarts?
Endelig tanke
Dette border-billede utvivlsomt er en flot tilføjelse i CSS3 familien; vi skal ikke længere være begrænset til de enkle glatte grænser.
Og i dette indlæg har vi vist dig, hvordan vi kan skabe en billedramme uden at bekymre os om indholdet eller i dette tilfælde fotografens dimensioner (bredde og højde). Højden og bredden kan være fleksibel, så længe grænsekilden kan gentages eller strækkes.
Endelig, hvis du stadig er lidt forvirret om border-billede, Der er et værktøj, du kan bruge til at hjælpe dig med at oprette en mere let: border image værktøj
