html - 在 css 中为菜单标题添加阴影

Question

我有一个 menu header .它在 adobe photoshop 中的投影效果是:

Blend Mode: Multiply
Opacity: 0.25 (25%)
Distance: 3px
Spread: 15%
Size: 9px
Color: #282829

我正在尝试在我的菜单标题 (adove) 的 CSS 中使用上述代码，但不幸的是，由于某些原因我无法复制它。我用于菜单标题的代码是:

    position: relative;
    top: -890px;
    background-color: rgba(0, 0, 0, 0.5);
    height: 89px;
    border-bottom: 3px solid #EF7440;
    overflow: hidden;

Answer 1

试试看，必要时调整像素值。第 4 个值是模糊大小，第 3 个值是传播的大小。第一个和第二个值调整阴影的 X 和 Y 偏移量。

-webkit-box-shadow: 0px 0px 9px 3px rgba(41,41,41,.25);
-moz-box-shadow: 0px 0px 9px 3px rgba(41,41,41,.25);
box-shadow: 0px 0px 9px 3px rgba(41,41,41,.25);