css3教程:文字阴影解析

弄类个锤子

弄类个锤子

2016-02-20 00:04

get新技能是需要付出行动的,即使看得再多也还是要动手试一试。今天图老师小编跟大家分享的是css3教程:文字阴影解析,一起来学习了解下吧!

最近我因为要安装 Firebug 1.4 导致我不得不安装了 Firefox 3.5 ,所以很不小心地接触到了Wordpress后台那漂亮的文字阴影.也就是CSS中的text-shadow属性.所以今天我整理了一些资料,希望可以对大家有所启发.

首先我们看看wordpress 2.8后台使用了text-shadow的部分(绿色箭头).觉得怎么样?没错,这些都是CSS3属性,而不是图片做成的.

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

text-shadow是什么?

text-shadow早在CSS2中已经存在,而现在CSS3也准备将他加入其中.并且由于一直以来只有Safari支持这个属性所以我们很少见到真正的应用,直到最近Firefox 3.5对它的支持然重新唤起了人们对它的兴趣.

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

text-shadow可以支持给文字加上阴影,这样我们在设计时可以利用css3属性增加文字的质感而不用使用任何图片.
目前支持的浏览器有Firefox 3.1+,Safari 3+,Opera 9.5+等现代浏览器(数据可能有偏差).当然IE家族是无法支持的.

接下来看看text-shadow的语法:

text-shadow:color length length length;

color:颜色; length分别按顺序指X轴方向长度 Y轴方向长度 阴影模糊半径
正值在X轴表示向右,负值表示向左.同样的道理Y轴负值是表示向上.其中任意一个值可以为零也可为空(将做默认处理)

举个例子:

text-shadow: -1px 2px 3px #ffb69a;

表示X轴方向阴影向左1px,Y轴方向阴影向下2px,而阴影模糊半径3px,颜色为 #ffb69a

一些试验与demo

我做了点小小的试验,做成了一个 Demo页面 .为了让浏览器不支持text-shadow的用户看到阴影效果,请直接看以下截图(有位朋友说那个火鸟看起来像鸡):

展开更多 50%)
分享

猜你喜欢

css3教程:文字阴影解析

Web开发
css3教程:文字阴影解析

CSS3系列教程:阴影

Web开发
CSS3系列教程:阴影

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

CSS3教程(4):网页边框和网页文字阴影

Web开发
CSS3教程(4):网页边框和网页文字阴影

CSS3教程(7):CSS3嵌入字体

Web开发
CSS3教程(7):CSS3嵌入字体

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

CSS3教程(1):什么是CSS3

Web开发
CSS3教程(1):什么是CSS3

CSS3教程(8):CSS3透明度指南

Web开发
CSS3教程(8):CSS3透明度指南

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

好照片帮你把清新田园美景带回家

好照片帮你把清新田园美景带回家

CSS教程实例:关于网页的两列布局

CSS教程实例:关于网页的两列布局
下拉加载更多内容 ↓