用CSS3实现文字描边效果【效果在这儿,创意在你!】
CSS3作为新兴的前端技术可以实现很多复杂变化的效果,比如文字描边。
这里主要用到text-shadow属性,顾名思义就是为文字加上阴影效果。例:
- text-shadow:10px 5px 2px #f60;
各位置参数说明:
- text-shadow:x位移 y位移 模糊程度 颜色
其中:x位移和y位移表示阴影相对文字的偏移值,可以为负值。
现在说正题,这种思路其实很简单:对四个方向都作出模糊程度为零的1px阴影。
写法如是:
- -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;
- 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支持了多方向阴影的写法,不过代价是代码偏多!
<!--EndF-->
用CSS3实现文字描边效果【效果在这儿,创意在你!】的更多相关文章
- CSS3实现文字折纸效果
CSS3实现文字折纸效果 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <title></tit ...
- CSS3实现文字扫光效果
本篇文章由:http://xinpure.com/css3-text-light-sweep-effect/ CSS3 实现的文字扫光效果,几乎可以和 Flash 相媲美了 效果解析 我们分析一下实现 ...
- 用CSS3实现文字描边
CSS3作为新兴的前端技术可以实现很多复杂变化的效果,比如文字描边. 这里主要用到text-shadow属性,顾名思义就是为文字加上阴影效果.例: text-shadow:10px 5px 2px # ...
- CSS3实现文字描边的2种方法
问题 最近遇到一个需求,需要实现文字的描边效果,如下图 解决方法一 首先想到去看CSS3有没有什么属性可以实现,后来被我找到了text-stroke 该属性是一个复 ...
- 纯css3实现文字间歇滚动效果
场景: 假设有4条数据或者标题,视口中只显示两条,采用每次向上滚动一条数据来展示所有的数据.效果如图: 用JavaScript也很容易实现,但是需要操作DOM,可以参考这篇博客.考虑到项目中经常使用V ...
- 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 ...
- 常用CSS3效果:用text-shadow做CSS3 文字描边
思路: 利用CSS3的text-shadow属性,对文字的四个边均用阴影. 最终效果: 单纯的为了实现效果.未作任何美化. 实现代码: HTML: <div>文字描边效果</div& ...
- Westciv Tools主要为CSS3提供了渐变gradients、盒子阴影box-shadow、变形transform和文字描边四种在线生成效果的工具
Westciv Tools主要为CSS3提供了渐变gradients.盒子阴影box-shadow.变形transform和文字描边四种在线生成效果的工具 1.Westciv Tools 彩蛋爆料直击 ...
- jquery使用CSS3实现文字动画效果插件Textillate.js
Textillate是一款基于jquery的使用CSS3实现文字动画的小巧插件.Textillate.js集成了一些很棒的使用CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效 ...
随机推荐
- List多个字段标识过滤 IIS发布.net core mvc web站点 ASP.NET Core 实战:构建带有版本控制的 API 接口 ASP.NET Core 实战:使用 ASP.NET Core Web API 和 Vue.js 搭建前后端分离项目 Using AutoFac
List多个字段标识过滤 class Program{ public static void Main(string[] args) { List<T> list = new List& ...
- PLSQL_标准游标类型的解析(概念)
2014-06-02 Created By BaoXinjian
- Linux内核中锁机制之RCU、大内核锁
在上篇博文中笔者分析了关于完成量和互斥量的使用以及一些经典的问题,下面笔者将在本篇博文中重点分析有关RCU机制的相关内容以及介绍目前已被淘汰出内核的大内核锁(BKL).文章的最后对<大话Linu ...
- SICP 习题 (2.8) 解题总结:区间的减法
SICP 习题 2.8 须要我们完毕区间运算的减法.区间运算的加法书中已经有了,代码例如以下: (define (add-interval x y) (make-interval (+ (lower- ...
- 3dmax坐标系与导出fbx的坐标系
3dmax和opengl都是右手坐标系,但是3dmax是z轴向上,而opengl中是Y轴向上.如图: 所以在3dmax的fbx导出对话框中有“轴转化”一项,可以设置“Y向上”或者“Z向上”. 默认是“ ...
- Logstash怎么导入csv
Logstash.Conf input { file { type => "SSRCode" path => "E:/FTPRootWorkSpace/SD/ ...
- NEXYS 3开发板练手--USB UART(二)
上一篇文章中提到实际上我们操作的只是一个“伪”USB协议,我们真正需要完成的收发机遵循的协议应该是异步串行通信协议.这个协议对于大家来说应该是再熟悉不过了,在这里我就不多废话了.需要说明的是,我在这个 ...
- java动态代理的两种方法
动态代理,有两种情况,第一种是有接口的情况下,你可以选择为jdk自带的动态代理的方式来编写程序,但你想要为一个实在的类编写动态代理的方式的话,这时候就必须选择一些开源的lib包,如cglib包,同时还 ...
- C#compiler
http://www.cnblogs.com/Ninputer/archive/2011/06/12/2078671.html Compilers - Managed Profile-Guided O ...
- windows xp 创建 Oracle(11G)数据库实例时写入系统日志失败解决方案
1.查看Windows日志相关服务(Even Log),无异常: 2.清空事件管理器中“应用程序”和“系统节点”的内容,对这两个节点,分别在“属性”页面用增大“最大日志文件大小”的值,并选中“按需要改 ...