用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 库,您可非常轻轻松地把这些动画效 ...
随机推荐
- Oracle子查询相关内容(包含TOP-N查询和分页查询)
本节介绍Oracle子查询的相关内容: 实例用到的数据为oracle中scott用户下的emp员工表,dept部门表,数据如下: 一.子查询 1.概念:嵌入在一个查询中的另一个查询语句,也就是说一个查 ...
- Word 2007 Blog Test
MAC 方法一: 引用 sudo gedit /etc/network/interfaces 将iface eth0 inet static后面添加一行 hwaddress ether 0 ...
- Android之getSystemService
getSystemService是Android很重要的一个API,它是Activity的一个方法,根据传入的NAME来取得对应的Object,然后转换成相应的服务对象.以下介绍系统相应的服务. 传入 ...
- Android vcard使用示例,生成vcf文件
Android vcard使用示例,生成vcf文件 我们备份手机联系人时,导出到SD卡时,会在SD卡中生成一个vcf文件,用于保存联系人姓名,手机号码. vCard 规范容许公开交换个人数据交换 ( ...
- laravel建立一个分组控制器和分组路由
路由 Route::group(['domain' => 'laravel.8g.com','namespace' => 'Admin'],function() { Route::get( ...
- JAVA class 编译jar。 控制台使用jar
//编译jar jar -cvf -mgtvEncode.jar -mgtvEncode.class //使用jar java -cp mgtvEncode.jar mgtvEncode
- 《Effective Java》读书笔记四(泛型)
Java1.5发行版本中增加了泛型(Generic).在没有泛型之前,从集合中读取到的每一个对象都必须进行转换.如果有人不小心插入了错误的类型对象,在运行时的转换处理就会出错.有了泛型之后,可以告诉编 ...
- apache配置,禁止指定后缀访问
每天都有人来服务器上扫描点什么,想下载点数据库或者什么的 服务器是java的,没有asp或者mdb这样的访问 用一下配置,可以禁止asp或者mdb访问,也可以加上zip和rar禁止 <Direc ...
- Windows下打造Sublime Text + Tex Live环境
一直在用Sublime Text + ctex集成环境编写Latex文档,最近发现ctex套件内嵌的MiKTeX包管理器功能太弱了,遂将目标转向了功能更加强大的Tex Live环境. 首先安装Tex ...
- Sublime Text 3 快捷鍵
/*On OS X, basic text manipulations (left, right, command+left, etc) make use of the system key bind ...