Jun 16

CSS字体阴影效果 不指定

Bronwen , 14:33 , 网页设计 , 评论(0) , 引用(0) , 阅读(394) , Via 本站原创 | |
今天切页面时遇到了文字的投影效果,于是在网上查到了代码

    CSS字体阴影效果,用CSS实现字体阴影/投影的效果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( )}

       #xzsmcont{height:80px;margin:0px;padding:15px 8px 0 10px;filter: DropShadow(Color=#dbdbdb, OffX=1, OffY=1, Positive=1);clip: rect( ); }
发表评论
表情
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
打开HTML
打开UBB
打开表情
隐藏
记住我
昵称   密码   游客无需密码
网址   电邮   [注册]