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

[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