给需要实现文字描边的元素添加如下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. Codeforces Round #358 (Div. 2)B. Alyona and Mex

    B. Alyona and Mex time limit per test 1 second memory limit per test 256 megabytes input standard in ...

  2. javascript中标签与break和continue的配合使用

    var num = 0; outermost: for (var i=0; i<10; i++) { for (var j=0; j<10; j++) { if (j==5 || i==5 ...

  3. Hololens开发笔记之Gesture手势识别(基本介绍)

    手势识别是HoloLens交互的重要输入方法之一.HoloLens提供了底层API和高层API,可以满足不同的手势定制需求.底层API能够获取手的位置和速度信息,高层API则借助手势识别器来识别预设的 ...

  4. SqlServer2005基于已有表创建分区

    随着当今数据库的容量越来越快的朝着在大型数据库或超大型数据库的发展,对于数据库中的大 型表以及具有各种访问模式的表的可伸缩性和可管理性运行环境变得尤为重要, SQL server 从 SQL serv ...

  5. dom4j-full.jar 解析 XML

    dom4j-full.jar 解析 XML public Document getDocument() throws DocumentException { SAXReader read=new SA ...

  6. DIY--主板跳线接法

    如下图:

  7. 自己动手搭建 Redis 环境,并建立一个 .NET HelloWorld 程序测试(转)

    关于 Redis ,下面来自百度百科: redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set( ...

  8. C++学习42 输入和输出的概念

    我们经常用到的输入和输出,都是以终端为对象的,即从键盘输入数据,运行结果输出到显示器屏幕上.从操作系统的角度看,每一个与主机相连的输入输出设备都被看作一个文件.除了以终端为对象进行输入和输出外,还经常 ...

  9. [Flex] PopUpButton系列 —— 设置弹出菜单与主按钮之间的间隔

    <?xml version="1.0" encoding="utf-8"?><!--设置弹出菜单与主按钮之间的间隔 PopUpButtonPo ...

  10. jquery ajax事件

    $.ajax({ type : 'POST', url : 'user.php', data : $('form').serialize(), success : function (response ...