虽然对高手来说,有点过时了,但是有时候能用上的。
CSS中有两种阴影效果,一种是DropShadow(投影),另一种是Shadow(阴影).
1、DropShadow
语法:{FILTER:DropShadow(Color=color,OffX=offX,OffY=offY,Positive=positive)}
Color 代表投影的颜色,格式为“#RRGGBB”
OffX 和 OffY 代表x和y方向的投影偏移量。必须用整数值,正数代表x轴的右方向和y轴的下方向。负值相反。
Positive 参数是一个布尔值。值为true(非0),那么就为任何的非透明像素建立可见的投影。如果值为false(0),那么就为透明的像素部分建立可见的投影。
2、Shadow
语法:{FILTER:Shadow(Color=color,Direction=direction)}
Color 代表阴影的颜色,格式为“#RRGGBB”
Direction是设置投影的方向,按照顺时针方向进行,0度代表垂直向上,然后每45度为一个单位。默认值是向左的270度。共8个方向。
两种特效的用法,一起写了。
在CSS里定义类,第一种是投影,第二中是阴影。数值可以自己调整,上面有详细介绍。
.dropshadow { filter: DropShadow(Color=green, OffX=5, OffY=5, Positive=1); position: absolute; font-size: 14pt; font-weight: bolder; top: 20px; clip: rect( ); left: 20px}
.shadow { filter: Shadow(Color=green, Direction=135); position: absolute; font-size: 14pt; font-weight: bolder ; left: 350px; top: 20px; clip: rect( )}
定义到字体。
dropshadow – 用CSS做投影效果
shadow – 用CSS做阴影效果
有喜欢的朋友可以放在自己的页面中看下效果颜色字体据自己喜好调用。
<html>
<head>
<title>www.dodocn.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
<!--
.dropshadow { filter: DropShadow(Color=green, OffX=1, OffY=1, Positive=1); position: absolute;
font-size: 14pt; font-weight: bolder; top: 20px; clip: rect( ); left: 20px}
.shadow { filter: Shadow(Color=green, Direction=135); position: absolute; font-size: 14pt; font-weight:
bolder ; left: 350px; top: 20px; clip: rect( )}
-->
</style>
</head>
<body>
<div class="dropshadow">dropshadow - <a href="http://www.dodocn.com">用<a href="http://www.suoxie.com/?css" target="_blank">CSS</a>做投影效果</a></div>
<div class="shadow">shadow - 用<a href="http://www.suoxie.com/?css" target="_blank">CSS</a>做阴影效果</div>
</body>
</html>
DropShadow 和 Shadow 有什么区别?
DropShadow 更像“投影”,靠 OffX、OffY 控制阴影偏移,Positive 决定对不透明还是透明像素生效;Shadow 则是按 Direction 指定方向生成阴影,更适合做固定方向的文字暗影。
这类字体阴影效果怎么调得更自然?
先把颜色调成比文字更深但不要太黑,再把偏移量控制在 1 到 3 之间,避免影子过重。若想更柔和,可减小对比度并让阴影方向与页面光源保持一致。
示例代码能直接用在网页里吗?
可以参考思路直接改写,但要注意这是较早期的 CSS Filter 写法,实际使用时应先在目标环境里测试兼容性。若只想做文字阴影,建议根据页面效果微调字号、位置和颜色。







发表回复