css中菜单标题的阴影答案

【问题标题】：drop shadow for menu header in csscss中菜单标题的阴影
【发布时间】：2017-06-02 21:45:41
【问题描述】：

我有一个menu header。它在 adobe photoshop 中的投影效果如下：

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

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

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

【问题讨论】：

@MichaelCoker position: relative; top: -890px; background-color: rgba(0, 0, 0, 0.5); height: 89px; border-bottom: 3px solid #EF7440; overflow: hidden;
@MichaelCoker background color 有什么问题吗？我只是将它随机放在那里以匹配图像，但不幸的是它不起作用。
@MichaelCoker 我认为有些混乱。我正在尝试复制我发布的图像。我用来复制图像的代码是：position: relative; top: -890px; background-color: rgba(0, 0, 0, 0.5); height: 89px; border-bottom: 3px solid #EF7440; overflow: hidden;，但不幸的是，由于某些原因，它不起作用。我没有提到我认为复制图像不需要的代码的文本部分。

标签： html css adobe dropshadow

【解决方案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);

【讨论】：

只有最后一个被选中。以上 2 个（-webkit 和 -moz）不起作用。
它们只是前缀选项。 -webkit 是 Safari 和 Chrome。 -moz 是Mozilla。您的浏览器将使用它识别的属性名称并忽略其他名称。它应该一次只使用一个 - 但您需要确保匹配所有 3 个值，以便在所有浏览器中呈现相同。