今天上面同志们在讨论css3内发光效果，自己也就研究一下，写了个效果出来，涉及c ss3投影，渐变，蒙版，伪类等知识点，现在写下设计思路，仅供参考。发个效果图大家看先：
一般我们都是用css3的box-shad ow来实现盒投影，用text-shado w来实现文字投影，b ox-sh adow设置方型盒子投影，用r aidus的话可以让盒子产生圆角，看起来就很圆滑舒服，一般的写法是这样的：
-moz-b ox-sh adow:1px 1px 5p x #000;
1px(水平方向偏移) 1px(垂直方向偏移) 5p x(阴影羽化) #000(颜);
当偏移量为负数时就向反方向偏移，试试就明白了，这里不贴图。
这个是一般的投影效果，如果是内阴影，那么就加个“i nset”属性，写法如下：
-moz-box-s hadow:inse t 1px 1px5px #000;
这样就变成了PS里面的内阴影，效果很赞，很实用，如果需要内发光效果，则背景底深，投影颜浅，这样就会感觉是发光，而背景颜深，投影颜浅，这样看起来就是投影了；
不过里面讨论的是文字的投影内发光，上面的是顺便提提而已，下面才是正题：
文字是用text-shad ow来产生阴影，而且产生的时候能跟随文字的轮廓投影，如下所示：
te xt-sh adow:2px 2px 1p x #000;
如果用box-shad ow的话效果是这样的：
会根据放文字容器的盒子来投影(我设定了容器的宽度200px，背景未设定颜透明)，不会跟随文字轮廓投影，效果不是我们所要的；
然而text-shado w没有in set属性，这个就比较棘手了，怎么才能实现文字内投影，同时还有文字渐变？
一层一层来，一般ps处理文字效果都是一层层的剥离，先从文字内发光入手：
我写了这么一个页面试内发光，代码如下：
<!D OCTYP E htm l PUB LIC "-上海凯迪财税htt p://101.1.20.46/ //W3C//D TD
XH TML 1.0 Tr ansit ional//EN" "//T D/xht ml1-t ransi tiona l.dtd">
<h tml x mlns="/1999/xht ml">
css特效文字<head>
<me ta ht tp-eq uiv="Conte nt-Ty pe" c onten t="te xt/ht ml; c harse t=utf-8" />
<ti tle>无标题文档</titl e>
<s tyletype="text/css">
bod y{ ba ckgro und:#CCCCC C;}
.text{ font-size:100p x; fo nt-fa mily:"广州中维财税 ht tp://101.1.28.14/";
color:rgba(0,0,0,0); font-weig ht:bo ld; p ositi on:re lativ e;tex t-sha dow:0px 0px 0p x
#000000;}
.te xt:af ter{conte nt:"广州-龙"; posi tion:absol ute;left:0px;text-shado w:0px 0px3px #fff;} </st yle>
</hea d>
<body>
<div clas s="te xt">广州-龙</div>
</bod y>
</html>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论