Чтобы получить орнамент по одному бордеру избранного дива достаточно скопировать стили любого примера прямо из статьи, создать div и добавить ему соответствующий класс. Для того чтобы увидеть узор, задайте блоку темный цвет фона и некоторую высоту (в примерах это 70px), или просто разместите в нем нужный контент.
Также, если правильно поняла, вы хотите «нарисовать» узор по всему периметру блока, и блок должен быть только один. Это можно сделать, воспользовавшись множественными значениями свойств background-repeat, background-size и background-position. Вот, сделала демо, где используются четыре градиента.
radial-gradient(circle at 10px 0, rgba(255,255,255,0) 9px, #fff 10px, rgba(255,255,255,0) 11px),
radial-gradient(circle at 11px 10px, rgba(255,255,255,0) 9px, #fff 10px, rgba(255,255,255,0) 11px),
radial-gradient(circle at 10px 11px, rgba(255,255,255,0) 9px, #fff 10px, rgba(255,255,255,0) 11px),
radial-gradient(circle at 0 10px, rgba(255,255,255,0) 9px, #fff 10px, rgba(255,255,255,0) 11px);
Вид и положение каждого из градиентов определены соответствующими значениями указаных свойств. То есть в строке background-position: top left, top right, bottom left, top left; значение top left относится к первому градиенту, top right — ко второму и т.д.
Можете попробовать добавить еще градиентов, усложнить рамку из демо на ваш вкус. Поделитесь, пожалуйста, если что-то симпатичное получится.
Если вы имеете в виду использование border-image с градиентом, воспроизвести примеры таким образом будет проблематично без поддержки множественных значений border-image. А если речь идет о border-image и картинке, то да, хорошая мысль.
Cпасибо! Реализация на CSS в моем случае, в первую очередь, связана с желанием поближе подружиться с CSS и его возможностями. А в целом, думаю, графика, действительно уместнее в большинстве подобных ситуаций. Многое, на мой взгляд, зависит от трудозатрат верстальщика. Нарисовать фоновую волнистую линию градиентом — почему бы и нет. А вот последние мои примеры с привлечением псевдоэлементов и кучи градиентов получились довольно громоздкими. Не исключаю использование SVG фона вместо них на будущем сайте. Как-то оно компактнее.
divи добавить ему соответствующий класс. Для того чтобы увидеть узор, задайте блоку темный цвет фона и некоторую высоту (в примерах это70px), или просто разместите в нем нужный контент.Также, если правильно поняла, вы хотите «нарисовать» узор по всему периметру блока, и блок должен быть только один. Это можно сделать, воспользовавшись множественными значениями свойств
background-repeat,background-sizeиbackground-position. Вот, сделала демо, где используются четыре градиента.Вид и положение каждого из градиентов определены соответствующими значениями указаных свойств. То есть в строке
background-position: top left, top right, bottom left, top left;значениеtop leftотносится к первому градиенту,top right— ко второму и т.д.Можете попробовать добавить еще градиентов, усложнить рамку из демо на ваш вкус. Поделитесь, пожалуйста, если что-то симпатичное получится.
border-imageс градиентом, воспроизвести примеры таким образом будет проблематично без поддержки множественных значенийborder-image. А если речь идет оborder-imageи картинке, то да, хорошая мысль.div.