Homepage » Coding » CSS3 Border-Image Tulajdonságok készítése Fotók valóban jó!

    CSS3 Border-Image Tulajdonságok készítése Fotók valóban jó!

    Ez a cikk a mi része "HTML5 / CSS3 oktatóanyagok sorozat" - szentelt, hogy segítsen neked egy jobb tervező és / vagy fejlesztő. Kattints ide több cikket láthat ugyanazon sorozatból.

    A határok létrehozása semmi új HTML & CSS; a kezdetektől fogva határokat adhatunk. Lehet, hogy ismeri a szilárd határokat, a pontozott határokat, a szaggatott szegélyeket és így tovább.

    Az új CSS3 határkép-tulajdonságokkal azonban a határelemek létrehozása a HTML elemen egyre fejlettebb; Nos, egyszerűen fogalmazva, most már képesek vagyunk hozzáadni egy határt egy forrásként, amely lehetővé teszi számunkra, hogy vonzóbb határokat adjunk hozzá. Rendben, nézzük meg, hogyan működik ez a tulajdonság.

    Szintaxis és böngésző támogatás

    A CSS3 határképe a következő rövidített szintaxissal van meghatározva:

     border-image: [image source] [szelet] [szélesség] [kezdet] [ismétlés];

    A fenti szintaxis a W3C hivatalos verziója, amelyet csak a Chrome támogat, míg az Opera, a Firefox és a Safari még mindig igényli az előtagot (-o-, -Moz-, -webKit-), és az Internet Explorer nem meglepő módon nem támogatja ezt a tulajdonságot.

    Továbbá a [szélesség] és a [Eleve] értéket border-image a böngészők még nem támogatják a tulajdonságokat, azonban a szélesség értéket a border-width ingatlan.

    Szóval, röviden, most csak az értéket tudjuk alkalmazni [képforrás], [szelet] és [ismétlés] .

     border-image: [image source] [szelet] [ismétlés];

    Kép szelet

    Mielőtt továbblépnénk ezt a tulajdonságot, beszéljünk a “képszelet” először azért, mert valami újdonság a tulajdon kijelentésében. Az itt látható képszelet meghatározza a kép vágását, amely a kép szélének felső, jobb, alsó és bal oldaláról indul ki, ami később a képet kilenc részre osztja, amint azt a következő kép mutatja..

    A fenti képen látható, hogy a szakaszok 1, 3, 7 és 9 lesz a határ sarkai, és a szakaszok 2, 4, 6 és 8 lesz a szegély vagy a vonal, és győződjön meg róla, hogy a szelvény, ahol a szél lesz, megismételhető vagy nyújtható.

    A szeletek értékét a pixel egység vagy százalék (%) egység a rugalmas méréshez.

    további hivatkozások:

    • CSS háttér és határvonal 3. szint

    Fényképkeret létrehozása

    Most mutassuk be a tulajdonságot egy igazi példában.

    Ezúttal a border-image a képkeret létrehozására szolgáló tulajdonság, és az alábbi képet használjuk forrásként. Gondosan mérjük a képet, így megfelelően szeletelhetjük, megismételhetjük és feszíthetjük a tartalom szélességétől és magasságától függetlenül.

    Jegyzet: letöltheti a fenti képet a hivatkozásból.

    Ebben a bemutatóban ezt a lenyűgöző Cinemagraph-ot is használjuk a From Me-től Önhöz, mint fotót.

    (Képforrás: rólam én)

    A jelölés

    A jelölés olyan egyszerű, mint ez:

     

    Ne felejtsd el kicserélni images_2 / CSS3-border-image-property-készítés-photos-nagyon-cool_3.jpg saját fényképével.

    A stílusok

    És akkor adjunk neki egy keretet border-image.

    Ha megnézzük a fenti képet, a kép szélessége 180px összesen. Ezt az értéket ezután lehet osztani 6 melyik az egyes divíziók 30px; és így szeleteljük a képet 30px.

    Ha a szelet hosszértékét használja, akkor ki kell zárnia a px egység, mivel automatikusan le lesz fordítva pixel, de ha úgy dönt, hogy a százalékot használja, akkor még hozzá kell adnia a (%).

    Ami a képismétlést illeti, az alapértelmezettet fogjuk használni; ismétlés. Alternatív megoldásként használhatja kitágít és ne aggódj, a határkép még mindig kecses.

     img border-image: url ("images / frame.png") 30 ismétlés; -o-border-image: url ("images / frame.png") 30 ismétlés; -moz-border-image: url ("images / frame.png") 30 ismétlés; -webkit-border-image: url ("images / frame.png") 30 ismétlés; határszélesség: 30px;  

    Ezenkívül szeretnénk a képet a böngészőablak középpontjába helyezni, valamint hozzáadni egy háttér textúra a dokumentumhoz, hogy kényszerítőbb legyen.

     html background: url ('images / lightpaperfibers.png');  .wrapper margin: 20px auto; magasság: 476px; szélesség: 675px; szöveg-igazítás: központ;  

    Rendben, azt hiszem, itt vagyunk, most nézzük meg egy böngészőben.

    • Demó
    • Letöltés forrása

    Úgy érzi, mintha egy varázslatos festményt nézne a Roxfortban?

    Végső gondolat

    Ez border-image kétségtelenül szép kiegészítés a CSS3 családban; már nem korlátozódunk az egyszerű egyszerű határokra.

    Ebben a bejegyzésben megmutattuk, hogyan hozhatunk létre képkeretet anélkül, hogy aggódnánk a tartalomról, vagy ebben az esetben a fénykép méreteiről (szélesség és magasság). A magasság és a szélesség rugalmas lehet, amennyiben a határforrás megismételhető vagy nyújtható.

    Végül, ha még mindig egy kicsit zavarban van border-image, van egy eszköz, amellyel könnyebben hozhat létre: határkép eszköz