html - 我可以结合顶部/底部和径向渐变来使 DIV 从页面中突出吗

Question

我在 firefox 中有以下渐变:

-moz-linear-gradient(top,#222 0%,#444 5%,#333 20%,#333 95%, #222 100%)

这适用于我网页上使用的水平带，但现在我想使用类似的渐变使 Logo 看起来好像从页面上突出来了。有谁知道我如何将渐变应用到 200 x 30 像素的 div，并使它看起来像从黑色页面竖立起来的渐变，就像一个在所有四个面上都带有渐变的按钮？

希望有一些新功能可以做到这一点。

玛丽

Answer 1

听起来投影就是您想要的。通常这会向右侧和底部应用渐变，但如果将 X 和 Y 偏移设置为 0，则它应该应用于所有侧面。

为此有一个 box-shadow CSS 规则，这里是一个带有 Mozilla 供应商前缀 (-moz-) 的示例:

div.box {
    width:200px;
    height:30px;
    -moz-border-radius: 15px;
    -moz-box-shadow: 0px 0px 10px #fff;
}

<div class="box">logo?</div>

这应该会为您提供一个“外部”带有渐变的圆形框。您还应该考虑包括其他供应商前缀和无前缀标准。对于 IE 也是如此，我认为您可以查看阴影过滤器。

希望对您有所帮助。