给需要实现文字描边的元素添加如下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. hibernate级联与反向

    cascade:设置本表与关联表之间的级联操作,如:设置为save-update,则插入或更新对象时同时保存或更新另一端的表,但不会产生关联关系数据,除非inverse为false. inverse: ...

  2. PLSQL_性能优化系列09_Oracle Partition Table数据分区表

    2014-08-22 Created By BaoXinjian

  3. API 双方认证探讨

    开放 api 已是大势所趋.而 api 这种东西有个特点就是覆水难收.一旦公开出去了,被大量用户使用,一旦修改,就会让广大用户都掉坑里.所以,api 在设计之初就要尽量考虑周全,并预留扩展可能. 目前 ...

  4. SQL语句的Select部分只写必要的列

    如果Select部分包含不需要的列,这会强制DB2必须进入数据页来得到所请求的特定列,这就要求更多的I/O操作.另外,如果再对这个不需要的列进行排序,就需要创建和传递一个更大的排序文件,相应地会使排序 ...

  5. 使用WebStorm/Phpstorm实现remote host远程开发

    如果你的开发环境是在远程主机上,webstorm可以提供通过ftp/ftps/sftp等方式实现远程同步开发.这样我们可以就抛弃ftp. winscp等工具,通过webstorm编辑远程文件以及部署, ...

  6. java获取对应字节数的内容

    每个英文字符占一字节 每个汉字当编码不同时字节数不同,utf-8中一个汉语字符占位3字节 示例: 获取任意一个字符串的前四个字节. Scanner sc = new Scanner(System.in ...

  7. http://host:8399/arcgis/rest/services/ 访问不了

    一.问题: 安装完arvserver后,rest服务http://host:8399/arcgis/rest/services/访问不了 二.问题原因: 查看了一下manager日志,其中记录了几个r ...

  8. esriSRProjCS2Type Constants

    ArcGIS Developer Help  (Geometry)   esriSRProjCS2Type Constants See Also esriSRProjCSType Constants ...

  9. Python第九章模块和包(2)

    1.如果文件下没有__init__.py文件,程序将不会认为这是一个Python的包. 2.如果要使用from 包  import  *  则需要 这样做. 是模块中包含 方法 的文件没有包含类: # ...

  10. php 分析Session无效的原因

    Session在开发中是非常重要的一个数据存储变量了,它可以实现不同页面之间的传值了,下面我们来为各位介绍在使用Session时碰到过期无效的一些问题吧. PHP开发过程中,可能有朋友经常会遇到Ses ...