CSS3 Border-Image Property gjør bilder virkelig kule!
Å skape grenser er ikke noe nytt i HTML & CSS; Vi har vært i stand til å legge til grenser siden begynnelsen. Du har kanskje vært kjent med solide grenser, stiplede grenser, stiplede grenser og så videre.
Men med den nye CSS3-grensebilledegenskapen er det å bli mer avansert å skape grenser på HTML-elementet. vel, enkelt sagt, vi kan nå legge til en ramme ved hjelp av et bilde som kilden som gjør at vi kan legge til flere attraktive grenser. Ok, nå, la oss se hvordan denne egenskapen fungerer.
Syntax og nettleserstøtte
Grensebildet i CSS3 er definert ved hjelp av følgende syntetisk syntetisk stenografi:
border image: [bilde kilde] [skive] [bredde] [utgang] [gjenta];
Syntaxen over er den offisielle versjonen fra W3C som bare støttes i Chrome, mens Opera, Firefox og Safari fortsatt krever den forhåndsdefinerte versjonen (-o-, -moz-, -webkit-), og Internet Explorer støtter ikke overraskende ikke denne egenskapen i det hele tatt.
Videre er det [bredde] og [utgangspunktet] verdi i dette border-image Egenskapen støttes ennå ikke i noen nettlesere, men breddeverdien kan erstattes med border-bredde eiendom.
Så kort sagt, for nå kan vi bare bruke verdien av [bildekilde], [skjære] og [gjenta] .
border image: [bilde kilde] [skive] [gjenta];
Bildesnitt
Før vi fortsetter å demonstrere denne egenskapen, la oss snakke om “bildesnitt” først som det er noe nytt i å erklære en eiendom. Bildesnittet her definerer klippet av bildet som henholdsvis tar utgangspunktet fra toppen, høyre, bunnen og venstre av bildekantene, som etterfølgende også deler bildet i ni seksjoner, som illustrert med følgende bilde.
På bildet over, vil du se at delene 1, 3, 7 og 9 vil bli kantene på grensen, og delene 2, 4, 6 og 8 vil bli kantkanten eller linjen, sørg for at delen der den blir kanten, kan repeteres eller strekkes.
Verdien av skivene kan deklareres med en pixel enhet eller en prosentandel (%) enhet for fleksibel måling.
flere referanser:
- CSS Bakgrunn og grenser Nivå 3
Opprette en fotoramme
La oss nå vise eiendommen i et reelt eksempel.
Denne gangen skal vi implementere border-image eiendom for å lage en fotoramme, og vi skal bruke bildet nedenfor som kilde. Vi har nøye målt bildet så det kan skikkelig skives, gjentas og strekkes uavhengig av innholdsbredde og høyde.
Merk: Du kan laste ned bildet over fra denne linken.
Også i denne demonstrasjonen vil vi bruke denne fantastiske Cinemagraph fra From Me to You som bildet.
(Bilde kilde: Fra meg til deg)
Markeringen
Markeringen er like enkelt som dette:
Ikke glem å erstatte images_2 / CSS3-border-image-eiendom-making-bilder-egentlig-cool_3.jpg med ditt eget bilde.
Stilene
Og så, la oss gi det en ramme med border-image.
Hvis du ser på bildet ovenfor, er bildebredden vår 180px totalt. Denne verdien kan da deles inn i 6 som hver divisjon er 30px; og så vil vi skjære bildet for 30px.
Hvis du bruker lengdeverdi for skiven, bør du ekskludere px enhet, da den automatisk blir oversatt til pixel, men hvis du bestemmer deg for å bruke prosentandel, må du fortsatt legge til (%).
Når det gjelder bilderepetisjonen, vil vi bruke standardverdien; gjenta. Alternativt kan du bruke tøye ut og ikke bekymre deg, grensebildet vil fremdeles se grasiøst ut.
img border-image: url ("images / frame.png") 30 gjenta; -grense-bilde: url ("images / frame.png") 30 gjenta; -moz-border-image: url ("images / frame.png") 30 gjenta; -webkit-grense-bilde: url ("images / frame.png") 30 gjenta; kantbredde: 30px; I tillegg ønsker vi også å plassere bildet i midten av nettleservinduet, samt legge til en bakgrunnstekstur i dokumentet for å gjøre det mer overbevisende.
html bakgrunn: url ('images / lightpaperfibers.png'); .wrapper margin: 20px auto; høyde: 476px; bredde: 675px; tekstjustering: center; Ok, jeg tror vi er ferdige her, la oss se den i en nettleser.
- Demo
- Last ned kilde
Føler du at du ser på et magisk maleri i Hogwarts?
Endelig tanke
Dette border-image Utvilsomt er et fint tillegg i CSS3 familien; vi skal ikke lenger være begrenset til de enkle vanlige grensene.
Og i dette innlegget har vi vist deg hvordan vi kan lage en bilderamme uten å bekymre deg for innholdet eller i så fall bildens dimensjoner (bredde og høyde). Høyden og bredden kan være fleksibel, så lenge grensekilden er repeterbar eller strekkbar.
Til slutt, hvis du fortsatt er litt forvirret om border-image, Det er et verktøy du kan bruke til å hjelpe deg med å opprette en enklere måte: grense bildeverktøy
