css3阴影效果-CSS3经典教程系列：CSS3阴影（text-shadow）解读

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

text-shadow之前出现在CSS2中，但在CSS2.1版本中被放弃，现在CSS3版本又重新拾起了它。 由此可见text-shadow属性是值得我们后端人员关注的，但是在这么多CSS3属性中，我个人认为它是使用最多的属性。 作为我们后端人员，我认为有必要学习和掌握这个属性。

基本句型：

text-shadow ： none |  none | [, ] *  或none |  [,  ]*
也就是：
text-shadow:[颜色(Color)  x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)],[颜色(color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)]...
或者
text-shadow:[x轴(X Offset) y轴(Y Offset)  模糊半径(Blur)  颜色(Color)],[x轴(X Offset) y轴(Y Offset)  模糊半径(Blur)  颜色(Color)]...

范围：

：宽度值，可以为负值。 用于指定阴影的延伸距离。其中XOffset为水平偏移值，YOffset为垂直偏移值

：指定阴影颜色，也可以是rgba透明色

：阴影的模糊值，不能为负值，用于指定模糊效果的效果距离。

如右图所示：

简单解释：

您可以对一个对象应用一组或多组阴影效果，如上面的句型所示，用冒号分隔。 text-shadow:X-OffsetY-OffsetBlurColor中的X-Offset表示阴影的水平偏移距离。 当值为正时，阴影向右倾斜。 如果值为负，则阴影向左倾斜； Y-Offset 指阴影的垂直偏转距离。 如果值为正，则阴影向上偏转； 否则，当值为负时，阴影偏向底部； Blur是指阴影的模糊程度，其值不能为负值。 如果值越大，阴影越模糊css3阴影效果，反之，阴影越清晰，如果不需要阴影模糊，可以将Blur值设置为0； 颜色是指阴影的颜色，可以使用rgba颜色。

浏览器兼容性：

让我们看一个例子。 首先，给所有的DEMO一个通用的样式和类名：

.demo {
      background: #666666;
      width: 440px;
      padding: 30px;
      font: bold 55px/100% "微软雅黑", "Lucida Grande", "Lucida Sans", Helvetica, Arial, Sans;;
      color: #fff;
      text-transform: uppercase;
  }

接下来我们给每个Demo添加自己的具体样式，如下：

.demo1 {
   text-shadow: red 0 1px 0;
}

效果不错，但是让我们头疼的是IE不支持text-shadow效果，但是为了兼容这个问题，我们不得不使用滤镜filter:shadow来处理（我是这么做的）不提倡使用过滤器）。 filter：阴影滤镜与dropshadow类似，也可以使用对象形成阴影效果。 不同的是阴影可以形成渐近效果，并且阴影的使用更加平滑。

过滤句型：

E {filter:shadow(Color=颜色值,Direction=数值,Strength=数值)}

其中，E为元素选择器，Color用于设置对象的阴影颜色； Direction用于设置投影的主方向，值为0，表示0度（表示向下方向），45为右上，90为右，135为右下，180为下，225左下为270，左上为315； Strength是硬度，类似于text-shadow中的blur值。

我们先不关心IE下的疗效。 我个人认为text-shadow用得好的话，也能像photoshop一样产生特别好的疗效。 下面我列出一些好看的例子供大家参考。

注意：下面所有的demo都需要添加这个通用样式：

.demo {
      background: #666666;
      width: 440px;
      padding: 30px;
      font: bold 55px/100% "微软雅黑", "Lucida Grande", "Lucida Sans", Helvetica, Arial, Sans;;
      color: #fff;
      text-transform: uppercase;
  }

功效一：Glow和ExtraGloweffect（即NEONeffect）

.demo2 {
  text-shadow: 0 0 20px red;
}

发光效果，我们设置一个比较大的模糊直径来降低它的发光效果，可以改变不同的模糊直径值来达到不同的效果，其实也可以同时减少几个不同的直径值来创建一个各种不同效果的影疗效果。 就像下面的NEON效果一样。

.demo3 {
  text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de;
}

功效二：AppleStyleEffect

.demo4 {
  color: #000;
  text-shadow: 0 1px 1px #fff;           
}

功效三：PhotoshopEmbossEffect

.demo5 {
  color: #ccc;
  text-shadow: -1px -1px 0 #fff,1px 1px 0 #333,1px 1px 0 #444;
}

疗效2和疗效3，我想使用photoshop的同事一定很熟悉，是不是和我们photoshop中的投影、圆雕的效果很相似呢？ 这两种效果的应用一定要注意。 模糊值必须设置为0，这样文本才不会有任何模糊效果。 它主要用于减少其纹理。 您还可以像在 Photoshop 中一样更改不同的投影角度。 ，然后产生不同的疗效，这里就不举例了，有兴趣的同学可以自己尝试一下。

功效四：BlurytextEffect

.demo6 {
  color: transparent;
  text-shadow: 0 0 5px #f96;
}

使用text-shadow做模糊效果时主要要注意的是把文字的前视图设置为透明。 模糊值越大，效果越模糊； 首先，我们不设置任何方向的偏斜值。 如果将上面的photoshopemboss效果结合起来，可以等待不同的效果。 提醒一下，opera浏览器不支持该效果。

结合上面的PhotoshopEmboss效果，我们可以创建带有模糊的圆形雕刻效果：

.demo7 {
  color: transparent;
  text-shadow:0 0 6px #F96, -1px -1px  #FFF, 1px -1px  #444;
}

功效五：Insettexteffect

.demo8 {
  color: #566F89;
  background: #C5DFF8;
  text-shadow: 1px 1px 0 #E4F1FF;
}

这些效果需要注意：文字的前景应该比背景颜色深一点，阴影颜色应该比背景颜色亮一点。 这一步非常重要。 阴影颜色太亮的话会显得很奇怪，太暗的话就没有效果。 具体实现可以看stylizedweb的制作。 内嵌效果就是文字的阴影效果，也是一种常见的效果。 阴影与少量倾斜量相同，以产生微妙的突出效果。

功效六：描边文字效果

.demo9 {
  color: #fff;
  text-shadow: 1px 1px 0 #f96,-1px -1px 0 #f96; 
}

和我们的Photoshop效果相比，我承认效果差很多，而且有断点，但是有时候可以尝试实现特殊的蒙版效果。 它主要使用两个阴影，第一个向左投影，第二个向左投影。 2.投影到右下角，还需要注意的是，我们没有使用模糊值来制作遮罩的阴影效果。

功效七：3D文字效果

.demo10 {
  color: #fff;
  text-shadow: 1px 1px rgba(197, 223, 248,0.8),2px 2px rgba(197, 223, 248,0.8),3px 3px rgba(197, 223, 248,0.8),4px 4px rgba(197, 223, 248,0.8),5px 5px rgba(197, 223, 248,0.8),6px 6px rgba(197, 223, 248,0.8);
}

我们可以通过改变投影方向来创建另一种3D文本效果：

.demo11 {
  color: #fff;
  text-shadow: -1px -1px rgba(197, 223, 248,0.8),-2px -2px rgba(197, 223, 248,0.8),-3px -3px rgba(197, 223, 248,0.8),-4px -4px rgba(197, 223, 248,0.8),-5px -5px rgba(197, 223, 248,0.8),-6px -6px rgba(197, 223, 248,0.8);
}

3D文字效果应用的原理就像Photoshop一样，我们在文字下方或上方复制多个视口，并将每个图层以1px的距离连接到左上或右下，从而创建3D效果。 同时，我们的层数越多，它就会越厚。 改为使用text-shadow就是使用多个阴影，并将阴影颜色设置为相同，并为其使用rgba颜色，如上例。

功效八：Vintge/Retrotext效果：

.demo11 {
  color: #eee;
  text-shadow: 5px 5px 0 #666, 7px 7px 0 #eee;
}

Vintageretro这些风格的文字效果是由两个文字阴影组成的。 这里需要说明的是：第一阴影颜色与背景颜色相同； 文字正面风景与第二个阴影颜色相同

疗效九：立体文字效果

.demo13 {
  color: rgba(255, 179, 140,0.5);
  text-shadow: 3px 3px 0 rgba(180,255,0,0.5);
}

立体文字的疗效起到补色疗效的作用，从而产生三维疗效图。 该效果是 CSS 重新调整用途的文本阴影和文本前景的 RGBA 颜色的组合。 在文本的前景和阴影上使用 rgba 颜色，以便通过阴影可以看到下面的文本。

其中我主要列举了九个不同疗效的例子。 其实可以改变各种形式来产生一些特殊的疗效css3阴影效果，再次否认CSS3的实力不浅。 希望您会喜欢这个房产，并能够更好地使用这个房产。 事实上，今天的IE还不支持它，但是你不应该低估CSS3的使用，因为迟早我们需要掌握这种新技术作为后端。