css3文字阴影效果如何实现

这篇文章给大家分享的是有关css3文字阴影效果如何实现的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css3 text-shadow属性使用示例</title>
    <style>
      .t1{
          text-shadow: 5px 5px 5px #029789;
          font-size: 40px;
          font-weight: bold;
          color: white;
      }
      .t2{
          text-shadow: -5px -5px 5px #1094f2;
          font-size: 40px;
          font-weight: bold;
     color: white;
      }
    </style>
</head>
<body>
<div class="demo">
    <p class="t1">text-shadow属性使用示例1-文字阴影效果</p>
    <p class="t2">text-shadow属性使用示例2-文字阴影效果</p>
</div>
</body>
</html>

上述代码,我们通过浏览器访问,效果如下截图:

css3文字阴影效果如何实现

这样看是不是字体已经有了立体感呢?那么大家有没有发现示例1和示例2的不同处有哪些?其实显而易见,示例1中的文字阴影部分是在文字的右下方!而示例2中的字体阴影是在文字的左上方!

这些效果都是因为css3中text-shadow样式属性!我们可以发现示例1中text-shadow的值分别是5px 5px 5px #029789;示例2中的值分别是-5px -5px 5px #1094f2;这四个值分别表示,x轴方向的偏移量、y轴的偏移量、模糊值、阴影颜色。那么导致阴影位置的不同是因为前两个值的正负数值原因。

x轴为正值则表示往右偏移,为负值则往左,y轴为正值则表示往下偏移,为负值则往上,模糊值越大就越模糊。

那么了解了这些值的所属含义,就能根据自己的喜好,随意改变文字阴影效果。

感谢各位的阅读!关于css3文字阴影效果如何实现就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!