Техники opacity и box-shadow при работе с прозрачными фонами отличаются по своему назначению и эффекту:
- Opacity позволяет указать уровень прозрачности элемента. 3 Значение opacity устанавливается в диапазоне от 0 (полная прозрачность) до 1 (полная непрозрачность). 1 С помощью этого свойства можно сделать полупрозрачными цвет фона, текста и рамки элемента, а также изображение. 1
- Box-shadow создаёт блочную тень позади элемента. 1 Первые два значения свойства box-shadow устанавливают горизонтальное и вертикальное смещения тени от исходного объекта. 1 Следующее значение определяет размер размытия (blur), которое увеличивает расплывчатость тени. 1 Последнее значение — цвет тени. 1
Таким образом, opacity используется для настройки прозрачности элемента, а box-shadow — для создания тени под элементом. 3