用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 库,您可非常轻轻松地把这些动画效 ...
随机推荐
- Java调用Linux命令(cd的处理)
一.Java调用Linux系统的命令非常简单 这是一个非常常用的调用方法示例: public String executeLinuxCmd(String cmd) { System.out.print ...
- python标准库介绍——8 operator 模块详解
==operator 模块== ``operator`` 模块为 Python 提供了一个 "功能性" 的标准操作符接口. 当使用 ``map`` 以及 ``filter`` 一类 ...
- java的多线程(一)
我们知道我们打开个程序(或者说运行一款软件)其实也就是创建了一个进程,只不过程序是静态指令的集合,而进程是正在系统中运行的指令集合,进程是系统进行资源分配与调度的一个独立单位.进程具有独立性,动态性, ...
- 【转】用SQL实现树的查询
树形结构是一类重要的非线性结构,在关系型数据库中如何对具有树形结构的表进行查询,从而得到所需的数据是一个常见的问题.本文笔者以 SQL Server 2000 为例,就一些常用的查询给出了相应的算法与 ...
- Js控制弹窗实现在任意分辨率下居中显示
弹窗居中比较烦人的是怎么才能在任意分辨率下实现居中显示.1,html部分 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition ...
- C# xml可序列化多值枚举脚本
代码: using System; using System.Collections.Generic; using System.Xml; using System.Xml.Schema; using ...
- sqlite数据库部署到服务器上的问题
试了一天...本地测试是好的(WIN10 64位+VS2015),部署到服务器上(WIN2008 32位+IIS6) 总是不行..按网上说了什么不要BUNDLE的,加入X86X64目录再放那个SQLi ...
- redis基础之python连接redis(五)
前言 前面介绍了在数据库命令行直接操作redis,现在学习使用python的redis包来操作redis,本人安装的是redis==2.10.6: 系列文章 redis安装和配置 redis命令行操作 ...
- python3和2的区别
1.print函数 python2中的print语句,被python3中的print()函数取代.print 'hello world'运行结果: python2中同时输出多个对象时,会创建一个元组, ...
- 简单的搭建php开发平台 WAMP
下载wamp,地址http://www.wampserver.com/en/#download-wrapper 和正常软件安装下就行了. 修改WAMP中mysql默认空密码 WAMP安装好后,mysq ...