CSS3作为新兴的前端技术可以实现很多复杂变化的效果,比如文字描边。
这里主要用到text-shadow属性,顾名思义就是为文字加上阴影效果。例:
text-shadow:10px 5px 2px #f60;
各位置参数说明:
text-shadow:x位移 y位移 模糊程度 颜色
其中:x位移和y位移表示阴影相对文字的偏移值,可以为负值。
现在说正题,这种思路其实很简单:对四个方向都作出模糊程度为零的1px阴影。
写法如是:
-webkit-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;
-moz-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;
text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;
*filter: Glow(Color=#000, Strength=1);
这个针对各主流浏览器做了适配的写法。
原则上,text-shadow支持了多方向阴影的写法,不过代价是代码偏多!
<!--EndF-->
分享到:
相关推荐
CSS3作为新兴的前端技术可以实现很多复杂变化的效果,比如文字描边。这里主要用到text-shadow属性,顾名思义就是为文字加上阴影效果,本文给大家介绍纯CSS3代码实现文字描边,需要的朋友参考下
最近遇到一个需求,需要实现文字的描边效果,如下图 解决方法一 首先想到去看CSS3有没有什么属性可以实现,后来被我找到了text-stroke 该属性是一个复合属性,可以设置文字宽度和文字描边颜色 该属性使用...
dw文字描边效果 span { position:absolute; padding:4px; filter: Dropshadow(offx=1,offy=0,color=white) Dropshadow(offx=0,offy=1,color=white) Dropshadow(offx=0,offy=-1,color=white) Dropshadow(offx=-1,...
继承自Label的一个可支持文字描边的空间,可以添加各种炫酷效果,包括一个库和一个DEMO,文字描边方法网上比较少,研究了半天,最后是在MSDN上面找到了方案,把他发上来,可以直接用,也可以改,希望能节省大家的...
用css滤镜实现的文字描边效果的代码
Unity 代码片段,旧版Text实现文字描边
易语言GDI文字描边源码,GDI文字描边
实现android描边功能。主要通过继承TextView方式实现,代码易懂。可以参考博文:http://blog.csdn.net/grafx/article/details/48879533
在unity中实现物体描边的效果,亲测可用。
自已对别人给的一个不完整的类,进行了封装。经过测试,可以完美的实现文字描边。
GDI文字描边.rar
不依赖javascript,直接使用纯css实现 svg 的描边绘制动画效果,效果演示动画。 基础知识: SVG中有个比较重要的属性分支 stroke ,中文软件中称为“描边”。和stroke相关的属性还有下面这些: 1、 stroke 表示...
主要介绍了CSS将文字描边及填充文字颜色的方法,分别为text-stroke和text-fill-color属性的使用方法讲解,注意浏览器的兼容问题,需要的朋友可以参考下
WPF文字描边(增强版,支持竖排,支持字符间距)
是用GDI+对输入的文字重绘!描边!易语言源代码!学习GDI挺不错的!
swift给文字添加描边效果封装方法/// 给字体添加描边效果 : strokeWidth为正数为空心文字描边 strokeWidth为负数为实心文字描边let
代码片段: <span class="margin-r">small checkbox <input type="checkbox" name="check" checked> pull-right"> <span class="margin-r">default checkbox <...</label>