CSS3 Border-Image Имот за правене на снимки наистина страхотно!
Създаването на граници не е нищо ново HTML & CSS; успяхме да добавим граници от самото начало. Може да сте били запознати със солидни граници, пунктирани граници, прекъснати граници и т.н..
Но с новото свойство CSS3 border-image създаването на граници на HTML елемента става все по-усъвършенствано; Е, просто казано, сега можем да добавим граница, използвайки образ като източник, който ще ни позволи да добавим по-привлекателни граници. Добре, сега да видим как работи това свойство.
Поддръжка на синтаксис и браузър
Граничното изображение в CSS3 се дефинира чрез следния стенографски синтаксис:
border-image: [източник на изображение] [парче] [ширина] [начало] [повторение];
Синтаксисът по-горе е официалната версия от W3C, която се поддържа само в Chrome, докато Opera, Firefox и Safari все още изискват предшестващата версия (-о-, -Моз-, -WebKit-), а Internet Explorer изненадващо изобщо не поддържа този имот.
Освен това, [Ширина] и [Начало] стойност в това гранично-изображение все още не се поддържа в никой браузър, но стойността на ширината може да бъде заменена с помощта на гранично-широчина Имот.
Така че, накратко, за сега можем да приложим само стойността на [източник на изображение], [Парче] и [Повторение] .
border-image: [източник на изображение] [срез] [повторение];
Image Slice
Преди да продължим да демонстрираме това свойство, нека поговорим за “изображение на парче” Първо, тъй като е нещо ново в обявяването на собственост. Разрезът на изображението тук ще дефинира изрязването на изображението, което съответно ще вземе началната точка от горната, дясната, долната и лявата част на ръбовете на изображението, които впоследствие ще разделят изображението на девет секции, както е илюстрирано със следното изображение.
В изображението по-горе ще видите раздели 1, 3, 7 и 9 ще се превърнат в ъглите на границата и секциите 2, 4, 6 и 8 ще се превърне в граничен ръб или линия, като се уверите, че участъкът, където ще стане ръбът, се повтаря или разтяга.
Стойността на парчетата може да се декларира с a пиксел единица или процент (%) единица за гъвкаво измерване.
още препратки:
- CSS Фонове и граници Ниво 3
Създаване на фоторамка
Сега нека демонстрираме собствеността в истински пример.
Този път ще изпълним гранично-изображение за създаване на фото рамка и ще използваме изображението по-долу като източник. Ние внимателно измерихме изображението, така че да може да бъде правилно нарязано, повторено и опъната, независимо от ширината и височината на съдържанието.
Забележка: можете да изтеглите изображението по-горе от тази връзка.
Също така, в тази демонстрация ще използваме тази зашеметяваща Cinemagraph от From Me to You като снимка.
(Източник на изображението: От мен към теб)
Маркировката
Маркировката е толкова проста, колкото:
Не забравяйте да замените images_2 / CSS3 гранично-образ-собственост вземане-снимки-наистина-cool_3.jpg със собствена снимка.
Стилът
И тогава нека да го използваме като рамка гранично-изображение.
Ако погледнете изображението по-горе, ширината на изображението ни е 180px общо. Тази стойност може да бъде разделена на 6 което е всяко отделение 30px; и затова ще разделим изображението 30px.
Ако използвате стойност на дължината за слайса, трябва да изключите пиксела единица, тъй като тя автоматично ще бъде преведена на пиксел, но ако решите да използвате процент, все още ще трябва да добавите (%).
Що се отнася до повторението на изображението, ще използваме по подразбиране; повторение. Като алтернатива можете да използвате опъвам, разтягам и не се притеснявайте, изображението на границата ще изглежда добре.
img border-image: url ("images / frame.png") 30 повторение; -o-border-image: url ("images / frame.png") 30 повторение; -moz-border-image: url ("images / frame.png") 30 повторение; -webkit-border-image: url ("images / frame.png") 30 повторение; широчина на границата: 30px; Освен това искаме също да поставим изображението в центъра на прозореца на браузъра, както и да добавим фонова текстура към документа, за да го направим по-привлекателен..
html фон: url ('images / lightpaperfibers.png'); .wrapper margin: 20px auto; височина: 476px; ширина: 675px; text-align: center; Добре, мисля, че сме приключили тук, сега нека да го разгледаме в браузър.
- Демонстрация
- Изтеглете Източник
Чувствате ли се, че гледате магическа картина в Хогуортс?
Последната мисъл
Това гранично-изображение несъмнено е хубаво допълнение към семейството на CSS3; вече не трябва да се ограничаваме до обикновените обикновени граници.
И в този пост ние ви показахме как можем да създадем рамка на изображението, без да се притесняваме за съдържанието или в този случай размерите на снимката (ширина и височина). Височината и ширината могат да бъдат гъвкави, стига граничният източник да е повторяем или разтеглив.
И накрая, ако все още сте малко озадачен гранично-изображение, има инструмент, който можете да използвате, за да ви помогне да създадете по-лесно: инструмент за гранични изображения
