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