Это ожидаемое поведение.Изображение представляет собой квадрат, даже если у вас есть прозрачность.Если вы хотите, чтобы тень на PNG соответствовала непрозрачной части, вам нужно добавить тень к самому PNG и не использовать тень CSS.
В конкретном сценарии, на который вы смотрите(при условии, что вы пытаетесь добавить тень на одну из трех вкладок изображения одинаковой формы), вы можете поместить каждую вкладку в элемент div с отступом, куда будет направлена тень, создать один png с соответствующей тенью тенью,и просто есть класс css, который применяет теневое изображение в качестве фона на активной вкладке.
РЕДАКТИРОВАТЬ: Другой подход?
После того, как я ответил на это, я подумал, "можетможно применить стилизацию к полиграфической карте изображения и наложить тень на нее? "К сожалению, ответ - нет.По независящим от меня причинам карты изображений могут иметь только небольшое количество стилей, применяемых к ним (например, позиционирование), и никогда не будут видны.Тем не менее, это привело меня к другому пути: создать карту изображений с поли-областями и использовать javascript, чтобы получить координаты и создать SVG с теневым фильтром.Затем этот svg можно установить в качестве фонового изображения для фрейма с прозрачным PNG (или поместить прозрачный svg в противном случае поверх изображения. Это, очевидно, не будет работать для всех браузеров, поскольку некоторые не поддерживают svg, но это интересноконцепции, и мне, возможно, придется собрать библиотеку js для ее реализации ... это определенно облегчит применение фигурных теней.