Question

我一直在研究网页设计的阴影效应技术。所以，我想应用这种技术来为我的网站实现一个顶部标题栏。

从我的发现来看，那里的人最常用的是box-shadow css属性。我想知道这是否是实现预期结果的最有效而简单的方法。我可以使用的任何其他选项以及它们的优点和缺点吗？

任何建议都会非常感激吗？

Answer 1

最简单的方法是Photoshop：）

否则，请继续阅读：http://www.css3.info/preview/box-shadow/

box-shadow是一个CSS3属性，这意味着它在＆lt; IE9，并非在大多数浏览器中原生可用，因此具有专有前缀：

IE投影的CSS代码示例：

filter:progid:DXImageTransform.Microsoft.Shadow(color='#000000',direction='120',strength='20');

CSS3版本：

element {
    -moz-box-shadow: 10px 10px 5px #888;
    -webkit-box-shadow: 10px 10px 5px #888;
    -o-box-shadow: 10px 10px 5px #888;
    -khtml-box-shadow: 10px 10px 5px #888;
    box-shadow: 10px 10px 5px #888;
}

Answer 2

CSS3 box-shadow属性的唯一选择是使用图像。 CSS3框阴影更容易应用，并且需要更少的页面重量（kb）才能使用。但是，并非所有浏览器都支持CSS3框阴影。

如果使用box-shadow属性，请确保为不同的浏览器设置所有各种属性。

box-shadow: 1px 2px 3px #000;
-moz-box-shadow: 1px 2px 3px #000;
-webkit-box-shadow: 1px 2px 3px #000;
-o-box-shadow: 1px 2px 3px #000;
-khtml-box-shadow: 1px 2px 3px #000;

box-shadow css属性，产生阴影效果的有效方法？

2 个答案: