给需要实现文字描边的元素添加如下CSS3的属性

text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;

-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;

*filter: Glow(color=#000, strength=1);

实现前效果:

实现后效果:

语法详解:

text-shadow:向文本设置阴影。

text-shadow:color||length||length||opacity。

color:指定颜色。

length:第一个length指定阴影在水平方向上的延伸距离,第二个length指定阴影在垂直方向上的延伸距离,可以为负值。

opacity:指定阴影模糊效果的作用距离。

用逗号分隔的4个属性值代表的方向顺序为右下左上。

为了兼容多浏览器而加上前缀-webkit-和-moz-。

filter:滤镜。

filter:Glow 添加光辉晕圈效果在元素对象的边外。

filter:Glow(color=颜色值,strength=数值)。

color:指定晕圈发光效果的颜色。

strength:指定晕圈发光的强度范围,参数值从1到255。

 
来源: 谢斌个人博客, CSS3文字描边 CSS3字体外部描边。 
转载请以链接形式标明本文地址!本文地址:http://www.xb02.com/article/8/

CSS3文字描边 CSS3字体外部描边的更多相关文章

  1. 3.css3文字与字体

    1.css3文字与字体: ①Font-size:大小. ⑴通常使用px.百分比.em来设置大小: ⑵xx-small.x-small.small.medium.large.x-large.xx-lar ...

  2. CSS3文字阴影实现乳白文字效果

    CSS3文字阴影实现乳白文字效果是一款有效利用css3的text-shadow属性,可以实现很多漂亮的效果,CSS3 文字阴影 文字特效,字体效果. 源码下载:http://www.huiyi8.co ...

  3. CSS3制作404立体字体

    CSS3制作404立体字体页面效果     鼠标移动上去,背景色变白.       动态效果:     .demo p:first-child span:hover { text-shadow:0px ...

  4. css3-2 CSS3选择器和文本字体样式

    css3-2   CSS3选择器和文本字体样式 一.总结 一句话总结:是要记下来的,记下来可以省很多事. 1.css的基本选择器中的:first-letter和:first-line是什么意思? :f ...

  5. Css3 文字渐变整理(一)

    一.文本颜色渐变 <gradient> :可以应用在所有接受图像的属性上,允许使用简单的语法实现颜色渐变,以便UA在渲染页面自动生成图像. 语法:<gradient> = li ...

  6. jQuery+CSS3文字跑马灯特效

    jQuery+CSS3文字跑马灯特效是一款将跑马灯背景制作为3D立方体效果,文字在上面移动时,就像是文字投影到墙壁上,在转角出会改变运动方向. 效果展示 http://hovertree.com/te ...

  7. css3 文字的设置

    1.text-shadow 有3个length参数,第1个表示水平偏移,第2个表示垂直偏移,第3个表示模糊(可选) .text11{text-shadow: 3px 3px 5px #f00 ;col ...

  8. 纯CSS3文字Loading动画特效

    纯CSS3文字Loading动画特效是一款个性的loading文字加载动画. 在线演示本地下载

  9. CSS3 文字渐变动画

    背景剪裁 语法:background-clip: border-box || padding-box || context-box || no-clip || text 本次用到的就是: -webki ...

随机推荐

  1. ubuntu修改grub界面默认开机顺序

    终端输入: sudo gedit /etc/default/grub GRUB_DEFAULT代表的就是启动项的顺序,从数字0开始 修改成默认的第几个,就赋值成几就好(顺序从数字0开始) 然后别忘了运 ...

  2. sql异常

    表结构 Id int UncheckedTitle nvarchar(50) CheckedValue nvarchar(1000) CheckedRemark nvarchar(1000) Chec ...

  3. GridView--scroolview嵌套listview和gridview

    我们在真实项目中通常会遇到ListView或者GridView嵌套在ScrollView中问题.但是做的时候会发现,一旦两者进行嵌套,即会发生冲突.得不到我们希望的效果.由于ListView和Grid ...

  4. 寒假学习unity的第一天

    1.在Assert中创建材质Material,可以为物体附上材质 2.实例化命令Instantiate(要生成的物体,生成的位置,生成物体的选择角度) 3.检测鼠标左键 if(Inhibitor.Ge ...

  5. python中的生成器

    什么是生成器? 生成器是一个包含了特殊关键字yield的函数.当被调用的时候,生成器函数返回一个生成器.可以使用send,throw,close方法让生成器和外界交互. 生成器也是迭代器,但是它不仅仅 ...

  6. LNMP环境搭建配置memcache

    原始出处  http://iceeggplant.blog.51cto.com/1446843/819576 memcached是高性能的,分布式的内存对象缓存系统,在动态应用中减少数据库负载,提升访 ...

  7. 项目中用到的logback列子

    <?xml version="1.0" encoding="UTF-8"?> <configuration> <appender ...

  8. [Java] 通过文件流拷贝文件

    package test.stream; import java.io.FileInputStream; import java.io.FileNotFoundException; import ja ...

  9. EXT layout

    1.Vbox createCenterPanel: function () { var pan = Ext.create('Ext.Panel', { height: '100%', title: ' ...

  10. [SQL]SQL语言入门级教材_SQL语法参考手册(三)

    SQL 语法参考手册 DB2 提供了关连式资料库的查询语言 SQL (Structured Query Language),是一种非常口语化.既易学又易懂的语法. 此语言几乎是每个资料库系统都必须提供 ...