CSS3-зображення властивості кордону, що робить фотографії дійсно здоровими!
Створення кордонів не є нічим новим HTML & CSS; ми могли додати кордону з самого початку. Можливо, ви були знайомі з суцільними кордонами, пунктирними кордонами, пунктирними кордонами тощо.
Але, з новою властивістю CSS3 border-image, створення кордонів на елементі HTML стає все більш просунутим; Ну, простіше кажучи, ми тепер можемо додати кордон, використовуючи образ як джерело, що дозволить нам додати більш привабливі кордони. Гаразд, тепер давайте подивимося, як працює ця властивість.
Підтримка синтаксису та браузера
Зображення кордону в CSS3 визначається за допомогою такого стислого синтаксису:
border-image: [джерело зображення] [фрагмент] [ширина] [початок] [повтор];
Синтаксис вище - це офіційна версія від W3C, яка підтримується лише в Chrome, тоді як Opera, Firefox і Safari все ще потребують префікс (-o-, -moz-, -webkit-), а Internet Explorer не дивно, що взагалі не підтримує цю властивість.
Крім того, [ширина] і [початок] значення в цьому межі зображення властивість ще не підтримується в жодних браузерах, однак значення ширини можна замінити за допомогою ширина кордону власності.
Отже, коротше кажучи, зараз ми можемо застосувати тільки значення [джерело зображення], [фрагмент] і [повтор] .
border-image: [джерело зображення] [фрагмент] [повтор];
Зріз зображення
Перш ніж приступити до демонстрації цієї властивості, давайте поговоримо про “фрагмент зображення” спочатку як щось нове в оголошенні власності. Зріз зображення тут визначає зріз зображення, яке, відповідно, приймає початкову точку від верхнього, правого, нижнього і лівого країв зображення, що згодом також розділить зображення на дев'ять розділів, як показано на наступному зображенні.
На зображенні вище ви побачите розділи 1, 3, 7 і 9 стануть кутами кордону і розділами 2, 4, 6 і 8 стане крайовим краєм або лінією, переконавшись, що ділянка, де він стане, стає краєм повторюваним або розтяжним.
Значення зрізів може бути оголошено a піксель одиницю або відсоток (%) блок для гнучкого вимірювання.
більше посилань:
- Фони та кордони CSS Рівень 3
Створення фоторамки
Тепер давайте продемонструємо властивість у реальному прикладі.
Цього разу ми збираємося реалізувати межі зображення властивість створити фоторамку, і ми будемо використовувати зображення нижче як джерело. Ми ретельно виміряли зображення так, щоб його можна було правильно нарізати, повторювати і розтягувати незалежно від ширини вмісту і висоти.
Примітка: Ви можете завантажити зображення вище з цього посилання.
Крім того, в цій демонстрації ми будемо використовувати цей приголомшливий Cinemagraph від «Мені до тебе» як фотографію.
(Джерело зображення: від мене до вас)
Розмітка
Розмітка така проста:
Не забудьте замінити images_2 / css3-border-image-make-photos-really-cool_3.jpg з власною фотографією.
Стилі
А потім, давайте дамо йому рамку, використовуючи межі зображення.
Якщо ви подивитеся на зображення вище, ширина нашого зображення - 180px загалом. Це значення потім можна розділити на 6 кожна частина якої є 30px; і таким чином ми наріжемо зображення 30px.
Якщо ви використовуєте значення довжини для фрагмента, ви повинні виключити px одиницю, оскільки вона автоматично переведена на піксель, але якщо ви вирішите використовувати відсоток, вам все одно доведеться додати (%).
Що стосується повторення зображення, ми будемо використовувати типове значення; повторити. Крім того, можна використовувати розтягування і не хвилюйтеся, зображення кордону все одно буде виглядати витонченим.
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 background: url ('images / lightpaperfibers.png'); .wrapper margin: 20px auto; висота: 476px; ширина: 675px; text-align: center; Гаразд, я думаю, що ми тут зробили, тепер давайте розглянемо його в браузері.
- Демо
- Завантажити джерело
Ви відчуваєте, як ви дивитеся на магічну картину в Хогвартсі?
Остаточна думка
Це межі зображення безсумнівно, є гарним доповненням до сімейства CSS3; ми більше не будемо обмежуватися простими рівними кордонами.
І в цьому пості ми показали вам, як можна створити кадр зображення, не турбуючись про вміст або в цьому випадку розміри фотографії (ширина і висота). Висота і ширина можуть бути гнучкими, якщо кордонне джерело повторюється або розтягується.
Нарешті, якщо ви все ще трохи здивовані межі зображення, є інструмент, який можна використовувати, щоб допомогти вам створити ще один простіше: інструмент зображення кордону
