思路:

利用CSS3的text-shadow属性,对文字的四个边均用阴影。

最终效果

单纯的为了实现效果。未作任何美化。

实现代码:

HTML:

<div>文字描边效果</div>

CSS:

div{
  text-shadow: 2px 0px 0px #fff,
         -2px 0px 0px #fff,
         0px 2px 0px #000,
         0px -2px 0px #000;
  }

text-shadow属性

语法:

text-shadow : none | <length> none | [<shadow>, ] * <shadow> 或none | <color> [, <color> ]*

相关属性 : 无

取值:
<color> :
指定颜色。
<length> :
由浮点数字和单位标识符组成的长度值。可为负值。指定阴影的水平延伸距离。
<opacity> :
由浮点数字和单位标识符组成的长度值。不可为负值。 指定模糊效果的作用距离。如果你仅仅需要模糊效果,将前两个 length 全部设定为 0 。请参阅 长度单位。
说明:

设置或检索对象中文本的文字是否有阴影及模糊效果。可以设定多组效果,方式是用逗号隔开。可以被用于伪类 :first-letter 和 :first-line 。对应的脚本特性为 textShadow

兼容性:

text-shadow兼容除了IE系列的浏览器之外的Firefox3.5+以上的所有浏览器。。

另对IE也有兼容方法:http://www.cnblogs.com/leejersey/p/3278615.html

常用CSS3效果:用text-shadow做CSS3 文字描边的更多相关文章

  1. CSS3 Generator提供了13个CSS3较为常用的属性代码生成工具,而且可以通过这款工具除了在线生成效果代码之外,还可以实时看到你修改的效果,以及浏览器的兼容性。

    CSS3 Generator提供了13个CSS3较为常用的属性代码生成工具,而且可以通过这款工具除了在线生成效果代码之外,还可以实时看到你修改的效果,以及浏览器的兼容性. CSS3 Generator ...

  2. CREATE CSS3是一款在线集成众多CSS3功能的生成器,可以在线生成常用的CSS3效果

    CREATE CSS3是一款在线集成众多CSS3功能的生成器,可以在线生成常用的CSS3效果 CREATE CSS3 彩蛋爆料直击现场 CREATE CSS3是一款在线集成众多CSS3功能的生成器,可 ...

  3. 用IE滤镜实现多种常用的CSS3效果

    CSS3是当下非常火的一个话题之一,很多浏览器都已经开始支持这一特性,然后IE这个拥有庞大用户群体的平台,却无法提供这样的支持,即便是IE9发布,也无法改变这一事实,然而,幸运的是,IE并非在这方面毫 ...

  4. 发现两个有趣的CSS3效果

    一.CSS3画机器猫 http://keleyi.com/keleyi/phtml/html5/3.htm 哆啦A梦效果图: 可用于浏览器对CSS3支持情况的测试 但最近有人对这个测试表示怀疑,指该测 ...

  5. css3新增属性有哪些?css3中常用的新增属性总结

    css3新增属性有哪些?来提问这个问题的人都应该知道css3是css的升级版本,那么,css3既然是升级版本,自然是会新增一些属性,接下来本篇文章将给大家介绍关于css3中常用的新增属性. 一.css ...

  6. 让你心动的 HTML5 & CSS3 效果【附源码下载】

    这里集合的这组 HTML5 & CSS3 效果,有的是网站开发中常用的.实用的功能,有的是先进的 Web 技术的应用演示.不管哪一种,这些案例中的技术都值得我们去探究和学习. 超炫的 HTML ...

  7. 8个前沿的 HTML5 & CSS3 效果【附源码下载】

    作为一个前沿的 Web 开发者,对于 HTML5 和 CSS3 技术或多或少都有掌握.前几年这些新技术刚萌芽的时候,开发者们已经使用它们来小试牛刀了,如今这些先进技术已经遍地开发,特别是在移动端大显身 ...

  8. 颗粒翻页(css3效果展示)

    用css3效果做了一个颗粒翻页效果,布局上,一张图片做底层,在这张图片上用js创建一层小的行和列各为r和c的小span,给这些span分别设置background-position:用来覆盖原来的一张 ...

  9. 10款让你心动的 HTML5 & CSS3 效果

    这里集合的这组 HTML5 & CSS3 效果,有的是网站开发中常用的.实用的功能,有的是先进的 Web 技术的应用演示.不管哪一种,这些案例中的技术都值得我们去探究和学习. 1.超炫的 HT ...

随机推荐

  1. html asp php java 清除缓存

    HTML页面 <META HTTP-EQUIV="pragma" CONTENT="no-cache"><META HTTP-EQUIV=&q ...

  2. SQL0668N 由于表 "db2inst1.test" 上的原因代码 "3",所以不允许操作(解因为LOAD引起的LOAD暂挂状态锁)

    DB2解因为LOAD引起的LOAD暂挂状态锁   一般解锁命名是,SET INTEGRITY FOR temp_test IMMEDIATE CHECKED   但是load暂挂状态是解不了的,可以l ...

  3. poj 2185(二维kmp)

    题意:让你求一个最小的覆盖子矩阵. 分析:首先第一点是确定的:那就是这个子矩阵肯定位于左上角,然后按行考虑,求出每一行可能的重复子串的长度,然后取所有行都存在并且长度最短的长度最为最小子矩阵的宽, 最 ...

  4. Javascript 中的小括号 “()” 的多义性

    Javascript 中小括号有5 种语义 语义1:函数声明时参数表 1 function func(arg1, arg2){  2    // ...  3  }    语义2:和一些语句联合使用以 ...

  5. matlab 调用VLfeat库开篇问题

    准备工作见此网站 :http://cnyubin.com/?p=85 保存关闭startup.m文件后 重新打开matlab后 在命令行输入path或者vl_version无法检测到库已安装到matl ...

  6. WMI使用的WIN32_类库名

    WMI使用的WIN32_类库名 包括:硬件类.操作系统类.安装应用程序类.WMI服务管理类.性能计数器类1.硬件类冷却类别Win32_Fan--风扇Win32_HeatPipe--热管Win32_Re ...

  7. 详解centos下vi的用法

    vi编辑器是所有Unix及Linux系统下标准的编辑器,它的强大不逊色于任何最新的文本编辑器,这里只是简单地介绍一下它的用法和一小部分指令.由于对Unix及Linux系统的任何版本,vi编辑器是完全相 ...

  8. CentOS下安装R

    R的Windows版本有直接的安装包,直接下载安装很方便,但是对于CentOS6以上,不能直接通过yum 安装R,需要自己编译. 1. 在编译之前,用yum安装各种软件 (1)安装gcc > y ...

  9. java开发eclipse常见问题(一)The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path

    最近刚开始用Eclipse开发,刚开始都是按教程一步一步的新建web工程也没出现什么问题. 今天选了一个新的workspace,建了个web工程发现最简单的jsp页面都报错:The superclas ...

  10. BITED-Windows8应用开发学习札记之一:Win8应用开发入门

    基于WinRT的Metro应用是我对Windows8的第一印象,简洁方块配以简单色调真的有沁人心脾的美感. 非常幸运,BITED在这个暑假的这个小学期里有幸学习到一门课程:软件工程基础实践,老师邀请了 ...