常用CSS3效果:用text-shadow做CSS3 文字描边
思路:
利用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+以上的所有浏览器。。
常用CSS3效果:用text-shadow做CSS3 文字描边的更多相关文章
- CSS3 Generator提供了13个CSS3较为常用的属性代码生成工具,而且可以通过这款工具除了在线生成效果代码之外,还可以实时看到你修改的效果,以及浏览器的兼容性。
CSS3 Generator提供了13个CSS3较为常用的属性代码生成工具,而且可以通过这款工具除了在线生成效果代码之外,还可以实时看到你修改的效果,以及浏览器的兼容性. CSS3 Generator ...
- CREATE CSS3是一款在线集成众多CSS3功能的生成器,可以在线生成常用的CSS3效果
CREATE CSS3是一款在线集成众多CSS3功能的生成器,可以在线生成常用的CSS3效果 CREATE CSS3 彩蛋爆料直击现场 CREATE CSS3是一款在线集成众多CSS3功能的生成器,可 ...
- 用IE滤镜实现多种常用的CSS3效果
CSS3是当下非常火的一个话题之一,很多浏览器都已经开始支持这一特性,然后IE这个拥有庞大用户群体的平台,却无法提供这样的支持,即便是IE9发布,也无法改变这一事实,然而,幸运的是,IE并非在这方面毫 ...
- 发现两个有趣的CSS3效果
一.CSS3画机器猫 http://keleyi.com/keleyi/phtml/html5/3.htm 哆啦A梦效果图: 可用于浏览器对CSS3支持情况的测试 但最近有人对这个测试表示怀疑,指该测 ...
- css3新增属性有哪些?css3中常用的新增属性总结
css3新增属性有哪些?来提问这个问题的人都应该知道css3是css的升级版本,那么,css3既然是升级版本,自然是会新增一些属性,接下来本篇文章将给大家介绍关于css3中常用的新增属性. 一.css ...
- 让你心动的 HTML5 & CSS3 效果【附源码下载】
这里集合的这组 HTML5 & CSS3 效果,有的是网站开发中常用的.实用的功能,有的是先进的 Web 技术的应用演示.不管哪一种,这些案例中的技术都值得我们去探究和学习. 超炫的 HTML ...
- 8个前沿的 HTML5 & CSS3 效果【附源码下载】
作为一个前沿的 Web 开发者,对于 HTML5 和 CSS3 技术或多或少都有掌握.前几年这些新技术刚萌芽的时候,开发者们已经使用它们来小试牛刀了,如今这些先进技术已经遍地开发,特别是在移动端大显身 ...
- 颗粒翻页(css3效果展示)
用css3效果做了一个颗粒翻页效果,布局上,一张图片做底层,在这张图片上用js创建一层小的行和列各为r和c的小span,给这些span分别设置background-position:用来覆盖原来的一张 ...
- 10款让你心动的 HTML5 & CSS3 效果
这里集合的这组 HTML5 & CSS3 效果,有的是网站开发中常用的.实用的功能,有的是先进的 Web 技术的应用演示.不管哪一种,这些案例中的技术都值得我们去探究和学习. 1.超炫的 HT ...
随机推荐
- suse linux环境变量设置
以在suse上安装jdk1.5为例说明: 安装jdk1.5完毕后,就可以配置环境变量了. su root XXXXXX // 键入管理员密码 对于suse来说,只需在/etc/profile 文件后 ...
- PHPMailer邮件类使用错误分析
PHPMailer配置清单如下: require_once ‘class.phpmailer.php‘; $receiver = ”; $mail = new PHPMailer ( ); $mai ...
- base64 encoding
//https://en.wikipedia.org/wiki/Base64 std::string base64Encode(const std::vector<char>& b ...
- C# 阳历转农历
你妹的sb 原文 C#(ASP.NET)公历转农历的简单方法 Dot Net 平台,对全球化的支持做的非常好,不得不称赞一个 通常,将公历转为农历,是个非常烦的事情,需要整理闰年.闰月等的对照表. 在 ...
- js中DOM集合的动态特性
先引出一个问题:通过调用getElements*()这样的方法返回来类(伪)数组,能对其本身的元素进行排序吗? 答案是不能,因为这些对象的都是NodeList . NamedNodeMap 或 HTM ...
- SQL Server 最小化日志操作解析,应用[手稿]
Sql Server 中数据库在BULK_LOGGED/SIMPLE模式下的一些操作会采用最小化日志的记录方式,以减小tran log落盘日志量从而提高整体性能. 这里我简单介绍下哪些操作在什么样的情 ...
- 网站压力测试工具-Webbench源码笔记
Ubuntu 下安装使用 1.安装依赖包CTAGS sudo apt-get install ctage 2.下载及安装 Webbench http://home.tiscali.cz/~cz2105 ...
- 用js完成blog项目
//前台调用 var $ = function (args) { return new Base(args); } //基础库 function Base(args) { //创建一个数组,来保存获取 ...
- PHP上传大文件和处理大数据
1. 上传大文件 /* 以1.5M/秒的速度写入文件,防止一次过写入文件过大导致服务器出错(chy/20150327) */ $is_large_file = false; if( strlen($x ...
- mysql 中时间和日期函数应用
一.MySQL 获得当前日期时间 函数 1.1 获得当前日期+时间(date + time)函数:now() mysql> select now(); +-------------------- ...