Proprietatea CSS3 de imagine la graniță Efectuarea de fotografii într-adevăr răcoroase!
Crearea frontierelor nu este nimic nou în HTML & CSS; am reușit să adăugăm frontiere de la început. S-ar putea să fi fost familiarizați cu granițe solide, frontiere punctate, frontiere sparte și așa mai departe.
Dar, cu noua proprietate a imaginii de frontieră CSS3, crearea frontierelor pe elementul HTML devine tot mai avansată; pur și simplu, putem spune că acum putem adăuga o frontieră folosind o imagine ca sursă care ne va permite să adăugăm granițe mai atractive. Bine, acum să vedem cum funcționează această proprietate.
Sintaxă și suport pentru browser
Imaginea de frontieră din CSS3 este definită folosind următoarea sintaxă de stenografie:
imaginea de frontieră: [sursa de imagine] [slice] [lățimea] [începutul] [repeta];
Sintaxa de mai sus este versiunea oficială din W3C, care este acceptată numai în Chrome, în timp ce Opera, Firefox și Safari necesită încă versiunea prefixată (-o-, -Moz-, -WebKit-), iar Internet Explorer, fără îndoială, nu susține deloc această proprietate.
Mai mult decât atât, [lăţime] si [început] în această privință border-image proprietățile nu sunt încă acceptate în niciun browser, însă valoarea lățimii poate fi înlocuită utilizând lățimea graniței proprietate.
Deci, pe scurt, pentru moment, putem aplica doar valoarea [sursa de imagine], [felie] și [repeta] .
imaginea frontală: [sursa de imagine] [slice] [repeat];
Imagine Slice
Înainte de a începe să demonstram această proprietate, să vorbim despre “imagine slice” în primul rând, deoarece este ceva nou în declararea unei proprietăți. Imaginea prezentată aici va defini tăierea imaginii care are, respectiv, punctul de pornire din partea de sus, din dreapta, din partea de jos și din stânga marginilor imaginii, care vor împărți ulterior imaginea în nouă secțiuni, după cum se ilustrează cu imaginea următoare.
În imaginea de mai sus, veți vedea secțiunile 1, 3, 7 și 9 vor deveni colțurile frontierei și ale secțiunilor 2, 4, 6 și 8 va deveni marginea sau linia de frontieră, asigurându-vă că secțiunea în care va deveni marginea este repetabilă sau elastică.
Valoarea feliilor poate fi declarată cu a pixel unitate sau un procentaj (%) unitate pentru măsurarea flexibilă.
mai multe referințe:
- CSS Backgrounds and Borders Nivelul 3
Crearea unui cadru foto
Acum, să arătăm proprietatea într-un exemplu real.
De data aceasta, vom pune în aplicare border-image proprietate pentru a crea o ramă foto și vom folosi imaginea de mai jos ca sursă. Am măsurat cu atenție imaginea, astfel încât aceasta să poată fi tăiată în mod corespunzător, repetată și întinsă, indiferent de lățimea și înălțimea conținutului.
Notă: puteți descărca imaginea de mai sus de la acest link.
De asemenea, în această demonstrație vom folosi acest film cinematografic uimitor de la mine la tine ca fotografie.
(Sursa de imagine: de la mine la tine)
Marcajul
Marcarea este la fel de simplă:
Nu uitați să înlocuiți images_2 / CSS3-border-image-proprietate-making-fotografii-într-adevăr-cool_3.jpg cu propria ta fotografie.
Stilurile
Și apoi, să-i dăm un cadru folosind border-image.
Dacă vă uitați la imaginea de mai sus, lățimea imaginii este 180px in total. Această valoare poate fi apoi împărțită în 6 care fiecare diviziune fiind 30px; și astfel vom împărți imaginea 30px.
Dacă utilizați valoarea lungime pentru felie, ar trebui să excludeți px unitate, deoarece va fi tradus automat pixel, dar dacă decideți să utilizați procentajul, va trebui în continuare să adăugați (%).
În ceea ce privește repetarea imaginii, vom folosi implicit; repeta. Alternativ, puteți utiliza întinde și nu vă faceți griji, imaginea frontierei va arăta în continuare grațios.
img border-image: url ("imagini / cadru.png") 30 repetați; - imagine de la frontieră: url ("images / frame.png") 30 repetare; -moz-imaginea de frontieră: url ("images / frame.png") 30 repetați; -webkit-border-image: url ("images / frame.png") 30 repetați; lățimea frontală: 30px; În plus, dorim să plasăm imaginea în centrul ferestrei browserului, precum și să adăugăm o textură de fundal în document pentru ao face mai convingătoare.
html (fundal: url ('images / lightpaperfibers.png'); .wrapper margin: 20px auto; înălțime: 476px; lățime: 675px; text-align: centru; Bine, cred că am terminat aici, acum să vedem asta într-un browser.
- Demo
- Descărcați sursa
Simti ca si cum te uiti la o pictura magica in Hogwarts?
Gândul final
Acest border-image este, fără îndoială, un plus frumos în familia CSS3; nu mai trebuie să ne limităm la granițele simple simple.
Și în acest post ne-am arătat cum putem crea un cadru de imagine fără a ne îngrijora conținutul sau în acest caz dimensiunile fotografiei (lățime și înălțime). Înălțimea și lățimea pot fi flexibile, atât timp cât sursa de frontieră este repetabilă sau elastică.
În cele din urmă, dacă sunteți încă puțin cam nedumerit border-image, există o unealtă pe care o puteți folosi pentru a vă ajuta să creați unul mai ușor: instrument de imagine de frontieră
