一般我们都是用css3的box-shadow来实现盒投影，用text-shadow来实现文字投影。
box-shadow
box-shadow: h-shadow v-shadow blur spread color inset;注释：box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。
| 值 | 描述 | |
|---|---|---|
| h-shadow | 必需。水平阴影的位置。允许负值。 | |
| v-shadow | 必需。垂直阴影的位置。允许负值。 | |
| blur | 可选。模糊距离。 | |
| spread | 可选。阴影的尺寸。 | |
| color | 可选。阴影的颜色。请参阅 CSS 颜色值。 | |
| inset | 可选。将外部阴影 (outset) 改为内部阴影。 |
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:300px;
height:100px;
background-color:#ff9900;
-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
10px(水平方向偏移) 10px(垂直方向偏移) 5px(阴影羽化) #888888(颜色);
text-shadow
文字是用text-shadow来产生阴影，而且产生的时候能跟随文字的轮廓投影，如下所示：
text-shadow: h-shadow v-shadow blur color;| 值 | 描述 | |
|---|---|---|
| h-shadow | 必需。水平阴影的位置。允许负值。 | |
| v-shadow | 必需。垂直阴影的位置。允许负值。 | |
| blur | 可选。模糊的距离。 | |
| color | 可选。阴影的颜色。 |
对于IE，我们可以使用shadow滤镜来实现：
filter: Shadow(Color='black', Direction='135', Strength='2')
扫一扫
1541
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
