Можно ли добиться такой комбинации внутренней тени, закругленной границы, смещенной границы и угловых изображений, исполHtml

Программисты Html
Anonymous
Можно ли добиться такой комбинации внутренней тени, закругленной границы, смещенной границы и угловых изображений, испол

Сообщение Anonymous »

Я пытаюсь настроить рамку для элементов
Изображение

Единственный способ создать эффект внутренней тени — это использовать CSS box-shadow с атрибутом inset, но он отображается под содержимым любого элемента, к которому он прикреплен (то есть под изображением в элемент
Изображение





Это делает то, что я хочу для первых трех из четырех частей моей цели, за исключением угловых украшений. Вот скриншот из Firefox, показывающий результат:
Изображение

Однако я не могу найти способ вставить угловые украшения в CSS.
Если я использую url() для связи статических SVG-файлов внутри свойства content, я не могу найти способ расположить их в каждом углу и я не могу использоватьstroke="currentColor" илиstroke="var(--Theme_Decor)", чтобы получить желаемый цвет.
Я также экспериментировал с добавлением ::before, чтобы я мог применить к нему свойство border-image, не нарушая остальные три части кадра, но опять же не смог придумать, как заставить его получить желаемый цвет.
Достижима ли моя цель исключительно с помощью CSS? Или мне нужно добавить дополнительные элементы HTML вокруг каждого
Изображение






Подробнее здесь: https://stackoverflow.com/questions/797 ... order-offs

Вернуться в «Html»