Монти Пайтон

IE10+ Рамка вокруг элемента

Свойство border-image разрезает изображение на 9 секций, как "крестики-нолики", затем оно помещает углы по углам, а среднюю секцию повторяет

Или для более старых браузеров нужно поделить изображение на 8+1 частей включая центральное, боковые (не угловые) должны быть переделаны в повторяющуюся текстуру.

P.S. если вы слышали чтото про текстурирование, то в связке с вэбом для вас не будет ничего трудного.

Может надо убрать альфаканал откудато чтобы он не унаследовался, и странно что computed одинаковый в обоих случаях

Но по факту: Изумрудный и Зелёный Крайола

В другом браузере надо открыть, может у вас какието проблемы с расширениями, в чём это вы дебажите в FireFox?

UPD: Попробуйте ещё задать значения в другой цветовой модели, например RGBA с нулевым альфа

Выложите в комментариях весь код стилей, а не результат, по результату вам никто никак не поможет.

Не используйте align="center"
Этот атрибут давно не используется, его оставили в браузерах только для поддержки очень старых сайтов
В наше время для внешнего вида нужно использовать только CSS

Известная статья про использование Flexbox кроссбраузерно, включая IE10-11: https://css-tricks.com/using-flexbox

https://www.w3schools.com/
https://htmlacademy.ru/ (интенсивный вебинар)
и книги почитайте свежие на английском языке 2017 и 2018+

Изображение

Если Aspect Ratio разный (соотношения сторон 1:1, 3:2, 8:5 etc) то, думаю роботы не помогут вам в таком случае, когда карточки товара должны быть одинакового размера - только ручная работа, подгонять собственноручно, или наняв дизайнера и контент-менеджера

Оберните всё в один элемент, и благодаря position: absolute; выстройте в нужном расположении фотку, имя, текст комментария, кнопку раскрытия, не знаю насколько это будет правильно, так как не являюсь верстальщиком https://tldrify.com/q85

пользоваться наверное препроцессорами

readymag

Прежде всего наверное нужно придумать: на какие группы разделить CSS.

Можно на 3 логических, но не знаю насколько это будет потом удобно читать:

CSS по сути это ведь просто селектор+свойство+значение

1. создайте значит топ 30 селекторов
   
2. потом топ свойств
   
3. и топ значений
   

(ведь нет никакого смысла в часто используемую шпаргалку добавлять что-то вообще экзотическое из языка CSS, или решить стоит-ли наоборот добавлять туда только менее известные вам селекторы, свойства, или значения (потому-что известные итак давно известны))

Также можно на другие группы разделить, интуитивно-визуального "характера", обычного восприятия, например:

1. фон
   
2. границы
   
3. шрифт
   
4. поля
   
5. ...
   

Или придумать на какие ещё группы можно поделить это, кроме визуальной составляющей или основополагающей

P.S. с HTML там не всё так просто, решил немного посмотреть что такое HTML API и понял что это не на один день

Саблайм наверное бажный, у него ещё и эти "стрелки" кажется не работают:

https://codepen.io/becktj07/pen/BpdgZz

Шпаргалка на будущее хорошая, терминов которые можно гуглить:

сделать разные фоновые изображения под разные соотношения сторон и через медиазапросы выставить подставления

нашлись исходники PSD:
design-mania.ru/downloads/psd-files/menu-navigation
freepsdfiles.net/graphics/apple-style-navigation-menu