css3文字特效

css中新添加的css3CSS3提供了很多的设计上的新技术和高级功能，这给网页设计者们带来了极大的方便，网页设计需要的是新颖，美观并且能够让人眼前一亮，要想设计出好的网页，就需要不断的创新，不断的发现新的网页效果，这样一来，就给网页设计增添了不少难度，每个特效的实现都需要花费大量的时间来写大量的代码。有了css3的出现，就已经省了不少时间，首先我们来学习使用css3来做各种文字效果。

1.Inset Text(内阴影效果)

内阴影的文字效果是利用text-shadow属性根据不同光源制作出来的。我们在使用内阴影时需要注意三个颜色的配置问题，背景色，前景色，这三者结合起来才会有我们想要的效果。阴影色需要采用有一定的亮度对比色。

代码：

<style>

.insetText h2{

color: #f00;

text-shadow: 1px 1px 0px #212121;

} 

</style>

  <div class="insetText"><h2>内阴影</h2></div>

效果如下所示：

2.3D Text(3D立体效果)

3D文字没有用其他的标签属性，只是多次应用了CSS3中的text-shadow属性，进行多次阴影设置，并设置不同的阴影色，这样j就能得到我们需要的立体的文字效果。

代码如下：

 <style>

 .insetText h2{

  color: #f00;

  text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb,

  0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,0.1),

  0 0 5px rgba(0,0,0,0.1),0 1px 3px rgba(0,0,0,0.3),

  0 3px 5px rgba(0,0,0,0.2),0 5px 10px rgba(0,0,0,0.25);

   } 

  </style>

  <div class="insetText"><h2>3D立体</h2></div>

效果如下所示：

3.Text Embossing(浮雕效果)

浮雕效果我们同样也是使用text-shadow的属性来写的，我们在这里写的是背景色为暗色，前景色为亮色，下面我们来看一下代码：

 <style>

 .insetText h2{

 color: #f00;

 text-shadow: 0 -1px 0 #374683;

 } 

  </style>

  <div class="insetText"><h2>浮雕效果</h2></div>

效果如下所示：

这里我们提到了text-shadow，和text-shadow相似的是box-shadow，区别是一个是对文字效果的属性，一个是图层效果的属性，CSS3的box-shadow属性可以让我们实现图层阴影效果。

box-shadow属性的浏览器兼容性

先来看一个这个属性的浏览器兼容性:
Opera: 不知道是从哪个版本开始支持的，我在发这篇文章测试的时候，正好更新了Opera到最新的10.53版本，已经支持box-shadow属性。
firefox通过私有属性-moz-box-shadow支持。
Safari和Chrome通过私有属性-webkit-box-shadow支持。

如果我们把第一个例子中文字效果的text-shadow改为box-shadow，并给文字背景加上颜色，结果会是什么样的？

代码：

 <style>

 .insetText h2{

 color: #f00;

 } 

 .insetText{

 background:#FF9;

 width:150px;

 height:50px;

 box-shadow: 1px 1px 0px #212121;

 }

  </style>

  <div class="insetText"><h2>内阴影</h2></div>

效果如下所示：