CSS3作为新兴的前端技术可以实现很多复杂变化的效果,比如文字描边。

这里主要用到text-shadow属性,顾名思义就是为文字加上阴影效果。例:

  1. text-shadow:10px 5px 2px #f60;

各位置参数说明:

  1. text-shadow:x位移 y位移 模糊程度 颜色

其中:x位移和y位移表示阴影相对文字的偏移值,可以为负值。

现在说正题,这种思路其实很简单:对四个方向都作出模糊程度为零的1px阴影。

写法如是:

  1. -webkit-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;
  2. -moz-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;
  3. text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;
  4. *filter: Glow(Color=#000, Strength=1);

这个针对各主流浏览器做了适配的写法。

原则上,text-shadow支持了多方向阴影的写法,不过代价是代码偏多!

<!--EndF-->

用CSS3实现文字描边效果【效果在这儿,创意在你!】的更多相关文章

  1. CSS3实现文字折纸效果

    CSS3实现文字折纸效果 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <title></tit ...

  2. CSS3实现文字扫光效果

    本篇文章由:http://xinpure.com/css3-text-light-sweep-effect/ CSS3 实现的文字扫光效果,几乎可以和 Flash 相媲美了 效果解析 我们分析一下实现 ...

  3. 用CSS3实现文字描边

    CSS3作为新兴的前端技术可以实现很多复杂变化的效果,比如文字描边. 这里主要用到text-shadow属性,顾名思义就是为文字加上阴影效果.例: text-shadow:10px 5px 2px # ...

  4. CSS3实现文字描边的2种方法

    问题 最近遇到一个需求,需要实现文字的描边效果,如下图           解决方法一     首先想到去看CSS3有没有什么属性可以实现,后来被我找到了text-stroke     该属性是一个复 ...

  5. 纯css3实现文字间歇滚动效果

    场景: 假设有4条数据或者标题,视口中只显示两条,采用每次向上滚动一条数据来展示所有的数据.效果如图: 用JavaScript也很容易实现,但是需要操作DOM,可以参考这篇博客.考虑到项目中经常使用V ...

  6. CSS3实现文字描边

    -webkit-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0; -moz-text-shadow:#000 1px ...

  7. 常用CSS3效果:用text-shadow做CSS3 文字描边

    思路: 利用CSS3的text-shadow属性,对文字的四个边均用阴影. 最终效果: 单纯的为了实现效果.未作任何美化. 实现代码: HTML: <div>文字描边效果</div& ...

  8. Westciv Tools主要为CSS3提供了渐变gradients、盒子阴影box-shadow、变形transform和文字描边四种在线生成效果的工具

    Westciv Tools主要为CSS3提供了渐变gradients.盒子阴影box-shadow.变形transform和文字描边四种在线生成效果的工具 1.Westciv Tools 彩蛋爆料直击 ...

  9. jquery使用CSS3实现文字动画效果插件Textillate.js

    Textillate是一款基于jquery的使用CSS3实现文字动画的小巧插件.Textillate.js集成了一些很棒的使用CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效 ...

随机推荐

  1.  RabbitMQ3.6.3集群搭建+HAProxy1.6做负载均衡

    目录 目录 1.基本概念 1.1.RabbitMQ集群概述 1.2.软件负载均衡器HAProxy 2.RabbitMQ的配置步骤 2.1.安装 Erlang.RabbitMQ 2.2.修改 /etc/ ...

  2. AME_IExpense费用报表通过AME审批简单例子(案例)

    2014-05-30 Created By BaoXinjian

  3. C/S程序的一般流程和基本socket函数

    一.基于TCP协议的网络程序 下图是基于TCP协议的客户端/服务器程序的一般流程: 服务器调用socket().bind().listen()完成初始化后,调用accept()阻塞等待,处于监听端口的 ...

  4. hdu 4961 Boring Sum(高效)

    pid=4961" target="_blank" style="">题目链接:hdu 4961 Boring Sum 题目大意:给定ai数组; ...

  5. 小半斤拔凉 支付Java 相关参考

    http://git.oschina.net/littleCrazy/dianshangpingtai-zhifu http://git.oschina.net/52itstyle/springMvc ...

  6. mvn test 执行testng测试用例

    maven项目,把testng用例防止test目录下,配置pom.xml 文件如下,执行mvn test 能自动执行testng里面的用例 <project xmlns="http:/ ...

  7. 使用dockerfile 构建springboot 的docker镜像

    1 新建一个 springboot 项目,并将其打包成 jar 文件.生成demo1.jar 文件 请参考 使用springBoot搭建REATFul风格的web demo 2 编写 dockerfi ...

  8. Xilinx全局时钟

    前言 Xilinx系列.ISE环境中,设计复杂工程时全局时钟系统的设计显得尤为重要. 一.时钟网络与全局缓冲 在XilinxFPGA中,时钟网络分为两类:全局时钟网络和I/O区域时钟网络.以全铜工艺实 ...

  9. 把git上的larave项目通过SourceTree安装上再通过composer安装依赖库

    1.项目地址克隆 https://gitee.com/fps2tao/laravel5.5-alitaobao.git 通过SourceTree工具下载到本地 2.在命令行方式打开项目地址安装依赖库( ...

  10. 【转】js frame 框架编程

    源地址:http://www.blogjava.net/lusm/archive/2008/02/11/179620.html 1 框架编程概述 一个Html 页面可以有一个或多个子框架,这些子框架以 ...